/* Camada de movimento da landing /pt. Só vale com html.mo (motion.js carregou o
   GSAP e o visitante não pediu "reduzir movimento"). Sem ela, a página é a de sempre. */

/* ---------- barra de leitura ---------- */
.mo-progresso{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:linear-gradient(90deg,var(--amber1),var(--yellow));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- hero: parede de vídeos rolando atrás do título ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-parede{position:absolute;inset:-10% -5%;z-index:-1;display:none;gap:14px;justify-content:center;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 42%,transparent 38%,#000 78%);mask-image:radial-gradient(ellipse 55% 60% at 50% 42%,transparent 38%,#000 78%);opacity:.34}
.mo .hero-parede{display:flex}
.hero-coluna{display:flex;flex-direction:column;gap:14px;width:128px;flex:none;animation:parede-sobe var(--dur,38s) linear infinite}
.hero-coluna.desce{animation-name:parede-desce}
@keyframes parede-sobe{to{transform:translateY(-50%)}}
@keyframes parede-desce{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.hero-tile{aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#11141d;position:relative;flex:none}
.hero-tile img{width:100%;height:100%;object-fit:cover}
.hero-tile::after{content:"";position:absolute;left:10px;right:10px;bottom:14px;height:9px;border-radius:5px;background:linear-gradient(90deg,var(--yellow) var(--p,40%),rgba(255,255,255,.18) 0)}
.hero-tile.cor{background:linear-gradient(160deg,var(--c1),var(--c2))}

.mo .hero h1 .pal{display:inline-block;will-change:transform}
.mo .hero h1 mark{display:inline-block}

/* botão principal: reflexo que passa de tempos em tempos */
.mo .btn{position:relative;overflow:hidden}
.mo .btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:btn-reflexo 4.5s ease-in-out infinite}
@keyframes btn-reflexo{0%,70%{left:-60%}100%{left:130%}}

/* ---------- método 3×3×3: 9 clipes viram 27 vídeos ---------- */
.mult-palco{display:none;align-items:center;justify-content:center;gap:clamp(14px,3vw,34px);margin:30px auto 6px;max-width:860px}
.mo .mult-palco{display:flex}
.mult-colunas{display:flex;gap:10px;flex:none}
.mult-coluna{display:flex;flex-direction:column;gap:8px}
.mult-coluna small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center;margin-bottom:2px}
.mult-chip{width:58px;aspect-ratio:9/16;border-radius:9px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:.62rem;font-weight:800;color:#0b0d13;background:var(--cor);box-shadow:0 6px 16px rgba(0,0,0,.35);transition:box-shadow .2s,filter .2s}
/* sem transform aqui: quem mexe no transform do chip é o GSAP (transição CSS no
   mesmo campo travava os chips em escala 0) */
.mult-chip.aceso{box-shadow:0 0 0 2px #fff,0 0 22px var(--cor);filter:brightness(1.15)}
.mult-seta{font-family:Anton,Impact,sans-serif;font-size:2.4rem;color:var(--yellow);flex:none}
.mult-grade{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;flex:1;max-width:430px}
.mult-mini{aspect-ratio:9/16;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;position:relative;border:1px solid rgba(255,255,255,.14);background:#0d1018}
.mult-mini i{flex:1}
.mult-mini b{position:absolute;inset:auto 0 3px;text-align:center;font-size:.55rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.mo .mult-mini{opacity:0}
.mult-legenda{display:none;justify-content:center;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--dim);margin-top:10px}
.mo .mult-legenda{display:flex}
.mult-legenda span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--cor);margin-right:6px;vertical-align:-1px}

/* ---------- como funciona: linha que liga os passos ---------- */
.mo .steps{position:relative}
.passos-linha{position:absolute;left:8%;right:8%;top:44px;height:2px;background:linear-gradient(90deg,var(--amber1),var(--yellow));transform-origin:0 50%;transform:scaleX(0);z-index:0;display:none}
.mo .passos-linha{display:block}
.mo .step{position:relative;z-index:1}

/* ---------- recursos: o check "marca" quando o item entra ---------- */
.mo .checks li::before{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.mo .checks li.ok::before{transform:scale(1)}

/* ---------- resultados: cartões em 3D que seguem o mouse ---------- */
.mo .results{perspective:1000px}
.mo .results img{transition:transform .25s ease-out,box-shadow .25s;transform-style:preserve-3d;will-change:transform}
.mo .results img:hover{box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,214,10,.4)}

/* ---------- comparação: o concorrente é riscado ---------- */
.mo td.bad{position:relative}
.mo td.bad::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s ease .1s;opacity:.8}
.mo td.bad.riscado::after{transform:scaleX(1)}

/* ---------- preço: borda luminosa girando no plano recomendado ---------- */
@property --giro{syntax:'<angle>';initial-value:0deg;inherits:false}
.mo .plano-anual{position:relative;border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--giro),var(--amber1),rgba(255,214,10,.15) 25%,var(--yellow) 50%,rgba(255,214,10,.15) 75%,var(--amber1)) border-box;animation:giro-borda 5s linear infinite}
@keyframes giro-borda{to{--giro:360deg}}

@media (max-width:760px){
  .hero-coluna{width:92px}
  .mult-palco{flex-direction:column;gap:14px}
  .mult-seta{transform:rotate(90deg);font-size:1.8rem}
  .mult-chip{width:46px}
  .mult-grade{width:100%;max-width:360px}
  .passos-linha{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .hero-parede,.mo-progresso{display:none !important}
  .mo .btn::after,.mo .plano-anual{animation:none}
}