/* ============================================================
   ANIMATION TIMINGS — painel de controle
   Ajuste os valores abaixo para experimentar os efeitos.
   ============================================================

   PÁGINA — fade-in geral do body ao carregar
   ------------------------------------------------------------ */
:root {
  --anim-page-duration:      0.3s;   /* duração do fade-in do body */
  --anim-page-delay:         0.1s;   /* delay antes do body aparecer */

  /* TOP-BAR — deslize de cima ao carregar
     ---------------------------------------------------------- */
  --anim-topbar-duration:    0.4s;
  --anim-topbar-delay:       0.05s;

  /* NAVBAR — deslize de cima ao carregar
     ---------------------------------------------------------- */
  --anim-navbar-duration:    0.5s;
  --anim-navbar-delay:       0.15s;

  /* HERO — cada elemento aparece em cascata
     ---------------------------------------------------------- */
  --anim-hero-duration:      0.8s;   /* duração de cada elemento */
  --anim-hero-delay-title:   0.3s;   /* delay do título */
  --anim-hero-delay-text:    0.6s;   /* delay do parágrafo */
  --anim-hero-delay-btn:     1s;   /* delay do botão */

  /* SCROLL REVEAL — elementos que aparecem ao fazer scroll
     ---------------------------------------------------------- */
  --anim-reveal-duration:    2s;   /* duração do fade-in/slide */
  --anim-reveal-distance:    24px;   /* distância do deslize (reveal normal) */

  /* STAGGER — delay entre filhos de .reveal-stagger
     ---------------------------------------------------------- */
  --anim-stagger-step:       0.1s;   /* incremento de delay entre cada filho */
}

/* ============================================================
   PAGE LOAD
   ============================================================ */
body {
  opacity: 0;
  animation: pageLoad var(--anim-page-duration) ease-out var(--anim-page-delay) forwards;
}

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

/* ============================================================
   TOP-BAR & NAVBAR ENTRANCE
   ============================================================ */
.top-bar {
  opacity: 0;
  animation: navEntrance var(--anim-topbar-duration) ease-out var(--anim-topbar-delay) forwards;
}

.navbar {
  opacity: 0;
  animation: navEntrance var(--anim-navbar-duration) ease-out var(--anim-navbar-delay) forwards;
}

@keyframes navEntrance {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO ENTRANCE (cascata: título → texto → botão)
   ============================================================ */
.hero .hero__title {
  opacity: 0;
  transform: translateY(20px);
  animation: heroEntrance var(--anim-hero-duration) cubic-bezier(0.16, 1, 0.3, 1)
             var(--anim-hero-delay-title) forwards;
}

.hero .hero__text {
  opacity: 0;
  transform: translateY(20px);
  animation: heroEntrance var(--anim-hero-duration) cubic-bezier(0.16, 1, 0.3, 1)
             var(--anim-hero-delay-text) forwards;
}

.hero .btn {
  opacity: 0;
  transform: translateY(16px);
  animation: heroEntrance var(--anim-hero-duration) cubic-bezier(0.16, 1, 0.3, 1)
             var(--anim-hero-delay-btn) forwards;
}

@keyframes heroEntrance {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SCROLL REVEAL — estado inicial (invisible)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(var(--anim-reveal-distance));
  transition: opacity  var(--anim-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--anim-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal--left {
  opacity: 0;
  transform: translateX(calc(-1 * var(--anim-reveal-distance)));
  transition: opacity  var(--anim-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--anim-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--right {
  opacity: 0;
  transform: translateX(var(--anim-reveal-distance));
  transition: opacity  var(--anim-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--anim-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity  var(--anim-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--anim-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

/* estado final (visível — adicionado pelo JS via IntersectionObserver) */
.reveal.revealed,
.reveal--left.revealed,
.reveal--right.revealed,
.reveal--scale.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ============================================================
   STAGGER — delay progressivo entre filhos de .reveal-stagger
   ============================================================ */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: calc(var(--anim-stagger-step) * 0); }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: calc(var(--anim-stagger-step) * 1); }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: calc(var(--anim-stagger-step) * 2); }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: calc(var(--anim-stagger-step) * 3); }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: calc(var(--anim-stagger-step) * 4); }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: calc(var(--anim-stagger-step) * 5); }

/* ============================================================
   REDUCED MOTION — respeita preferência do sistema
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body,
  .top-bar,
  .navbar { animation: none; opacity: 1; }

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale { opacity: 1; transform: none; transition: none; }

  .hero .hero__title,
  .hero .hero__text,
  .hero .btn { opacity: 1; animation: none; transform: none; }
}