/**
 * ==========================================================================
 * SITE INTRO — ANIMAÇÃO DE ABERTURA CINEMATOGRÁFICA (MSA CODE)
 * 
 * Sequência e Timeline:
 * 1. [0.00s]        Fundo inicial branco (#FFFFFF) com pequeno círculo preto centralizado.
 * 2. [0.05s–0.85s]  Círculo preto (#000000) expande rapidamente até cobrir 100% da tela.
 * 3. [0.85s–1.15s]  Fundo 100% preto absoluto. Logo oficial grande com cores originais surge.
 * 4. [1.15s–4.15s]  PERMANÊNCIA DE 3 SEGUNDOS: Logo estático em evidência de branding.
 * 5. [4.15s–4.75s]  SAÍDA IMPACTANTE: Logo avança com zoom suave (scale 1.16) e fade-out.
 * 6. [4.75s]        Conclusão: scroll liberado, intro oculta, Hero revelado.
 * ==========================================================================
 */

/* ==========================================================================
   1. OVERLAY PRINCIPAL (PRIMEIRO PAINT RELEVANTE)
   ========================================================================== */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  animation:
    intro-bg-turn-black 0.01s linear 0.85s forwards,
    intro-fade-out 0.55s cubic-bezier(0.4, 0, 0.2, 1) 4.20s forwards;
}

/* ==========================================================================
   2. CÍRCULO PROTAGONISTA (COBERTURA MATEMÁTICA INTEGRAL)
   Dimensão base de 250vmax x 250vmax: garante diâmetro superior a 2x a diagonal
   máxima de qualquer viewport (inclusive ultrawide 21:9 e 32:9).
   ========================================================================== */
.site-intro-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250vmax;
  height: 250vmax;
  background-color: #000000;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.015);
  animation: intro-circle-expand 0.80s cubic-bezier(0.7, 0, 0.2, 1) 0.05s forwards;
}

/* ==========================================================================
   3. CONTAINER E LOGO ORIGINAL EM TAMANHO PROTAGONISTA
   Camada superior (z-index: 2), sem filtros alteradores de cor.
   Preserva a tipografia branca e os detalhes azul elétrico originais da marca.
   ========================================================================== */
.site-intro-logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  animation: intro-logo-reveal 0.30s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}

.site-intro-logo-img {
  display: block;
  /* Logo com presença protagonista e respiros harmônicos via clamp */
  width: clamp(240px, 28vw, 520px);
  height: auto;
  aspect-ratio: 1087 / 339;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  /* Cores originais 100% puras — sem filters ou blend-modes */
  transform: scale(1);
  animation: intro-logo-zoom 0.60s cubic-bezier(0.76, 0, 0.24, 1) 4.15s forwards;
}

/* ==========================================================================
   4. OTIMIZAÇÃO DE GPU (WILL-CHANGE ATIVO APENAS DURANTE A ANIMAÇÃO)
   ========================================================================== */
.site-intro:not(.site-intro--done) {
  will-change: opacity, visibility;
}

.site-intro:not(.site-intro--done) .site-intro-circle {
  will-change: transform;
}

.site-intro:not(.site-intro--done) .site-intro-logo {
  will-change: opacity, transform;
}

.site-intro:not(.site-intro--done) .site-intro-logo-img {
  will-change: transform;
}

/* ==========================================================================
   5. KEYFRAMES DAS ETAPAS
   ========================================================================== */

/* Transição do fundo para preto absoluto na conclusão da expansão */
@keyframes intro-bg-turn-black {
  to {
    background-color: #000000;
  }
}

/* Etapas 1 e 2: Círculo preto cresce suavemente até cobrir toda a viewport */
@keyframes intro-circle-expand {
  0% {
    transform: translate(-50%, -50%) scale(0.015);
  }
  15% {
    transform: translate(-50%, -50%) scale(0.025);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Etapa 3: Logo surge com fade elegante e microescala de 0.96 para 1 */
@keyframes intro-logo-reveal {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Etapa 4: Zoom final suave do logo para frente (1.0 -> 1.16) */
@keyframes intro-logo-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.16);
  }
}

/* Etapa 5: Fade-out final suave sincronizado com o zoom, revelando o Hero */
@keyframes intro-fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ==========================================================================
   6. SCROLL LOCK RIGOROSO
   Impede qualquer rolagem até que a intro e a animação do Hero terminem
   ========================================================================== */
html.intro-running,
body.intro-running,
html.hero-animating,
body.hero-animating {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* ==========================================================================
   7. ESTADO CONCLUÍDO (LIMPEZA TOTAL E LIBERAÇÃO DE RECURSOS)
   ========================================================================== */
.site-intro--done {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

.site-intro--done,
.site-intro--done * {
  will-change: auto !important;
  animation: none !important;
  pointer-events: none !important;
}

/* ==========================================================================
   8. ACESSIBILIDADE: PREFERS-REDUCED-MOTION
   Redução de movimento: tela preta direta com logo estático e fade rápido (~700ms)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .site-intro {
    background-color: #000000 !important;
    animation: intro-fade-out-reduced 0.20s ease-out 0.50s forwards !important;
  }

  .site-intro-circle {
    display: none !important;
    animation: none !important;
  }

  .site-intro-logo {
    opacity: 1 !important;
    transform: scale(1) !important;
    animation: none !important;
  }

  .site-intro-logo-img {
    animation: none !important;
    transform: scale(1) !important;
  }

  @keyframes intro-fade-out-reduced {
    0% {
      opacity: 1;
      visibility: visible;
    }
    100% {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
  }
}