/* ═══════════════════════════════════════════════
   Transição de página — wipe up (cortina subindo)
   ═══════════════════════════════════════════════ */

body.fx-leaving {
  animation: fx-wipe-up-out 380ms cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

body.fx-entering {
  animation: fx-wipe-up-in 460ms cubic-bezier(0.83, 0, 0.17, 1) both;
}

/* Sai: encolhe de baixo pra cima (bottom desaparece primeiro) */
@keyframes fx-wipe-up-out {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); }
}

/* Entra: revela de baixo pra cima (bottom aparece primeiro) */
@keyframes fx-wipe-up-in {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Fundo escuro pra suavizar o flash de navegação entre páginas */
html { background-color: #0a0a0a; }

/* ═══════════════════════════════════════════════
   Stagger: elementos do hero entram em sequência
   após a cortina subir
   ═══════════════════════════════════════════════ */

body.fx-entering .hero-eyebrow,
body.fx-entering .hero h1,
body.fx-entering .hero-sub,
body.fx-entering .hero-cta-row,
body.fx-entering .hero-stats,
body.fx-entering .hero-scroll {
  animation: hero-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.fx-entering .hero-eyebrow  { animation-delay: 320ms; }
body.fx-entering .hero h1       { animation-delay: 400ms; }
body.fx-entering .hero-sub      { animation-delay: 480ms; }
body.fx-entering .hero-cta-row  { animation-delay: 560ms; }
body.fx-entering .hero-stats    { animation-delay: 640ms; }
body.fx-entering .hero-scroll   { animation-delay: 720ms; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.fx-leaving,
  body.fx-entering,
  body.fx-entering .hero-eyebrow,
  body.fx-entering .hero h1,
  body.fx-entering .hero-sub,
  body.fx-entering .hero-cta-row,
  body.fx-entering .hero-stats,
  body.fx-entering .hero-scroll {
    animation: none !important;
  }
}