/**
 * Animações de Eventos - CSS Auxiliar
 * Estados iniciais e correções de layout
 */

/* ============================================
   SCROLL BEHAVIOR
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* ============================================
   ESTADOS INICIAIS - Evita flash de conteúdo
   ============================================ */

/* Seção 1 */
.animate-menu-lateral {
    opacity: 0;
    transform: translateX(-100px);
}

.animate-container-up {
    opacity: 0;
    transform: translateY(100px);
}

.animate-title-words {
    opacity: 0;
}

.animate-title-words-2 {
    opacity: 0;
}
.animate-button-bg {
    position: relative;
    overflow: hidden;
    opacity: 0;
}

.animate-cards-numbers > div {
    opacity: 0;
    transform: translateY(50px);
}

.animate-contador-letters {
    /* opacity: 0; */
}

/* Textos com gradiente sempre visíveis */
.bg-gradient-to-br {
    opacity: 1 !important;
}

/* Garantir que bg-clip-text funcione corretamente */
.bg-clip-text {
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Garantir que text-transparent funcione com gradiente */
.text-transparent {
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Seção 4 - TODOS os member-info devem ser visíveis */
#section-4 .member-info {
    opacity: 1 !important;
}

/* Seção 4 - Título com gradiente sempre visível */
#section-4 .member-info .title-md-40 {
    opacity: 1 !important;
}

/* Seção 6 - Imagem full width */
#section-6 .speaker-info {
    opacity: 1 !important;
    width: 100% !important;
}

/* Seção 8 - Título alinhado à esquerda */
#section-8 h2 {
    opacity: 0;
    transform: translateX(-50px);
    text-align: left !important;
}

/* Seção 8 - H3 sempre visíveis */
#section-8 h3 {
    opacity: 0;
    display: block !important;
}

/* Seção 2 */
.animate-image-scale {
    opacity: 0;
    transform: scale(0.8);
}

.animate-badge-center {
    opacity: 0;
    transform: scaleX(0);
}

.animate-title-left {
    opacity: 0;
    transform: translateX(-80px);
}

.animate-paragraphs-down {
    opacity: 0;
    transform: translateY(-40px);
}

.animate-buttons-zoom {
    opacity: 0;
}

.animate-buttons-zoom a {
    transform: scale(0.5);
}

.animate-marquee-container {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
}

/* Seção 3 */
#section-3 h2 {
    opacity: 0;
    transform: translateX(-50px);
}

#section-3 .md\:grid .col-span-2 {
    opacity: 0;
    transform: scale(0.8);
}

/* Seção 4 */
#section-4 .md\:flex h2 {
    opacity: 0;
    transform: translateX(-50px);
}

#section-4 .md\:flex a {
    opacity: 0;
    transform: translateX(-50px);
}
 
#section-4 .member-info.active img {
    /* opacity: 0; */
    /* transform: translateY(50px); */
}
 
#section-4 .avatar-slider .avatar-item {
    opacity: 0;
    transform: scale(0);
}

/* Seção 5 */
#section-5 h2 {
    opacity: 0;
    transform: translateX(-50px);
}

#section-5 .md\:grid > div {
    opacity: 0;
    transform: scale(1.3);
}

/* Seção 6 */
#section-6 .md\:flex.hidden:not(.flex-col) {
    opacity: 0;
    transform: translateY(50px) scale(1.3);
}

#section-6 .speaker-slider .speaker-item {
    opacity: 0;
    transform: scale(0);
}

#section-6 .md\:flex.hidden.flex-col.gap-4 {
    opacity: 0;
    transform: translateX(50px);
}

/* Seção 7 */
#section-7 h2 {
    opacity: 0;
    transform: scale(0.8);
}

#section-7 .bg-green1-600 {
    /* opacity: 0;
    transform: scale(0.8); */
}

#section-7 .tab-content {
    opacity: 0;
    transform: translateY(30px);
}

/* Seção 8 */
#section-8 img {
    opacity: 0;
    transform: translateY(30px);
}

/* Seção 9 */
#section-9 .bg-\[\\#F8F8F8\] {
    opacity: 0;
    transform: translateY(-30px);
}

#section-9 .flex.flex-col.gap-7 > * {
    opacity: 0;
    transform: translateY(30px);
}

#section-9 .aspect-video {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
}

#section-9 .flex.flex-col.md\:flex-row.gap-3 a {
    opacity: 0;
    transform: translateX(-30px);
}

#section-9 .grid.grid-cols-2 img {
    opacity: 0;
    transform: translateY(30px) scale(1.3);
}

/* Seção 10 */
#section-10 .flex.flex-col.gap-\[10px\] > * {
    opacity: 0;
    transform: translateY(30px);
}

#section-10 .flex.flex-col.md\:flex-row.gap-3 a {
    opacity: 0;
    transform: scale(0.5);
}

#section-10 .accordion-item {
    opacity: 0;
    transform: translateY(30px);
}

/* ============================================
   PERFORMANCE - will-change
   ============================================ */

[class*="animate-"] {
    will-change: opacity, transform;
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    [class*="animate-"] {
        will-change: auto !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   MENU LATERAL - NAVEGAÇÃO COM SLIDE (MASK)
   ============================================ */

/* Container do link com posição relativa */
.number-link {
    position: relative;
    overflow: hidden;
}

/* Ícone normal (primeiro div.mask) */
.number-link > div.mask:first-child {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    transform: translateX(0);
    opacity: 1;
    background-color: #999999;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Ícone hover (segundo div.mask) - escondido por padrão */
.number-link > div.mask:last-child {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    transform: translateX(-100%);
    opacity: 0;
    background-color: #163C43;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Estado HOVER - Ícone normal sai para direita */
.number-link:hover > div.mask:first-child {
    transform: translateX(100%);
    opacity: 0;
}

/* Estado HOVER - Ícone hover entra da esquerda */
.number-link:hover > div.mask:last-child {
    transform: translateX(0);
    opacity: 1;
}

/* Estado ACTIVE - Ícone normal sai para direita */
.number-link.active > div.mask:first-child {
    transform: translateX(100%);
    opacity: 0;
}

/* Estado ACTIVE - Ícone hover entra da esquerda */
.number-link.active > div.mask:last-child {
    transform: translateX(0);
    opacity: 1;
}

/* ============================================
   MENU LATERAL - ÍCONES COM IMG
   ============================================ */

.number-link-img {
    position: relative;
    overflow: hidden;
}

/* Ícone normal - COR CINZA #999999 */
.number-link-img .icon-normal {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    transform: translateX(0);
    opacity: 1;
    /* Converte para cinza #999999 */
    filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(90%);
}

/* Ícone hover - COR VERDE #163C43 */
.number-link-img .icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    transform: translateX(-100%);
    opacity: 0;
    /* Converte para verde escuro #163C43 */
    /* filter: invert(20%) sepia(25%) saturate(1500%) hue-rotate(135deg) brightness(90%) contrast(95%); */
}

/* Hover - Normal sai */
.number-link-img:hover .icon-normal {
    transform: translateX(100%);
    opacity: 0;
}

/* Hover - Hover entra */
.number-link-img:hover .icon-hover {
    transform: translateX(0);
    opacity: 1;
}

/* Active - Normal sai */
.number-link-img.active .icon-normal {
    transform: translateX(100%);
    opacity: 0;
}

/* Active - Hover entra */
.number-link-img.active .icon-hover {
    transform: translateX(0);
    opacity: 1;
}

/* ============================================
   HELPERS
   ============================================ */

/* Garante visibilidade durante carregamento se JS falhar */
.no-js [class*="animate-"] {
    opacity: 1 !important;
    transform: none !important;
}