/* =====================================================================
   MOTION — animações (estados iniciais só com html.js; sem prefers-reduced-motion)
   ===================================================================== */
.marquee { margin-top: 110px; background: var(--lime); color: var(--lime-ink); overflow: hidden; white-space: nowrap; padding: 16px 0; }
.marquee .track { display: inline-flex; width: max-content; }
.marquee .grp { display: inline-flex; align-items: center; }
.marquee .grp span { font-weight: 800; font-size: clamp(26px, 3.4vw, 54px); letter-spacing: -.04em; line-height: 1; padding: 0 .5em; }
.marquee .grp i { width: clamp(12px, 1.5vw, 22px); height: clamp(12px, 1.5vw, 22px); border-radius: 50%; background: var(--ink); display: inline-block; }
.vision { margin-top: 0; }
.progress, .cursor, .intro { display: none; }

html.js .progress { display: block; position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; z-index: 120; pointer-events: none; }

/* intro */
html.js .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: var(--ink); color: #fff; transition: transform .9s cubic-bezier(.77,0,.18,1); }
html.js .intro.out { transform: translateY(-101%); }
.intro-word { font-weight: 800; font-size: clamp(56px, 14vw, 220px); letter-spacing: -.055em; line-height: .8; text-transform: uppercase; display: flex; overflow: hidden; padding-bottom: .06em; }
.intro-word span { display: inline-block; transform: translateY(105%); animation: introUp .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 55ms); }
.intro-word span.dot { color: var(--lime); }
.intro-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; height: 2px; background: #4a4949; overflow: hidden; }
.intro-bar i { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; animation: introBar 1.05s cubic-bezier(.6,0,.2,1) forwards; }
.intro-count { position: absolute; left: var(--gutter); bottom: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes introUp { to { transform: none; } }
@keyframes introBar { to { transform: scaleX(1); } }

/* header some ao rolar para baixo */
.site-header { transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s; }
.site-header.hide { transform: translateY(-110%); }

/* página: entrada e saída */
html.js body { animation: pageIn .7s cubic-bezier(.2,.7,.2,1) both; }
html.js body.leaving { opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease; }
@keyframes pageIn { from { opacity: 0; } }

/* letras do wordmark */
.split .ch { white-space: pre; }
.split .chw { display: inline-block; white-space: nowrap; }
html.js .split .ch { display: inline-block; transform: translateY(70%) rotate(5deg); opacity: 0; transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .7s ease; transition-delay: calc(var(--i) * 55ms); will-change: transform; }
html.js .split.in .ch { transform: none; opacity: 1; }
html.js .split.in .ch:hover { transform: translateY(-.04em); transition-delay: 0s; transition-duration: .25s; }
html.js .wordmark .under, html.js .page-hero .under { opacity: 0; transform: translateY(10px); transition: opacity .8s .7s, transform .8s .7s; }
html.js.ready .wordmark .under, html.js.ready .page-hero .under { opacity: 1; transform: none; }

/* palavras (títulos de seção) */
.wd { white-space: pre; }
html.js .words .wd { display: inline-block; opacity: 0; transform: translateY(60%); transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .7s; transition-delay: calc(var(--i) * 70ms); }
html.js .words.in .wd { opacity: 1; transform: none; }

/* hero: tiles revelados com wipe */
html.js .tile { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s cubic-bezier(.77,0,.18,1); }
html.js.ready .tile { clip-path: inset(0 0 0 0); }
html.js.ready .tile:nth-child(2) { transition-delay: .12s; }
html.js.ready .tile:nth-child(3) { transition-delay: .24s; }
html.js.ready .tile:nth-child(4) { transition-delay: .36s; }
html.js .tile .label { opacity: 0; transform: translateX(-12px); transition: opacity .6s 1s, transform .6s 1s; }
html.js.ready .tile .label { opacity: 1; transform: none; }
.tile .mask { transform-origin: var(--ox, left) var(--oy, top); animation: drift 6s ease-in-out infinite alternate; }
.tile .mask[style*="right:0"] { --ox: right; }
.tile .mask[style*="bottom:0"] { --oy: bottom; }
.tile:nth-child(2) .mask { animation-duration: 7.5s; animation-delay: -2s; }
.tile:nth-child(3) .mask { animation-duration: 5.5s; animation-delay: -1s; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.22); } }

/* parallax do mouse / scroll */
.browser, .bars { translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 10px + var(--py, 0) * 1px); transition: translate .35s ease-out; }
.phone { translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * 8px + var(--py, 0) * 1px); transition: translate .35s ease-out; animation: floaty 4.5s ease-in-out infinite alternate; }
@keyframes floaty { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-8px); } }
.browser .hero-b { background: linear-gradient(100deg, var(--lime) 30%, #b6f08f 50%, var(--lime) 70%) 0 0 / 250% 100%; animation: shimmer 3.2s linear infinite; }
.browser .row { background: linear-gradient(100deg, var(--line) 30%, #fff 50%, var(--line) 70%) 0 0 / 250% 100%; animation: shimmer 2.6s linear infinite; }
@keyframes shimmer { to { background-position: -250% 0; } }
.bars i { animation: grow 1.4s cubic-bezier(.2,.7,.2,1) both, pulse 3s ease-in-out 1.6s infinite alternate; }
.bars i:nth-child(2n) { animation-name: grow, pulse2; }
@keyframes pulse { to { transform: scaleY(.82); } }
@keyframes pulse2 { to { transform: scaleY(1.08); } }
.phone i:first-child { animation: blink 2.4s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: .55; } }

/* marquee */
.marquee .mq-skew { transform: skewX(calc(var(--sk, 0) * 1deg)); transition: transform .2s ease-out; }
.marquee .track { animation: mq 32s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* visão: palavras acendem com o scroll */
html.js .vw { opacity: .16; transition: opacity .35s; }
html.js .vw.lit { opacity: 1; }

/* serviços */
.svc { position: relative; padding-top: 12px; border-top: 1px solid var(--line); }
.svc::before { content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.svc:hover::before { transform: scaleX(1); }
.svc .m a::after { content: " \2197"; display: inline-block; transition: transform .3s; }
.svc .m a:hover::after { transform: translate(3px, -3px); }
.svc h3 { transition: transform .4s cubic-bezier(.2,.8,.2,1), color .2s; }
.svc:hover h3 { transform: translateX(6px); }
.svc.filtered-in { animation: svcIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes svcIn { from { opacity: 0; transform: translateY(14px); } }
.reasons .r.in:hover { transform: translateY(-6px); transition-delay: 0ms; }

/* abas */
.panel:not([hidden]) { animation: panelIn .7s cubic-bezier(.2,.8,.2,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(26px); } }

/* linha do tempo desenha */
html.js .steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.6,0,.2,1); }
html.js .steps.in::before { transform: scaleX(1); }
html.js .step::before { transform: scale(0); transition: transform .5s cubic-bezier(.3,1.7,.5,1), background .2s; }
html.js .steps.in .step::before { transform: scale(1); }
html.js .steps.in .step:nth-child(1)::before { transition-delay: .2s, 0s; }
html.js .steps.in .step:nth-child(2)::before { transition-delay: .65s, 0s; }
html.js .steps.in .step:nth-child(3)::before { transition-delay: 1.1s, 0s; }
html.js .steps.in .step:nth-child(4)::before { transition-delay: 1.55s, 0s; }

/* CTA: marca-texto desliza */
.cta h2 em { background: linear-gradient(var(--lime), var(--lime)) 0 0 / 100% 100% no-repeat; }
html.js .cta h2 em { background-size: 0% 100%; transition: background-size 1s cubic-bezier(.6,0,.2,1) .5s; }
html.js .cta h2.in em { background-size: 100% 100%; }
html.js .cta h2 em .wd { transition-delay: calc(var(--i) * 70ms); }

/* botões magnéticos */
.btn { transition: transform .2s, background .2s, color .2s, translate .25s cubic-bezier(.2,.8,.2,1); }

/* cursor */
@media (hover: hover) and (pointer: fine) {
  html.js .cursor { display: block; position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid #fff; border-radius: 50%; z-index: 150; pointer-events: none; mix-blend-mode: difference; transition: width .3s, height .3s, margin .3s, background .3s, opacity .3s; opacity: 0; }
  html.js .cursor.on { opacity: 1; }
  html.js .cursor.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: #fff; }
}

/* reveal em cascata */
.rv { transition-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .tile .mask, .phone, .browser .hero-b, .browser .row, .marquee .track, .bars i { animation: none !important; }
}