/* =====================================================
   ANIMAÇÕES — KEYFRAMES GLOBAIS
   ===================================================== */

@keyframes pulseDot{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.5); opacity: 0.6; }
}

@keyframes scrollThumb{
  0%{ top: -30%; }
  55%{ top: 100%; }
  100%{ top: 100%; }
}

@keyframes orbFloatA{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-4%, 5%) scale(1.08); }
}

@keyframes orbFloatB{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(5%, -6%) scale(1.05); }
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* =====================================================
   REVEAL — animação de entrada do conteúdo do Hero
   (classes ativadas via JS adicionando .is-visible)
   ===================================================== */
.reveal-up{
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out);
}

.reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* delays escalonados controlados por data-delay */
.reveal-up[data-delay="0"]{ transition-delay: 0ms; }
.reveal-up[data-delay="1"]{ transition-delay: 90ms; }
.reveal-up[data-delay="2"]{ transition-delay: 200ms; }
.reveal-up[data-delay="3"]{ transition-delay: 320ms; }
.reveal-up[data-delay="4"]{ transition-delay: 440ms; }

/* =====================================================
   INTRO — BRAND INTRO PREMIUM
   Camadas: glow > partículas (canvas) > símbolo oficial > logo horizontal oficial
   Toda a coreografia de opacidade/escala é controlada via GSAP em intro.js;
   aqui ficam apenas os estados base, hardware acceleration e o "hidden" final.
   ===================================================== */
.intro{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-black);
  transform: translateZ(0) scale(1);
  will-change: transform, opacity, filter;
  transition: opacity 900ms var(--ease-in-out), visibility 0s linear 900ms;
}

.intro.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --------- glow central suave (cores oficiais) --------- */
.intro__glow{
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(139,92,246,0.28), rgba(139,92,246,0) 70%) center / 60% 60% no-repeat,
    radial-gradient(closest-side, rgba(96,165,250,0.20), rgba(96,165,250,0) 72%) center / 85% 85% no-repeat;
  will-change: opacity, transform;
}

/* --------- partículas nascendo no centro --------- */
.intro__particles{
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* --------- palco central ---------
   Ocupa o quadro inteiro da intro e empilha símbolo + logo na mesma
   célula do grid. Isso garante centralização robusta em qualquer
   resolução, sem depender de margin:auto contra uma caixa que só
   tinha o tamanho do símbolo (a causa do deslocamento em alguns
   celulares). */
.intro__stage{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
}

.intro__mark-wrap{
  grid-area: 1 / 1;
  position: relative;
  width: 108px;
  height: 108px;
  opacity: 0;
  transform: scale(0.8);
  filter: blur(14px);
  will-change: opacity, transform, filter;
}

.intro__mark-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 22px rgba(139,92,246,0.45)) drop-shadow(0 0 40px rgba(96,165,250,0.25));
  user-select: none;
  -webkit-user-drag: none;
}

/* brilho discreto que percorre o símbolo após ele aparecer */
.intro__mark-shine{
  position: absolute;
  inset: -10%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-120%);
  pointer-events: none;
  will-change: transform, opacity;
}

/* --------- logo horizontal oficial (assume o lugar do símbolo) ---------
   Empilhada na mesma célula de grid do símbolo (grid-area: 1 / 1),
   então o centro de ambos coincide sempre, em qualquer resolução. */
.intro__logo-img{
  grid-area: 1 / 1;
  width: 300px;
  max-width: 62vw;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.94);
  filter: blur(6px);
  user-select: none;
  -webkit-user-drag: none;
  will-change: opacity, transform, filter;
}

/* =====================================================
   MICRO-INTERAÇÕES DE HOVER PREMIUM
   ===================================================== */
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.btn:hover::before{ transform: translateX(120%); }

/* fade genérico usado por elementos que aparecem após o load */
.fade-in{
  animation: fadeIn 900ms var(--ease-out) both;
}