/*home*/
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.glass-nav {
    background: rgba(249, 249, 249, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.floating-input:focus-within label,
.floating-input input:not(:placeholder-shown)+label,
.floating-input textarea:not(:placeholder-shown)+label {
    transform: translateY(-1.5rem) scale(0.85);
    color: #d7ef46;
}

/*Sobre*/
 .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined[data-weight="fill"] {
    font-variation-settings: 'FILL' 1;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Acessibilidade - focus visible */
.focus-visible:focus-visible {
    outline: 2px solid #c1d82f;
    outline-offset: 2px;
}

/*Contato*/
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined[data-weight="fill"] {
    font-variation-settings: 'FILL' 1;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.input-premium {
    background: transparent;
    border: none;
    border-bottom: 1px solid #777963;
    color: #ffffff;
    transition: all 0.3s ease;
}
.input-premium:focus {
    outline: none;
    border-bottom-color: #c1d82f;
    box-shadow: 0 2px 4px rgba(193, 216, 47, 0.2);
}
.input-premium::placeholder {
    color: #c8c6c5;
}

/* Acessibilidade - focus visible */
.focus-visible:focus-visible {
    outline: 2px solid #c1d82f;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}