/* ============================================================
   ES11 · Motion — reveals no scroll (princípios Emil Kowalski)
   - Anima só transform/opacity (GPU). Entrada = ease-out.
   - Reveals disparam UMA vez via IntersectionObserver (.is-visible).
   - Sem JS, o conteúdo aparece normalmente (.js habilita o estado inicial).
   - prefers-reduced-motion: sem movimento, só fade suave.
   ============================================================ */

/* Estado inicial só quando o JS está ativo (evita "flash" e degrada sem JS) */
.js .reveal,
.js .reveal-lines .line__inner,
.js .reveal-media {
  opacity: 0;
  will-change: transform, opacity;
}

/* --- Fade up --- */
.js .reveal {
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Stagger: filhos entram em cascata --- */
/* reveal.js seta --i (índice) em cada filho .reveal dentro de .stagger */
.js .stagger > .reveal {
  transition-delay: calc(min(var(--i, 0), 6) * 65ms);
}

/* --- Reveal de mídia: blur + scale sutil (nada surge do nada) --- */
.js .reveal-media {
  transform: scale(0.97);
  filter: blur(6px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
}
.reveal-media.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Títulos NÃO fatiados (mobile / reduced-motion): fade-up simples,
   sem overflow:hidden — o texto quebra naturalmente. */
.js .reveal-lines:not([data-sliced]) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal-lines:not([data-sliced]).is-visible {
  opacity: 1;
  transform: none;
}

/* --- Mask-reveal por linha (títulos display) --- */
/* reveal.js fatia o título nos <br> em .line > .line__inner */
/* O padding-bottom dá folga para as descidas das letras (g, j, p, q, y)
   não serem cortadas pelo overflow:hidden da máscara; a margem negativa
   devolve esse espaço para o layout não abrir buracos entre as linhas. */
.reveal-lines .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.js .reveal-lines .line__inner {
  display: block;
  transform: translateY(110%);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal-lines.is-visible .line__inner {
  opacity: 1;
  transform: none;
}
/* cascata entre linhas */
.reveal-lines.is-visible .line:nth-child(2) .line__inner {
  transition-delay: 70ms;
}
.reveal-lines.is-visible .line:nth-child(3) .line__inner {
  transition-delay: 140ms;
}
.reveal-lines.is-visible .line:nth-child(4) .line__inner {
  transition-delay: 210ms;
}

/* ============================================================
   "Como funciona" — filete azul-marinho que preenche cada passo ao
   entrar na viewport. O mesmo --i do stagger dá o efeito de conector
   que AVANÇA de um passo ao próximo. Anima só transform (scaleX).
   Sem JS (sem .js) o filete fica cheio: é decorativo, degrada limpo.
   ============================================================ */
.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-700), var(--navy-900));
  transform-origin: left;
}
.js .step::before {
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 6) * 65ms);
}
.step.is-visible::before {
  transform: scaleX(1);
}

/* ============================================================
   Reduced motion — sem deslocamento/blur; comprensão via fade leve.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal-media,
  .js .reveal-lines,
  .js .reveal-lines .line__inner {
    transform: none !important;
    filter: none !important;
    transition: opacity 240ms ease !important;
    transition-delay: 0ms !important;
  }
  .reveal.is-visible,
  .reveal-media.is-visible,
  .reveal-lines.is-visible,
  .reveal-lines.is-visible .line__inner {
    opacity: 1;
  }
  /* Hero: sem hover-lift — retrato e chip estáticos */
  .hero__photo,
  .hero__label {
    transition: none !important;
  }
  /* Stepper: filete aparece no estado final, sem preencher animado */
  .js .step::before {
    transition: none !important;
  }
}