/* ==========================================================================
   SIDEPASS — MOTION DESIGN
   Camada de movimento da landing page. Carregada depois de styles.css.
   Tudo aqui respeita prefers-reduced-motion (veja o fim do arquivo).
   ========================================================================== */
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes heroUp { from { opacity: 0; translate: 0 26px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes stageIn { from { opacity: 0; translate: 0 90px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes popIn { from { opacity: 0; scale: .6; translate: 0 12px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes pop { 0% { opacity: 0; scale: .3; } 60% { opacity: 1; scale: 1.18; } 100% { opacity: 1; scale: 1; } }
@keyframes riseIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes slideIn { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes slideInR { from { opacity: 0; translate: 36px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { 0% { transform: translate3d(-6%, -4%, 0) scale(1); } 100% { transform: translate3d(8%, 6%, 0) scale(1.15); } }
@keyframes ringPulse { 0% { box-shadow: 0 12px 24px rgba(59, 130, 246, .5), 0 0 0 0 rgba(59, 130, 246, .5); } 70%, 100% { box-shadow: 0 12px 24px rgba(59, 130, 246, .5), 0 0 0 20px rgba(59, 130, 246, 0); } }
@keyframes ringOut { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes ringOutShadow { 0% { box-shadow: 0 10px 30px -6px rgba(59, 130, 246, .7), 0 0 0 0 rgba(59, 130, 246, .5); } 80%, 100% { box-shadow: 0 10px 30px -6px rgba(59, 130, 246, .7), 0 0 0 16px rgba(59, 130, 246, 0); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }
@keyframes sheen { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes scanY { 0%, 100% { top: 56%; opacity: 0; } 12% { opacity: 1; } 50% { top: 94%; opacity: 1; } 62% { opacity: 0; } }
@keyframes scanDown { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } }
@keyframes badgeFloat { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-10px); } }
@keyframes badgeSheen { 0%, 40% { transform: translateX(-130%) skewX(-18deg); } 80%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.84); } }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes typingShow { 0% { opacity: 0; scale: .8; } 12%, 78% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .8; } }
@keyframes msgIn { from { opacity: 0; scale: .7; translate: -10px 12px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes waLoop { 0%, 12% { opacity: 0; scale: .8; translate: 0 10px; } 18%, 88% { opacity: 1; scale: 1; translate: 0 0; } 96%, 100% { opacity: 0; scale: .96; } }
@keyframes waType { 0%, 2% { opacity: 0; } 5%, 13% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes rowIn { from { opacity: 0; translate: 0 -22px; background: rgba(59, 130, 246, .14); } to { opacity: 1; translate: 0 0; background: transparent; } }
@keyframes fillTo { from { width: 5%; } to { width: var(--to, 20%); } }
@keyframes caretPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, .15); } 50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, .08); } }
@keyframes tabSlide { from { transform: translateX(200%); } }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.6); } }
@keyframes tapPress { 0%, 100% { scale: 1; } 40% { scale: .92; } }
@keyframes toastSwap { 0% { opacity: 0; translate: 0 16px; scale: .92; } 100% { opacity: 1; translate: 0 0; scale: 1; } }

/* Barra de progresso da página */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, #3B82F6, #8fb5ff, #fff); box-shadow: 0 0 14px rgba(110, 168, 255, .9); pointer-events: none; }

/* Títulos: palavra por palavra */
.js h1:not(.is-split) { opacity: 0; }
.ready-fallback h1:not(.is-split) { opacity: 1 !important; }
.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .16em; margin: 0 -.03em -.16em; }
.is-split .wi { display: inline-block; transform: translateY(118%) rotate(5deg); transform-origin: 0 100%; transition: transform 1.05s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); will-change: transform; }
.is-split.in .wi { transform: none; }
.is-split .shine { opacity: 0; filter: blur(10px); transition: opacity 1.1s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--si, 0) * 55ms); }
.is-split.in .shine { opacity: 1; filter: none; }

/* Entrada do hero */
.js .hero .eyebrow { animation: heroUp 1s var(--ease) .05s both; }
.js .hero__lead { animation: heroUp 1.1s var(--ease) .55s both; }
.js .hero__ctas { animation: heroUp 1.1s var(--ease) .72s both; }
.js .hero__proof { animation: heroUp 1.1s var(--ease) .9s both; }
.js .hero__stage { opacity: 0; }
.js .hero__stage.is-live { animation: stageIn 1.5s var(--ease) .15s both; }

/* Brilho do hero: manchas que flutuam e foco que segue o cursor */
.hero__glow::before, .hero__glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.hero__glow::before { width: 520px; height: 520px; left: -8%; top: 10%; background: radial-gradient(closest-side, rgba(99, 102, 241, .35), transparent); animation: drift 16s ease-in-out infinite alternate; }
.hero__glow::after { width: 620px; height: 620px; right: -10%; top: 28%; background: radial-gradient(closest-side, rgba(14, 165, 233, .28), transparent); animation: drift 20s ease-in-out -6s infinite alternate-reverse; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(520px circle at var(--cx, 50%) var(--cy, 30%), rgba(143, 181, 255, .15), transparent 60%); opacity: var(--co, 0); transition: opacity .5s; }
.hero__copy, .hero__stage { z-index: 2; }

/* Parallax em camadas (usa a propriedade translate para não brigar com transform) */
.hero__stage { --mx: 0; --my: 0; --sy: 0; }
.win { translate: calc(var(--mx) * -10px) calc(var(--my) * -8px + var(--sy) * -26px); }
.phone--hero { translate: calc(var(--mx) * 18px) calc(var(--my) * 12px + var(--sy) * -60px); }
.float--a { translate: calc(var(--mx) * 28px) calc(var(--my) * 20px + var(--sy) * -100px); }
.float--b { translate: calc(var(--mx) * -24px) calc(var(--my) * 16px + var(--sy) * -44px); }

/* Interior do painel e do celular do hero ganham vida ao entrar */
.is-live .w-side .w-item { animation: slideIn .7s var(--ease) both; animation-delay: calc(1s + var(--n, 0) * 70ms); }
.is-live .w-head, .is-live .w-logo { animation: riseIn .8s var(--ease) .9s both; }
.is-live .w-card { animation: popIn .9s var(--ease) both; animation-delay: calc(1.2s + var(--n, 0) * 120ms); }
.is-live .w-bar i { transform-origin: 0 50%; animation: grow 2s var(--ease) 1.6s both; }
.is-live .w-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s cubic-bezier(.4, 0, .2, 1) 1.7s forwards; }
.is-live .w-area { animation: fadeIn 1.6s ease 2.8s both; }
.is-live .phone--hero .m-title, .is-live .phone--hero .m-search, .is-live .phone--hero .m-btns, .is-live .phone--hero .m-seg { animation: riseIn .8s var(--ease) both; animation-delay: calc(1.3s + var(--n, 0) * 90ms); }
.is-live .phone--hero .m-guest { animation: riseIn .9s var(--ease) both; animation-delay: calc(1.8s + var(--n, 0) * 160ms); }
.is-live .phone--hero .m-tabbar { animation: popIn 1s var(--ease) 2.2s both; }
.is-live .float--a { animation: popIn .9s var(--ease) 2.4s both, bob 7s ease-in-out 3.3s infinite; }
.is-live .float--b { animation: popIn .9s var(--ease) 2.7s both, bob 7s ease-in-out 3.6s infinite; }
.m-plus::before { animation: ringPulse 2.6s ease-out infinite; }
.is-press { animation: tapPress .5s var(--ease); }
#sim-btn { transition: background-color .4s, color .4s, border-color .4s; }
#sim-btn.is-done { background: #fff; color: var(--ink); border-color: rgba(0, 0, 0, .12); }
#sim-pill { transition: background-color .4s, color .4s; }
#sim-pill.is-done { background: #ecfdf5; color: #047857; }
.float.is-swap { animation: toastSwap .7s var(--ease) both, bob 7s ease-in-out infinite; }

/* Faixa */
.strip li.in .ico { animation: pop .8s cubic-bezier(.34, 1.7, .5, 1) .2s both; }
.strip li .ico { transition: transform .4s var(--ease), color .3s; }
.strip li:hover .ico { transform: translateY(-3px) scale(1.12); color: #fff; }

/* Inclinação 3D dos cartões */
.tilt3d { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transform-style: preserve-3d; }

/* Problemas */
.pain.in .pain__ok .ico { animation: pop .7s cubic-bezier(.34, 1.8, .5, 1) .55s both; }
.pain h3 { transition: color .3s; }
.pain:hover h3 { color: var(--blue-d); }

/* Como funciona: linha de progresso, brilho que muda de cor e telas animadas */
.story__steps { position: relative; }
.story__steps::before, .story__steps::after { content: ""; position: absolute; left: -34px; top: 18vh; bottom: 18vh; width: 2px; border-radius: 2px; }
.story__steps::before { background: rgba(255, 255, 255, .1); }
.story__steps::after { background: linear-gradient(to bottom, #8fb5ff, #3B82F6); box-shadow: 0 0 14px rgba(59, 130, 246, .9); transform-origin: 50% 0; transform: scaleY(var(--lp, 0)); }
.story__glow { transition: filter 1s var(--ease); filter: blur(30px) hue-rotate(var(--hue, 0deg)); animation: drift 14s ease-in-out infinite alternate; }
.sstep.is-on .sstep__n { animation: ringOutShadow 1.8s ease-out infinite; }
.scr.is-on[data-scr="0"] .f-prog i { --to: 20%; animation: fillTo 1.4s var(--ease) both; }
.scr.is-on[data-scr="0"] .f-input { animation: caretPulse 1.8s ease-in-out infinite; }
.scr.is-on[data-scr="1"] .f-prog i { --to: 66%; animation: fillTo 1.6s var(--ease) both; }
.scr.is-on[data-scr="1"] .f-file { animation: riseIn .7s var(--ease) .1s both; }
.scr.is-on[data-scr="1"] .f-map > div { animation: slideIn .6s var(--ease) both; animation-delay: calc(.35s + var(--n, 0) * .22s); }
.scr.is-on[data-scr="1"] .f-map svg.ok { animation: pop .6s cubic-bezier(.34, 1.8, .5, 1) both; animation-delay: calc(.7s + var(--n, 0) * .22s); }
.f-cta { position: relative; overflow: hidden; }
.scr.is-on .f-cta::after, .phone--fan .f-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-130%); animation: sheen 3s ease-in-out 1s infinite; }
.wa-body { position: relative; }
.wa-typing { position: absolute; left: 14px; top: 18px; display: flex; gap: 5px; padding: 14px 16px; background: #fff; border-radius: 0 14px 14px 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); opacity: 0; }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: dot 1.1s ease-in-out infinite; }
.wa-typing i:nth-child(2) { animation-delay: .15s; }
.wa-typing i:nth-child(3) { animation-delay: .3s; }
.scr.is-on .wa-typing { animation: typingShow 1s var(--ease) both; }
.wa-msg--a, .wa-msg--b { opacity: 0; }
.scr.is-on .wa-msg--a { animation: msgIn .6s cubic-bezier(.34, 1.5, .5, 1) 1s both; transform-origin: 0 0; }
.scr.is-on .wa-msg--b { animation: msgIn .6s cubic-bezier(.34, 1.5, .5, 1) 1.9s both; transform-origin: 0 0; }
.wa-qr { position: relative; overflow: hidden; }
.scr.is-on .wa-qr::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; top: 0; background: linear-gradient(90deg, transparent, #3B82F6, transparent); box-shadow: 0 0 14px #3B82F6; animation: scanDown 2s ease-in-out 1.6s infinite; }
.scr.is-on[data-scr="3"] .m-hero { animation: riseIn .8s var(--ease) .1s both; }
.scr.is-on[data-scr="3"] .m-bar i { transform-origin: 0 50%; animation: grow 1.8s var(--ease) .4s both; }
.scr.is-on[data-scr="3"] .m-group div { animation: slideIn .6s var(--ease) both; animation-delay: calc(.6s + var(--n, 0) * .15s); }
.scr.is-on[data-scr="3"] .m-ind { animation: tabSlide .9s var(--ease) .5s both; }

/* Recursos (bento) */
.bcard.in .g-row { animation: slideInR .9s var(--ease) both; animation-delay: calc(.25s + var(--n, 0) * .14s); }
.gbtn, .gpill { transition: background-color .35s, color .35s; }
.gpill.is-pop { animation: pop .6s cubic-bezier(.34, 1.8, .5, 1) both; }
.badge { animation: badgeFloat 6.5s ease-in-out infinite; }
.badge::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); animation: badgeSheen 5s ease-in-out infinite; pointer-events: none; }
.badge__scan { position: absolute; left: 0; right: 0; height: 2px; top: 56%; background: linear-gradient(90deg, transparent, #3B82F6, transparent); box-shadow: 0 0 12px #3B82F6; animation: scanY 2.8s ease-in-out infinite; }
.wa-mock { position: relative; min-height: 112px; }
.wa-typing--out { left: 14px; top: 20px; animation: waType 7s ease-in-out infinite; }
.wa-bubble { animation: waLoop 7s var(--ease) infinite; transform-origin: 100% 100%; }
.in .bars i { animation: breathe 3.8s ease-in-out infinite; animation-delay: calc(1.4s + var(--n, 0) * .2s); }
.bars i { transition: transform 1.1s var(--ease), filter .6s, box-shadow .6s; }
.bars i.hl { filter: brightness(1.7) saturate(1.1); box-shadow: 0 0 30px rgba(110, 168, 255, .75); }
.bicon { position: relative; }
.bicon--ring::before { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 2px solid rgba(59, 130, 246, .5); animation: ringOut 2.6s ease-out infinite; }
.bcard:hover .bicon .ico { animation: pop .6s cubic-bezier(.34, 1.8, .5, 1); }

/* App no celular */
.js .fan:not(.in) .okc, .js .fan:not(.in) .okt { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fan.in .okc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s cubic-bezier(.4, 0, .2, 1) .8s forwards; }
.fan.in .okt { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s cubic-bezier(.4, 0, .2, 1) 1.7s forwards; }
.js .fan:not(.in) .ok-body h3, .js .fan:not(.in) .ok-body p { opacity: 0; }
.fan.in .ok-body h3 { animation: riseIn .7s var(--ease) 2s both; }
.fan.in .ok-body p { animation: riseIn .7s var(--ease) 2.15s both; }
.ticks li.in .ico { animation: pop .7s cubic-bezier(.34, 1.8, .5, 1) .3s both; }

/* Expositores */
.exh-glow { animation: drift 18s ease-in-out infinite alternate; }
.eitem.in .eico { animation: pop .8s cubic-bezier(.34, 1.7, .5, 1) .3s both; }
.eitem:hover .eico { transform: rotate(-6deg) scale(1.08); }
.eico { transition: transform .4s var(--ease); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-left: 8px; vertical-align: middle; animation: ping 1.6s ease-out infinite; }
.stand__feed { overflow: hidden; }
.stand__row--new { animation: rowIn .9s var(--ease) both; }
.stand__kpis strong.bump { animation: pop .5s cubic-bezier(.34, 1.8, .5, 1); }

/* Parcerias */
.partner__panel.is-active .partner__intro > * { animation: riseIn .7s var(--ease) both; }
.partner__panel.is-active .partner__intro > :nth-child(2) { animation-delay: .1s; }
.partner__panel.is-active .partner__intro > :nth-child(3) { animation-delay: .2s; }
.partner__panel.is-active .path li { animation: riseIn .7s var(--ease) both; animation-delay: calc(.2s + var(--n, 0) * .12s); }
.partner__panel.is-active .path li::before { animation: pop .7s cubic-bezier(.34, 1.8, .5, 1) both; animation-delay: calc(.3s + var(--n, 0) * .12s); }
.partner__panel.is-active .path li::after { transform-origin: 50% 0; animation: growY .8s var(--ease) both; animation-delay: calc(.5s + var(--n, 0) * .12s); }
.why > div.in .ico { animation: pop .7s cubic-bezier(.34, 1.8, .5, 1) .3s both; }

/* Segurança */
.security__grid li.in .ico { animation: pop .8s cubic-bezier(.34, 1.8, .5, 1) .3s both; }
.security__grid li:hover .ico { transform: rotate(-8deg) scale(1.12); }
.security__grid .ico { transition: transform .4s var(--ease); }

/* Contato */
.formcard { position: relative; }
.formcard.in form > *, .formcard.in .seg, .formcard.in h3, .formcard.in .formcard__sub { animation: riseIn .7s var(--ease) both; animation-delay: calc(.2s + var(--n, 0) * .07s); }
.pill--blue.pill--lg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .4) 50%, transparent 65%); transform: translateX(-130%); animation: sheen 4.5s ease-in-out 1.5s infinite; pointer-events: none; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: scale(0); animation: ripple .65s ease-out forwards; pointer-events: none; z-index: 0; }
.confetti { position: absolute; left: 50%; top: 45%; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; animation: confetti 1.3s cubic-bezier(.2, .7, .3, 1) forwards; z-index: 5; }
.form-ok .ico { animation: pop .8s cubic-bezier(.34, 1.8, .5, 1) both; }

/* FAQ: a altura anima via JavaScript */
.faq details p { overflow: hidden; animation: none; }
.faq summary { transition: color .2s, padding-left .35s var(--ease); }
.faq summary:hover { padding-left: 8px; }

@media (hover: none) {
  .tilt3d { transform: none; }
  .faq summary:hover { padding-left: 0; }
}

/* Modo calmo: tudo parado e visível */
.calm.js h1:not(.is-split), .calm.js .hero__stage { opacity: 1 !important; }
.calm .progress { display: none; }
.calm .fan { --fp: 1 !important; }
.calm .is-split .wi, .calm .is-split .shine { transform: none !important; opacity: 1 !important; filter: none !important; }
.calm.js .fan:not(.in) .ok-body h3, .calm.js .fan:not(.in) .ok-body p { opacity: 1; }
.calm .wa-msg--a, .calm .wa-msg--b, .calm .wa-bubble { opacity: 1 !important; }
.calm.js .fan:not(.in) .okc, .calm.js .fan:not(.in) .okt { stroke-dasharray: none; stroke-dashoffset: 0; }
.calm.js .reveal { translate: none !important; }
.calm-toggle { background: none; border: 1px solid rgba(255, 255, 255, .16); color: rgba(235, 240, 255, .75); border-radius: 99px; padding: 6px 14px; font-size: .84rem; }
.calm-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }