/* ============================================================
   Just Ball beta · movimento, sino, instalar e entrada guiada (13/10/2026).
   Par do js/motion.js. Só transform e opacity animados.
   Lima é luz, verde é atmosfera, grão por cima.
   ============================================================ */
:root{--mo-e:cubic-bezier(.23,1,.32,1);--mo-drawer:cubic-bezier(.32,.72,0,1)}

/* ---------- reveal: a peça chega no momento em que entra na tela ---------- */
.mo .rv{opacity:0;transform:translateY(18px) scale(.985)}
.mo .ck.rv,.mo .scr__h.rv,.mo .sec.rv{transform:translateY(18px)}
.mo .rv.is-rv{opacity:1;transform:none;transition:opacity .6s var(--mo-e) var(--d,0ms),transform .6s var(--mo-e) var(--d,0ms)}
.mo .rv.rv-ja{transition:none}
.mo-off .rv{opacity:1 !important;transform:none !important}
/* o trilho da loja entra em cascata junto com a seção dele */
.mo .lj-sec.rv .lj-rail>*{opacity:0;transform:translateX(18px)}
.mo .lj-sec.is-rv .lj-rail>*{opacity:1;transform:none;transition:opacity .55s var(--mo-e),transform .6s var(--mo-e)}
.mo .lj-sec.is-rv .lj-rail>:nth-child(2){transition-delay:.06s}
.mo .lj-sec.is-rv .lj-rail>:nth-child(3){transition-delay:.12s}
.mo .lj-sec.is-rv .lj-rail>:nth-child(4){transition-delay:.18s}
.mo .lj-sec.is-rv .lj-rail>:nth-child(n+5){transition-delay:.24s}

/* ---------- troca de aba: entra com fade e subida curta ---------- */
.screen.is-in{animation:moScr .5s var(--mo-e) both}
@keyframes moScr{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- toque: tudo que clica responde ---------- */
a.btn:active,.lj-cta:active,.aj__row:active,.dl:active,.pp:active,.ic__btn:active{transform:scale(.97)}
.aj__row,.dl,.ic__btn{transition:transform .15s var(--e),border-color .25s,background .25s}

/* ---------- botão lima: passada de luz + halo que acende e assenta ---------- */
.btn--lime{position:relative;isolation:isolate}
.btn--lime::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgba(197,255,26,.55),0 0 30px 6px rgba(197,255,26,.42)}
.mo-sweep{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1}
.mo-sweep::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:42%;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.78) 50%,transparent);transform:translateX(-140%) skewX(-18deg)}
.btn--lime.is-lit::before{animation:moHalo 1.4s ease-out .12s backwards}
.btn--lime.is-lit .mo-sweep::after{animation:moSweep 1s var(--mo-e) .18s backwards}
@keyframes moHalo{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes moSweep{0%{opacity:1;transform:translateX(-140%) skewX(-18deg)}99%{opacity:1}100%{opacity:0;transform:translateX(270%) skewX(-18deg)}}

/* ---------- topo: vira vidro depois de 12 px ---------- */
.top{isolation:isolate;background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s var(--mo-e);
  background:rgba(12,14,11,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(197,255,26,.16);box-shadow:0 12px 28px rgba(0,0,0,.55),inset 0 -1px 0 rgba(197,255,26,.06)}
.top.is-glass::before{opacity:1}

/* ---------- sheets: sobe como mola, sai rápido ---------- */
.sheet__bg{background:rgba(0,0,0,.52);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .38s var(--mo-e)}
.sheet__p{transform:translateY(24px);opacity:0;transition:transform .42s var(--mo-drawer),opacity .3s var(--mo-e);
  box-shadow:0 -18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(197,255,26,.14)}
.sheet.is-open .sheet__p{transform:none;opacity:1}
.sheet.is-closing .sheet__bg{transition-duration:.2s}
.sheet.is-closing .sheet__p{transform:translateY(16px);opacity:0;transition:transform .2s var(--e-io),opacity .18s var(--e-io)}
.sheet__p.mo-in>:not(.ckf):not(.sheet__grab):not(.sheet__x),.sheet__p.mo-in>.ckf>*{animation:moUp .42s var(--mo-e) backwards}
.sheet__p.mo-in>:nth-child(2),.sheet__p.mo-in>.ckf>:nth-child(2){animation-delay:.04s}
.sheet__p.mo-in>:nth-child(3),.sheet__p.mo-in>.ckf>:nth-child(3){animation-delay:.08s}
.sheet__p.mo-in>:nth-child(4),.sheet__p.mo-in>.ckf>:nth-child(4){animation-delay:.12s}
.sheet__p.mo-in>:nth-child(5),.sheet__p.mo-in>.ckf>:nth-child(5){animation-delay:.16s}
.sheet__p.mo-in>:nth-child(6),.sheet__p.mo-in>.ckf>:nth-child(6){animation-delay:.2s}
.sheet__p.mo-in>:nth-child(n+7),.sheet__p.mo-in>.ckf>:nth-child(n+7){animation-delay:.24s}
@keyframes moUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- check-in: luz do topo em camada própria (a profundidade mexe nela) ---------- */
.ck{position:relative;isolation:isolate;background:var(--ink-3)}
.ck__fx{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.ck__fx::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.1;mix-blend-mode:overlay}
.ck__glow{position:absolute;left:-18%;top:-28%;width:96%;height:88%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(197,255,26,.2),rgba(3,199,63,.12) 52%,transparent)}

/* ---------- sino ---------- */
.sino{position:relative}
.sino__dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 2px var(--ink-3),0 0 10px rgba(197,255,26,.8);opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s var(--mo-e)}
.sino.has-new .sino__dot{opacity:1;transform:none}
.sino.has-new svg{stroke:var(--lime)}
@media (max-width:380px){.top__r{gap:6px}.icon-btn,.me-btn{width:38px;height:38px}.top__l{gap:8px}}

/* ---------- Novidades ---------- */
.dl__b br{display:none}
.dl__t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.dl__d{display:block;margin-top:3px}
.nov__k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:6px 0 -2px}
.dl--new{background:linear-gradient(150deg,rgba(197,255,26,.1),var(--ink-3) 60%)}
.dl--soon{border-style:dashed;border-color:rgba(255,255,255,.14);background:transparent}
.dl--soon .dl__n{color:var(--mute)}
.dl--soon .dl__t{color:#d6d6d6}
.dl__when{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);text-align:right}
.dl__when b{font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--paper)}

/* ---------- cartão App na tela e avisos ---------- */
.ic{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;border:1px solid rgba(197,255,26,.26);
  background:radial-gradient(90% 120% at 0% 0%,rgba(197,255,26,.1),transparent 60%),radial-gradient(70% 90% at 100% 100%,rgba(3,199,63,.14),transparent 70%),var(--ink-3)}
.ic::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:160px;opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.ic__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px}
.ic__row+.ic__row{border-top:1px solid var(--line-2)}
.ic__dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--mute-2)}
.ic__dot.is-on{background:var(--lime);border-color:var(--lime);box-shadow:0 0 10px rgba(197,255,26,.7)}
.ic__b{display:flex;flex-direction:column;gap:2px;min-width:0}
.ic__b b{font-size:14px;font-weight:800}
.ic__b small{font-size:12px;color:var(--mute);line-height:1.35}
.ic__btn{min-height:36px;padding:0 14px;border-radius:var(--rp);border:1.5px solid rgba(197,255,26,.6);color:var(--lime);font-size:12.5px;font-weight:800;white-space:nowrap}
.ic__ok{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
@media (hover:hover) and (pointer:fine){.ic__btn:hover{background:var(--lime-dim)}}
.ic__btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* passo a passo de instalar */
.inst{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-direction:column;gap:8px;color:#d9d9d9;font-size:14.5px;line-height:1.4}
.inst li{display:grid;grid-template-columns:24px 36px minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--ink-3);border:1px solid var(--line-2)}
.inst__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#0a0a0a;font-family:var(--mono);font-size:12px;font-weight:700}
.inst__ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--ink-2);border:1px solid var(--line)}
.inst__ic svg{width:20px;height:20px;fill:none;stroke:var(--paper);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inst__ic svg circle{fill:var(--paper);stroke:none}
.inst b{color:var(--paper)}
.inst__nota{font-size:12.5px;color:var(--mute);line-height:1.45}
.inst__nota b{color:#d9d9d9}

/* ajustes: estado ligado */
.aj__on{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}

/* ---------- entrada guiada ---------- */
.eg{position:relative}
.eg__glow{position:absolute;left:50%;top:-40px;width:320px;height:200px;margin-left:-160px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(3,199,63,.3),rgba(197,255,26,.08) 60%,transparent)}
.sheet__p{isolation:isolate}
.eg__h{font-size:clamp(34px,10vw,42px)}
.eg__prog{display:flex;align-items:center;gap:6px;margin:0 46px 4px 0}
.eg__prog i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1)}
.eg__prog i.on{background:linear-gradient(90deg,var(--green),var(--lime));box-shadow:0 0 10px rgba(197,255,26,.35)}
.eg__prog span{font-size:11px;color:var(--lime);margin-left:4px}
.eg__steps{list-style:none;display:flex;flex-direction:column;gap:8px;margin:2px 0 6px}
.eg__steps li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--ink-3);border:1px solid var(--line-2)}
.eg__steps li:first-child{border-color:rgba(197,255,26,.35);background:linear-gradient(150deg,rgba(197,255,26,.1),var(--ink-3) 60%)}
.eg__steps span{display:flex;flex-direction:column;gap:2px;min-width:0}
.eg__steps b{font-size:15px;font-weight:800}
.eg__steps small{font-size:12.5px;color:var(--mute);line-height:1.35}
.eg__n{width:40px;height:40px;border-radius:50%;display:grid !important;place-items:center;font-family:var(--disp);font-weight:900;font-size:24px;line-height:1;color:var(--lime);border:1.5px solid rgba(197,255,26,.5);background:rgba(197,255,26,.06)}
.eg__face{align-self:center;width:96px;height:96px}
.eg .ask__no{align-self:center}
.eg__fim{white-space:normal;min-height:48px;line-height:1.2;padding:8px 18px}

/* ---------- reduzir movimento: só opacidade curta ---------- */
@media (prefers-reduced-motion:reduce){
  .mo .rv{transform:none !important}
  .mo .rv.is-rv{transition:opacity .25s linear}
  .mo .lj-sec.rv .lj-rail>*{transform:none}
  .btn--lime.is-lit::before,.btn--lime.is-lit .mo-sweep::after{animation:none}
  .mo-sweep{display:none}
  .screen.is-in{animation:moFade .2s linear both}
  .sheet__p,.sheet.is-closing .sheet__p{transform:none;transition:opacity .2s linear}
  .sheet__p.mo-in>*,.sheet__p.mo-in>.ckf>*{animation:moFade .2s linear backwards;animation-delay:0s !important}
  [data-depth]{translate:none !important}
}
@keyframes moFade{from{opacity:0}to{opacity:1}}