/* =========================================================
   MOTION: camada de animações do site (inspirada no peakstudio.com.br)
   - Entrada do topo em sequência, textos e fotos que "sobem" ao rolar,
     faixa de itens que corre sozinha, brilho que segue o mouse nos cards,
     botões que se enchem no hover, linha do tempo que se desenha ao rolar.
   - Tudo é leve (só transform/opacity), respeita "reduzir movimento" do sistema
     e o conteúdo aparece normalmente se o JavaScript não carregar.
   - Para desligar tudo: tire 'motion' das listas em head() e scripts() no
     tools/gen/common.py e rode  python3 tools/gen/build.py
   ========================================================= */
:root {
  --m-ease: cubic-bezier(.22, .7, .2, 1);        /* entrada suave que desacelera no fim */
  --m-spring: cubic-bezier(.18, .89, .32, 1.28); /* "pulinho" de chips, ícones e preço */
}

@keyframes m-rise { from { opacity: 0; translate: 0 26px; } }
@keyframes m-pop { from { opacity: 0; scale: .82; translate: 0 18px; } }
@keyframes m-photo { from { clip-path: inset(0 0 0 100% round 28px); scale: 1.1; } to { clip-path: inset(0 0 0 0 round 28px); scale: 1; } }
@keyframes m-strike { from { transform: scaleX(0); } }
@keyframes m-tick { from { opacity: .35; translate: 0 -7px; } }
@keyframes m-sheen { 0%, 62% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
@keyframes m-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes m-stripes { to { transform: translate3d(12.7px, 5.9px, 0); } }

/* ---------- 1) Entrada do topo (CSS puro: roda sozinho, sem depender do JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > :not(.hero-features),
  .hero-offer-head > *,
  .hero-offer-body > :not(.hero-chips),
  .hero-simple .container > * {
    animation: m-rise .9s var(--m-ease) backwards;
    animation-delay: calc(var(--m-n, 0) * 110ms + 80ms);
  }
  .hero-content > :nth-child(1), .hero-offer-head > :nth-child(1), .hero-simple .container > :nth-child(1) { --m-n: 0; }
  .hero-content > :nth-child(2), .hero-offer-head > :nth-child(2), .hero-simple .container > :nth-child(2) { --m-n: 1; }
  .hero-content > :nth-child(3), .hero-offer-head > :nth-child(3), .hero-simple .container > :nth-child(3) { --m-n: 2; }
  .hero-content > :nth-child(4), .hero-simple .container > :nth-child(4) { --m-n: 3; }
  .hero-content > :nth-child(5), .hero-simple .container > :nth-child(5) { --m-n: 4; }
  .hero-offer-body > :nth-child(1) { --m-n: 3; }
  .hero-offer-body > :nth-child(2) { --m-n: 4; }

  /* chips do topo entram um a um */
  .hero-chips li { animation: m-pop .7s var(--m-spring) backwards; animation-delay: calc(.8s + var(--m-n, 0) * 90ms); }
  .hero-chips li:nth-child(2) { --m-n: 1; }
  .hero-chips li:nth-child(3) { --m-n: 2; }
  .hero-chips li:nth-child(4) { --m-n: 3; }

  /* foto: revelada da direita para a esquerda, com leve zoom que assenta */
  .hero-offer-photo img { animation: m-photo 1.1s var(--m-ease) .3s backwards; }
  .hero-offer-photo figcaption { animation: m-rise .9s var(--m-ease) 1s backwards; }
  .hero-visual .hero-mockup { animation: m-photo 1.1s var(--m-ease) .3s backwards; }
  .floating-card { animation: float 4s ease-in-out infinite alternate, m-pop .8s var(--m-spring) 1.1s backwards; }

  /* faixa da oferta sobe logo depois do topo */
  .offer-strip { animation: m-rise .95s var(--m-ease) .95s backwards; }

  /* preço: o R$ 999 é riscado na tela e o R$ 499 "pula" para dentro */
  .price-was { position: relative; display: inline-block; text-decoration: none; }
  .price-was::after {
    content: ''; position: absolute; left: -3%; right: -3%; top: 54%; height: .09em;
    background: #ff6b6b; border-radius: 2px; transform-origin: left center;
    animation: m-strike .7s var(--m-ease) 1.15s backwards;
  }
  .price-now { display: inline-block; animation: m-pop .8s var(--m-spring) 1.55s backwards; }

  /* números do contador "viram" a cada segundo */
  .m-tick { display: block; animation: m-tick .4s var(--m-ease); }
}

/* ---------- 2) Fundo do topo: linhas diagonais que deslizam devagar ---------- */
.hero::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  top: -12%; right: -8%; width: 56%; height: 124%;
  background: repeating-linear-gradient(115deg, rgba(4, 173, 191, .26) 0 2px, transparent 2px 16px);
  -webkit-mask-image: radial-gradient(closest-side at 62% 42%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: radial-gradient(closest-side at 62% 42%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  opacity: .55;
  animation: m-stripes 2.6s linear infinite;
}
.hero-simple::after { width: 46%; opacity: .4; }
.hero.m-paused::after, .hero.m-paused .blob-decor { animation-play-state: paused; }
@media (max-width: 900px) { .hero::after { width: 90%; right: -30%; opacity: .32; } }

/* ---------- 3) Entrada ao rolar (só quando o JavaScript marca o html com .m-on) ---------- */
.m-on .m-reveal { opacity: 0; translate: 0 28px; transition: opacity .9s var(--m-ease), translate .9s var(--m-ease); transition-delay: var(--m-d, 0ms); }
.m-on .m-reveal.m-in { opacity: 1; translate: 0 0; }

/* títulos: palavra por palavra */
.m-on .m-words .m-w { display: inline-block; opacity: 0; translate: 0 .6em; transition: opacity .8s var(--m-ease), translate .8s var(--m-ease); transition-delay: calc(var(--w, 0) * 55ms); }
.m-on .m-words.m-in .m-w { opacity: 1; translate: 0 0; }

/* foto da seção "Quem lidera": cortina que abre de cima para baixo */
.m-on .m-wipe { clip-path: inset(0 0 100% 0 round 16px); scale: 1.08; transition: clip-path 1.2s var(--m-ease), scale 1.5s var(--m-ease); }
.m-on .m-wipe.m-in { clip-path: inset(0 0 0 0 round 16px); scale: 1; }

/* animação de entrada dos cards já existente (animations.js) com a mesma curva suave */
.js .will-reveal { transition: opacity .9s var(--m-ease), transform .9s var(--m-ease); }

/* ---------- 4) Faixa de itens que corre sozinha (infinita) ---------- */
.trust-strip.m-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.trust-strip.m-marquee > .container { max-width: none; padding: 0; }
.m-marquee .trust-list { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; will-change: transform; }
.m-marquee .trust-list li { flex: none; margin-right: 56px; white-space: nowrap; }
.m-marquee .trust-list.m-run { animation: m-marquee var(--m-dur, 40s) linear infinite; }
.m-marquee:hover .trust-list.m-run, .m-marquee:focus-within .trust-list.m-run { animation-play-state: paused; }
.trust-strip.is-ticker { padding: 26px 0; }
.trust-strip.is-ticker .trust-list { font-family: 'Syne', 'DM Sans', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; color: var(--color-white); }
.trust-strip.is-ticker .trust-list li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--color-teal); box-shadow: 0 0 0 5px rgba(4, 173, 191, .16); }

/* ---------- 5) Barra de progresso de leitura (topo da tela) ---------- */
.m-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--color-teal), var(--color-mint), var(--color-green)); }

/* ---------- 6) Linha do tempo (Como funciona): a linha se desenha conforme você rola ---------- */
.m-on .timeline::before { transform-origin: top center; transform: scaleY(var(--tl, 0)); will-change: transform; }
.m-on .timeline-step { scale: .55; transition: scale .7s var(--m-spring), box-shadow .7s ease; }
.m-on .timeline-item.m-lit .timeline-step { scale: 1; box-shadow: 0 0 0 9px rgba(4, 173, 191, .2); }

/* ---------- 7) Brilho que segue o mouse nos cards ---------- */
.m-spot { position: relative; }
.m-spot::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(4, 173, 191, .16), transparent 65%);
}
.m-spot:hover::after, .m-spot:focus-within::after { opacity: 1; }

/* ---------- 8) Botões: preenchimento animado no hover + seta que avança ---------- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-102%);
  background: linear-gradient(100deg, var(--color-mint), var(--color-green)); transition: transform .5s var(--m-ease);
}
.btn-primary:hover::before, .btn-primary:focus-visible::before { transform: translateX(0); }
.btn-primary:hover, .btn-primary:focus-visible { background-color: var(--color-teal); color: var(--color-dark-1); }
.btn .tf-arrow { display: inline-block; transition: transform .35s var(--m-ease); }
.btn:hover .tf-arrow { transform: translateX(6px); }

/* reflexo que passa de tempos em tempos no botão principal do topo (chama atenção sem poluir) */
@media (prefers-reduced-motion: no-preference) {
  .hero .btn-primary.btn-large::after, .offer-btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
    transform: translateX(-130%) skewX(-20deg); animation: m-sheen 4.8s ease-in-out 2.6s infinite;
  }
  .hero.m-paused .btn-primary::after { animation-play-state: paused; }
}

/* ---------- 9) Imagens: zoom lento no hover ---------- */
.portfolio-image-wrapper { isolation: isolate; }
.about-photo img { transition: transform .8s var(--m-ease), box-shadow .8s ease; }
.about-photo img:hover { transform: scale(1.03); box-shadow: 0 24px 64px rgba(4, 173, 191, .22); }