/* ==================================================
   VIPZUE — MOTION / REVEAL ENGINE (CSS)
   Trabalha em conjunto com js/reveal.js (IntersectionObserver).
   Estado inicial oculto -> classe .is-visible aplicada em runtime.
   Prioriza transform + opacity. Respeita prefers-reduced-motion.
   ================================================== */

.reveal-up,
.reveal-scale,
.reveal-left,
.reveal-mask,
.reveal-mask-eagle {
  will-change: transform, opacity;
}

/* ---- Fade + translateY ----
   Os estados iniciais ocultos só valem com JS ativo (.js-ready).
   Sem JS, todo o conteúdo permanece visível e legível. */
.js-ready .reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-out-strong),
    transform var(--dur-base) var(--ease-out-strong);
}
.js-ready .reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Fade + translateX (personagens método) ---- */
.js-ready .reveal-left {
  opacity: 0;
  transform: translateX(-16px) scale(0.98);
  transition: opacity var(--dur-slow) var(--ease-out-strong),
    transform var(--dur-slow) var(--ease-out-strong);
}
.js-ready .reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* ---- Divisores (scaleX) ---- */
.js-ready .reveal-scale {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.js-ready .reveal-scale.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

/* ---- Headline reveal por máscara (linha a linha) ---- */
/* A máscara precisa de folga vertical: com entrelinha fechada, um
   overflow:hidden colado ao line-box corta ascendentes e descendentes
   (o "p" de "impedindo", o "?" de "mais?"). A folga é compensada por
   margem negativa para não alterar o ritmo do bloco. */
.reveal-mask .reveal-line,
h1 .reveal-line,
h2 .reveal-line {
  display: block;
  overflow: hidden;
  padding-block: 0.14em;
  margin-block: -0.14em;
}

.js-ready .reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out-strong),
    opacity var(--dur-slow) var(--ease-out-strong);
}

.js-ready .reveal-mask.is-visible .reveal-line > span,
.js-ready .is-visible .reveal-line > span {
  transform: translateY(0);
  opacity: 1;
}

/* headline sem sub-spans .reveal-line (eyebrow simples) */
p.reveal-mask,
p.eyebrow.reveal-mask {
  overflow: hidden;
  display: inline-block;
}
.js-ready p.reveal-mask > span,
.js-ready p.eyebrow.reveal-mask > span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out-strong),
    opacity var(--dur-base) var(--ease-out-strong);
}
.js-ready p.reveal-mask.is-visible > span,
.js-ready p.eyebrow.reveal-mask.is-visible > span {
  transform: translateY(0);
  opacity: 1;
}

/* ---- Stagger: aplica delay incremental via data-stagger ---- */
[data-stagger].reveal-up,
[data-stagger] .reveal-up {
  transition-delay: calc(var(--stagger-step, 130ms) * var(--i, 0));
}

/* JS define --i a partir de data-stagger; fallback via atributo */
[data-stagger="0"] { --i: 0; }
[data-stagger="1"] { --i: 1; }
[data-stagger="2"] { --i: 2; }
[data-stagger="3"] { --i: 3; }
[data-stagger="4"] { --i: 4; }
[data-stagger="5"] { --i: 5; }
[data-stagger="6"] { --i: 6; }
[data-stagger="7"] { --i: 7; }

/* ---- Águia hero: reveal por máscara + leve escala ---- */
.reveal-mask-eagle {
  clip-path: inset(0 0 0 0);
}
.js-ready .reveal-mask-eagle img {
  transform: scale(1.03);
  opacity: 0;
  transition: transform 900ms var(--ease-out-strong), opacity 900ms var(--ease-out-strong);
}
.js-ready .reveal-mask-eagle.is-visible img,
.js-ready .hero.is-loaded .reveal-mask-eagle img {
  transform: scale(1);
  opacity: 1;
}

/* ---- SVG stroke reveal (linhas de progresso) ---- */
.js-ready .svg-draw {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}
.js-ready .svg-draw.is-visible {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-left,
  .reveal-scale,
  .reveal-line > span,
  p.reveal-mask > span,
  .reveal-mask-eagle img,
  .svg-draw {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .reveal-up,
  .reveal-left {
    transform: none;
  }
}