/* ====================================================================
   MOTION DA LANDING — a mesma linguagem do vídeo de 07/10/2026
   (íris roxa, dor sem cor → cor volta, carimbo, legenda palavra a
   palavra, números que saltam, luz roxa/âmbar atrás da cena).

   Tudo é transform/opacity/filter (GPU, sem reflow) e só liga com
   `html.mv` (posto pelo motion.js). Sem JS, ou com "reduzir movimento",
   a página fica exatamente como era.
   ==================================================================== */

/* barra de progresso da leitura */
.mv-progresso{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#8B5CF6,#F59E0B)}

/* luz roxa e âmbar respirando atrás do topo (os "efeitos atrás do Rony") */
html.mv .mv-luz{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
html.mv .mv-luz i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.3;
  animation:mvFlutua 14s ease-in-out infinite alternate}
html.mv .mv-luz i:nth-child(1){width:46vmax;height:46vmax;left:-8%;top:-12%;background:#7C3AED}
html.mv .mv-luz i:nth-child(2){width:34vmax;height:34vmax;right:-6%;top:8%;background:#F59E0B;opacity:.18;animation-duration:18s}
html.mv .mv-luz i:nth-child(3){width:28vmax;height:28vmax;left:30%;bottom:-18%;background:#A78BFA;opacity:.22;animation-duration:22s}
@keyframes mvFlutua{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(4%,6%,0) scale(1.12)}}

/* título palavra a palavra, como a legenda do vídeo */
html.mv .mv-palavra{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(6px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1),filter .55s}
html.mv .mv-palavra.on{opacity:1;transform:none;filter:none}


/* entrada geral: sobe, desembaça, um depois do outro */
html.mv .mv-entra{opacity:0;transform:translate3d(0,26px,0);filter:blur(5px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s;
  transition-delay:var(--mv-d,0s)}
html.mv .mv-entra.on{opacity:1;transform:none;filter:none}

/* íris roxa: seção escura abre como a transição do vídeo */
html.mv .mv-iris{clip-path:circle(0% at 50% 50%);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
html.mv .mv-iris.on{clip-path:circle(150% at 50% 50%)}

/* a dor sem cor; a cor volta conforme a leitura avança (--mv-cor 0→1) */
html.mv .mv-dor{filter:grayscale(calc(1 - var(--mv-cor,0))) saturate(calc(.6 + var(--mv-cor,0) * .4));transition:filter .2s linear}

/* carimbo que bate, como o RESOLVIDO */
.mv-carimbo{display:none}
html.mv .mv-carimbo{display:inline-block;position:absolute;right:14px;top:-16px;z-index:3;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#F59E0B;border:2.5px solid #F59E0B;border-radius:8px;padding:6px 12px;background:rgba(21,14,41,.92);
  transform:rotate(-9deg) scale(2.4);opacity:0;pointer-events:none}
html.mv .mv-carimbo.on{animation:mvCarimbo .55s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes mvCarimbo{0%{opacity:0;transform:rotate(-9deg) scale(2.4)}60%{opacity:1;transform:rotate(-9deg) scale(.92)}
  80%{transform:rotate(-7deg) scale(1.04)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
html.mv .mv-tremor{animation:mvTremor .35s ease-out}
@keyframes mvTremor{20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,1px)}80%{transform:translate(1px,0)}}

/* preço: borda de luz girando + número que conta */
html.mv .mv-preco-card{position:relative;isolation:isolate}
html.mv .mv-preco-card::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;padding:2px;
  background:conic-gradient(from var(--mv-ang,0deg),transparent 0 60%,#F59E0B 75%,#8B5CF6 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:mvGira 5s linear infinite;opacity:.9}
@property --mv-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes mvGira{to{--mv-ang:360deg}}

/* botões: reflexo correndo + respiro; ímã no mouse (desktop) */
html.mv .cta{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
html.mv .cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:mvReflexo 3.6s ease-in-out infinite}
@keyframes mvReflexo{0%,55%{left:-60%}85%,100%{left:130%}}
html.mv .cta.mv-chama{animation:mvRespira 2.6s ease-in-out infinite}
@keyframes mvRespira{50%{box-shadow:0 0 0 10px rgba(245,158,11,0),0 18px 40px -12px rgba(245,158,11,.9)}}

/* fotos das artes derivando devagar (a grade de artes atrás da fala) */
html.mv .prova-item{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html.mv .prova-item img,html.mv .prova-item video{will-change:transform}

/* luz que segue o mouse nos cartões (desktop) */
@media (hover:hover){
  html.mv .mv-luz-card{position:relative}
  html.mv .mv-luz-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
    transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(139,92,246,.16),transparent 60%)}
  html.mv .mv-luz-card:hover::after{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  html.mv *,html.mv *::before,html.mv *::after{animation:none !important;transition:none !important}
  html.mv .mv-palavra,html.mv .mv-entra,html.mv .mv-iris{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}
}