/* =====================================================================
   KORPUS — landing animations (companion to index.html)
   Identidade: preto / vermelho / prata. Tudo desligado com
   prefers-reduced-motion; animações disparam via IntersectionObserver
   (pausam fora da tela) e não causam layout shift.
   ===================================================================== */

/* ---------- 1 · Headline: palavras entram escalonadas ---------- */
.wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.w{display:inline-block;animation:wordUp .72s cubic-bezier(.19,.8,.22,1) both;animation-delay:var(--d,0ms);will-change:transform}
@keyframes wordUp{from{transform:translateY(115%) rotate(2.5deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
h1.js-words .metal{background:none}
.w.metalw{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 2 · Toast de prova social ("venda") ---------- */
.kp-toast{position:fixed;left:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:12px;
  background:rgba(16,16,21,.96);border:1px solid rgba(224,38,60,.55);border-radius:16px;
  padding:13px 16px 13px 13px;max-width:min(330px,calc(100vw - 40px));
  box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 26px rgba(224,38,60,.22);backdrop-filter:blur(8px);
  transform:translateY(24px);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.25,1),opacity .5s}
.kp-toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.kp-toast[hidden]{display:none}
.kp-toast img{width:42px;height:42px;border-radius:11px;object-fit:cover;border:1px solid rgba(255,77,97,.4)}
.kp-toast-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.kp-toast-txt b{font-size:14.5px;color:#fff}
.kp-toast-txt span{font-size:12.5px;color:var(--muted)}
.kp-toast-x{background:none;border:none;color:var(--muted);font-size:21px;line-height:1;cursor:pointer;padding:2px 4px;margin-left:2px}
.kp-toast-x:hover{color:#fff}
@media(max-width:600px){.kp-toast{left:12px;bottom:78px}}

/* ---------- 3 · Depoimento com efeito "decodificar" ---------- */
.testi{margin-top:8px;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:24px;padding:clamp(26px,4.5vw,44px);position:relative;overflow:hidden}
.testi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),transparent)}
.testi-stars{color:var(--red2);font-size:21px;letter-spacing:5px;margin-bottom:16px;text-shadow:0 0 18px rgba(255,77,97,.4)}
.testi-quote{font-size:clamp(19px,2.6vw,25px);line-height:1.55;font-weight:600;color:#eef0f3;min-height:3.1em}
.testi-quote .dud{color:rgba(255,77,97,.55)}
.testi-who{margin-top:20px;color:var(--muted);font-size:14.5px}
.testi-who b{color:#fff}

/* ---------- 4 · Contadores (números sobem ao entrar na tela) ---------- */
.stat b{font-variant-numeric:tabular-nums}

/* ---------- 5 · Cursor falso ---------- */
#fakeCursor{position:fixed;left:0;top:0;width:24px;height:24px;z-index:120;pointer-events:none;
  opacity:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));will-change:transform,opacity}
#fakeCursor svg{display:block;width:100%;height:100%}
.btn.cursor-pulse{animation:cpulse .38s ease}
@keyframes cpulse{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---------- 6 · Antes × Depois (slider arrastável) ---------- */
.ba{position:relative;max-width:880px;margin:0 auto;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);background:#0b0b0f;aspect-ratio:16/10;min-height:400px;touch-action:none}
.ba-layer{position:absolute;inset:0}
.ba-after{background:radial-gradient(760px 420px at 70% -10%,rgba(224,38,60,.18),transparent 60%),linear-gradient(180deg,#0c0c11,#070709)}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);background:#101014;z-index:2}
.ba-shot{position:absolute;right:5%;top:13%;height:80%;border-radius:20px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 50px rgba(224,38,60,.2);object-fit:cover}
.ba-appbar{position:absolute;left:5%;top:8%;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#fff;z-index:2}
.ba-appbar img{width:36px;height:36px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,77,97,.4)}
.ba-chip{position:absolute;z-index:2;background:rgba(18,18,24,.94);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:8px 13px;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.ba-chip.c1{left:5%;bottom:20%}
.ba-chip.c2{left:5%;bottom:9%}
.ba-paper{position:absolute;inset:7% 26% 7% 6%;background:linear-gradient(180deg,#efe9dc,#e3dccb);color:#33322c;
  border-radius:6px;transform:rotate(-1.6deg);box-shadow:0 24px 50px rgba(0,0,0,.55);padding:22px 24px;
  background-image:repeating-linear-gradient(180deg,transparent 0 30px,rgba(70,90,160,.16) 30px 31px),linear-gradient(180deg,#efe9dc,#e6dfcd)}
.ba-paper-t{font-weight:800;letter-spacing:1px;font-size:16px;border-bottom:2px solid rgba(190,40,55,.55);padding-bottom:8px;margin-bottom:10px;color:#4a3f33}
.ba-paper ul{list-style:none}
.ba-paper li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14.5px;border-bottom:1px dashed rgba(60,50,40,.18)}
.ba-paper li i{font-style:normal;color:#a33;font-weight:700;white-space:nowrap}
.ba-paper li i.x{color:#c22430;text-decoration:line-through}
.ba-paper-f{margin-top:14px;font-size:13.5px;color:#8a7a63;font-style:italic}
.ba-tag{position:absolute;top:14px;z-index:3;font-size:11.5px;font-weight:800;letter-spacing:1.6px;
  padding:6px 12px;border-radius:999px;background:rgba(10,10,13,.82);border:1px solid rgba(255,255,255,.22);color:#fff}
.ba-before .ba-tag{left:14px}
.ba-after .ba-tag{right:14px;border-color:rgba(224,38,60,.6);color:#ffb3bc}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;z-index:4;
  background:linear-gradient(180deg,var(--red2),var(--red));box-shadow:0 0 18px rgba(224,38,60,.65);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--red2),var(--red));color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 22px rgba(224,38,60,.5);border:2px solid rgba(255,255,255,.85)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba-hint{text-align:center;color:var(--muted);font-size:13.5px;margin-top:14px}
@media(max-width:700px){
  .ba{aspect-ratio:auto;height:480px}
  .ba-paper{inset:6% 8% auto 5%;padding:16px 18px}
  .ba-paper li{font-size:13px}
  .ba-shot{height:62%;top:auto;bottom:4%;right:50%;transform:translateX(50%)}
  .ba-appbar{top:5%}
  .ba-chip.c1{bottom:70%}
  .ba-chip.c2{display:none}
}

/* ---------- 7 · Preço com odômetro (total × por mês) ---------- */
.ptoggle{display:inline-flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:999px;padding:4px;margin:0 auto 30px}
#preco .wrap{text-align:center}
#preco .plans{text-align:left}
.pt-btn{background:none;border:none;color:var(--muted);font:inherit;font-size:14.5px;font-weight:700;
  padding:9px 22px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.pt-btn.on{background:linear-gradient(135deg,var(--red2),var(--red));color:#fff;box-shadow:0 6px 18px rgba(224,38,60,.4)}
.odo{display:inline-flex;align-items:flex-start;font-variant-numeric:tabular-nums}
.odo-static{display:inline-block;line-height:1}
.odo-col{display:inline-block;width:.6em;height:1em;overflow:hidden;line-height:1}
.odo-strip{display:flex;flex-direction:column;transition:transform .85s cubic-bezier(.16,.84,.3,1);will-change:transform}
.odo-strip span{display:block;height:1em;line-height:1;text-align:center}
.plan .pnow .odo-col{width:.6em}
.pnow small{margin-left:2px}

/* ---------- 8 · Confete do CTA final (canvas gerado via JS) ---------- */
#kpConfetti{position:fixed;inset:0;z-index:200;pointer-events:none}

/* ---------- Movimento reduzido: tudo desligado ---------- */
@media (prefers-reduced-motion: reduce){
  .w{animation:none!important}
  .odo-strip{transition:none!important}
  .kp-toast{transition:none!important}
  .btn.cursor-pulse{animation:none!important}
  .ba-handle{box-shadow:none}
}