/* motion.css — base-kit BuildV · camada rica de movimento (etapa 7).
   Estados iniciais + FAIL-SAFE. Só transform/opacity (performático). */

/* FAIL-SAFE: sem JS (ou se o observer não disparar), o conteúdo APARECE.
   O html ganha .js inline no <head>; sem ela, tudo visível. */
html:not(.js) [data-reveal],
html:not(.js) .hero-media,
html:not(.js) [data-underline]{opacity:1 !important;transform:none !important}
html:not(.js) [data-clip]{clip-path:none !important}
html:not(.js) [data-draw] .draw{stroke-dashoffset:0 !important}

/* Reveal on-scroll */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);transition-delay:calc(var(--stg,0) * 90ms)}
[data-reveal].is-in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.12s}[data-delay="2"]{transition-delay:.24s}[data-delay="3"]{transition-delay:.36s}

/* Hero · entrada imediata guiada por CSS (não espera JS nem IntersectionObserver):
   H1 ≈ .40s, apoio ≈ .46s, CTA ≈ .52s após a primeira pintura. Quem chega do anúncio vê a promessa e o botão já. */
@keyframes bk-hero-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero [data-reveal]{opacity:1;transform:none;transition:none;animation:bk-hero-in .4s var(--ease) both}
.hero [data-reveal][data-delay="1"]{animation-delay:.06s}
.hero [data-reveal][data-delay="2"]{animation-delay:.12s}
.hero [data-reveal][data-delay="3"]{animation-delay:.18s}
.hero [data-underline]{transition-duration:.6s;transition-delay:.1s}

/* Contadores: dígitos de largura fixa, sem o número "tremer" enquanto conta */
[data-count]{font-variant-numeric:tabular-nums}

/* Hero · zoom que assenta (sóbrio: 1.06, DS evita zoom agressivo) */
.hero-media{transform:scale(1.06);transition:transform 1.6s var(--ease)}
.hero-media.is-in{transform:scale(1)}

/* Título — sublinhado que desenha */
[data-underline]{background-image:linear-gradient(var(--c-accent),var(--c-accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 3px;transition:background-size .8s ease .2s}
[data-underline].is-in{background-size:100% 3px}

/* Timeline — linha que desenha */
[data-timeline] .line{transform:scaleY(0);transform-origin:top;transition:transform 1.2s ease}
[data-timeline].is-in .line{transform:scaleY(1)}

/* Blueprint-draw: traço SVG que se desenha (pathLength="1" no elemento .draw) */
[data-draw] .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
[data-draw].is-in .draw{stroke-dashoffset:0}
[data-draw] .draw--2{transition-delay:.5s}[data-draw] .draw--3{transition-delay:.9s}
[data-draw] .draw-fade{opacity:0;transition:opacity .6s var(--ease) 1.2s}
[data-draw].is-in .draw-fade{opacity:1}

/* Marquee */
.marquee{overflow:hidden}
.marquee__track{display:inline-flex;gap:2rem;white-space:nowrap;animation:bk-mq 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes bk-mq{to{transform:translateX(-50%)}}

/* ⚠️ nunca animar transform em position:sticky (salta ao colar) — em pilha sticky, entrada só por opacity */
/* ---------- Refino 28/10 · camada moderna (palavras, fotos, superfícies) ----------
   Tudo nasce do JS (motion.js): sem JS nada fica escondido. */

/* Títulos: cada palavra sobe de dentro de uma máscara (hero na chegada, H2 ao entrar na tela) */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .02em .16em;margin:-.14em -.02em -.16em}
.sw__i{display:inline-block;will-change:transform}
[data-words] .sw__i{transform:translateY(1.5em)}
[data-words].is-in .sw__i{transform:none;transition:transform 1s var(--ease-out) calc(var(--i,0) * 32ms)}
/* H1 do hero: palavras já vêm separadas no HTML (data-words-static), então a entrada é CSS puro e começa
   na primeira pintura, sem esperar JS. Primeira palavra em ~.1s, título inteiro em ~1,2s; o CTA segue em .52s. */
.hero h1[data-words-static]{animation:none;opacity:1;transform:none}
.hero h1[data-words-static] .sw__i{animation:bk-word .9s var(--ease-out) both;animation-delay:calc(40ms + var(--i,0) * 36ms)}
@keyframes bk-word{from{transform:translateY(1.5em)}to{transform:none}}

/* Fotos: revelam de baixo para cima com um leve assentar de zoom */
.img-rv{clip-path:inset(100% 0 0 0);transition:clip-path .95s var(--ease-out)}
.img-rv.img-rv--zoom{transform:scale(1.12);transition:clip-path .95s var(--ease-out),transform 1.3s var(--ease-out)}
.img-rv.is-in{clip-path:inset(0 0 0 0)}
.img-rv.img-rv--zoom.is-in{transform:none}

/* WhatsApp flutuante: anel que respira (chama o olho sem piscar) */
.wa-float::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--c-primary);
  animation:bk-ring 3.2s var(--ease-out) 2s infinite;pointer-events:none}
@keyframes bk-ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}

@media (prefers-reduced-motion: reduce){
  [data-words] .sw__i,.hero h1[data-words-static] .sw__i{transform:none !important;animation:none !important;transition:none !important}
  .img-rv{clip-path:none !important;transform:none !important;transition:none !important}
  .wa-float::after{animation:none;display:none}
  [data-reveal],.hero-media,[data-underline],[data-timeline] .line{transition:none !important;transform:none !important;opacity:1 !important;background-size:100% 3px !important}
  [data-draw] .draw{transition:none !important;stroke-dashoffset:0 !important}[data-draw] .draw-fade{transition:none !important;opacity:1 !important}
  .marquee__track{animation:none !important}
  .hero [data-reveal]{animation:none !important}
}