/* ══════════════════════════════════════════════════════════════════
   REPERTÓRIO DE MOVIMENTO · V26
   Nada aqui liga sozinho. Cada efeito entra por uma classe mv-* posta
   à mão na tela que precisa dele, e só quando ele cumpre uma função:
   marcar a virada, dar tempo de silêncio, mostrar um mecanismo,
   revelar um dado. Catálogo, função e tom em references/movimento.md.

   Família A · introspecção (vem da aula de Frankl)
   Família B · mecanismo e dado (novos)
   Família C · cena e atmosfera
   A família de apresentação (cortina, íris, letras, palavras, números
   que contam, desenho por toque, anotação .mao) mora no v26.css/v26.js
   e liga por data-tr, data-mo, data-conta e data-p.
   ══════════════════════════════════════════════════════════════════ */

/* ───────── A · INTROSPECÇÃO ───────── */

/* mv-dissolve (no <body>): as telas se dissolvem uma na outra, sem deslizar,
   e os passos surgem do desfoque. Para aula lenta inteira. */
body.mv-dissolve .slide{transform:none;transition:opacity 1.2s ease,visibility 1.2s}
body.mv-dissolve .slide.active .reveal{animation:mv-emerge 1.5s ease both;animation-delay:var(--delay,0s)}
body.mv-dissolve .step{transform:none;filter:blur(7px);transition:opacity 1.4s ease,filter 1.4s ease}
body.mv-dissolve .step.on{filter:none}

/* mv-emerge: o elemento surge do desfoque. --delay e --dur ajustam. */
.mv-emerge{opacity:0}
.slide.active .mv-emerge{animation:mv-emerge var(--dur,1.6s) ease var(--delay,.2s) both}
@keyframes mv-emerge{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}

/* mv-pausa: frase que aparece sozinha depois de um silêncio ("Ficou."). */
.mv-pausa{opacity:0}
.slide.active .mv-pausa{animation:mv-emerge var(--dur,2.8s) ease var(--delay,1.6s) both}

/* mv-silencio: linha fina que leva --seg (padrão 30s) para atravessar a tela.
   É o tempo de silêncio antes de um voto. */
.mv-silencio{height:2px;width:0;margin-top:38px;background:currentColor;opacity:.45}
.slide.active .mv-silencio{animation:mv-enche var(--seg,30s) linear var(--delay,2s) forwards}
@keyframes mv-enche{to{width:100%}}

/* mv-perde: lista em que cada item novo apaga e risca o anterior (perdas em sequência). */
.mv-perde .step.on:has(~ .step.on){opacity:.3;transition:opacity 1.6s ease}
.mv-perde .step.on:has(~ .step.on) .v,.mv-perde .step.on:has(~ .step.on) b{text-decoration:line-through;text-decoration-thickness:1px}

/* mv-ouro: a frase da virada surge devagar, em dourado, com o espaçamento fechando. */
.mv-ouro{color:#E9C980}
.slide.active .mv-ouro{animation:mv-ouro 4.2s ease var(--delay,1.4s) both}
@keyframes mv-ouro{0%{opacity:0;filter:blur(14px);letter-spacing:.06em}60%{opacity:1;filter:blur(0)}100%{opacity:1;filter:none}}

/* ───────── C · CENA E ATMOSFERA ───────── */

/* mv-vinheta e mv-halo: camadas vazias dentro da tela (<div class="mv-vinheta"></div>). */
.mv-vinheta,.mv-halo{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0}
.mv-vinheta{background:radial-gradient(ellipse at 50% 46%,transparent 34%,rgba(0,0,0,.62) 100%)}
.mv-halo{background:radial-gradient(circle at var(--x,50%) var(--y,52%),rgba(233,201,128,.16),transparent 46%)}
.slide.active .mv-vinheta{animation:mv-surge 3s ease .4s forwards}
.slide.active .mv-halo{animation:mv-surge 5s ease 1.2s forwards}
@keyframes mv-surge{to{opacity:1}}

/* mv-neve: <div class="mv-neve" data-n="46"></div>. Os flocos são criados pelo movimento.js. */
.mv-neve{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.mv-neve i{position:absolute;top:-3%;border-radius:50%;background:currentColor;opacity:0}
.slide.active .mv-neve i{animation:mv-cai linear infinite}
@keyframes mv-cai{0%{transform:translate(0,0);opacity:0}8%{opacity:.5}92%{opacity:.4}100%{transform:translate(var(--dx,20px),108vh);opacity:0}}

/* mv-chama: num traço do desenho; a chama acende e treme. */
.mv-chama{transform-origin:50% 100%;transform-box:fill-box}
.slide.active .mv-chama{animation:traco 1.5s var(--ease) forwards,mv-treme 2.6s ease-in-out 1.6s infinite}
@keyframes mv-treme{0%,100%{transform:scale(1,1) rotate(-2deg)}35%{transform:scale(.94,1.08) rotate(3deg)}70%{transform:scale(1.04,.95) rotate(-1deg)}}

/* mv-aproxima: o desenho se aproxima muito devagar enquanto a tela está no ar. */
.slide.active .mv-aproxima{animation:mv-aproxima var(--seg,26s) ease-out both}
@keyframes mv-aproxima{from{transform:scale(1)}to{transform:scale(1.07)}}

/* mv-paralaxe: camadas de uma cena que derivam em profundidade diferente.
   Cada filho direto recebe --prof (0 a 1): quanto maior, mais anda. */
.mv-paralaxe{position:relative}
.mv-paralaxe > *{will-change:transform}
.slide.active .mv-paralaxe > *{animation:mv-deriva var(--seg,18s) ease-in-out infinite alternate}
@keyframes mv-deriva{from{transform:translate3d(calc(var(--prof,.3) * -14px),0,0)}to{transform:translate3d(calc(var(--prof,.3) * 14px),calc(var(--prof,.3) * -6px),0)}}

/* ───────── B · MECANISMO E DADO ───────── */

/* mv-troca: a palavra muda no lugar, a cada toque.
   <span class="mv-troca"><i>quero</i><i class="step">preciso</i><i class="step">tenho que</i></span>
   O primeiro <i> não é passo: é o que aparece de início. */
.mv-troca{display:inline-grid;vertical-align:bottom;overflow:hidden;padding:0 .04em}
.mv-troca > i{grid-area:1/1;font-style:normal;transition:transform .55s var(--ease),opacity .4s ease}
.mv-troca > i.step{opacity:0;transform:translateY(70%);filter:none}
.mv-troca > i.step.on{opacity:1;transform:none}
.mv-troca > i:has(~ i.step.on){opacity:0;transform:translateY(-70%)}
.mv-troca.cor > i.step.on{color:var(--em,var(--accent))}

/* mv-risca: a crença riscada à mão e a correção escrita por cima, no toque.
   <span class="mv-risca"><s>três horas</s><b class="step mao">sete horas</b></span> */
.mv-risca{position:relative;display:inline-block;white-space:nowrap}
.mv-risca s{text-decoration:none;position:relative}
.mv-risca s::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.09em;background:var(--em,var(--accent));border-radius:3px;transform:scaleX(0) rotate(-3deg);transform-origin:left center;transition:transform .5s var(--ease)}
.mv-risca:has(b.on) s::after{transform:scaleX(1) rotate(-3deg)}
.mv-risca:has(b.on) s{opacity:.55;transition:opacity .5s .3s}
.mv-risca b{position:absolute;left:50%;bottom:92%;transform:translateX(-50%) rotate(-4deg);font-size:.72em;white-space:nowrap}
.mv-risca b.step{opacity:0;filter:none;transition:opacity .4s ease .35s}
.mv-risca b.step.on{opacity:1;transform:translateX(-50%) rotate(-4deg)}

/* mv-mascara: o texto é revelado por uma faixa de cor que passa (wipe).
   No elemento que entra no toque, ou na tela inteira com .slide.active. */
.mv-mascara{position:relative;display:inline-block;clip-path:inset(0 100% 0 0)}
.mv-mascara::after{content:"";position:absolute;inset:-.06em 0;background:var(--em,var(--accent));transform-origin:left;transform:scaleX(0)}
.slide.active .mv-mascara:not(.step),.mv-mascara.step.on{animation:mv-abre .9s cubic-bezier(.7,0,.2,1) var(--delay,.2s) forwards}
.slide.active .mv-mascara:not(.step)::after,.mv-mascara.step.on::after{animation:mv-faixa .9s cubic-bezier(.7,0,.2,1) var(--delay,.2s) forwards}
.mv-mascara.step{opacity:1;transform:none;filter:none}
@keyframes mv-abre{to{clip-path:inset(0 0 0 0)}}
@keyframes mv-faixa{0%{transform:scaleX(0);transform-origin:left}49%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* mv-foco: holofote. Um passo vazio escurece a tela e deixa só um círculo aceso.
   Preso a um elemento (acompanha o layout em qualquer tela):
     <i class="mv-foco step" data-alvo=".rosto4"></i>   (data-folga aumenta o círculo)
   Ou numa posição fixa: style="--x:62%;--y:40%;--r:14%". Fica fora do .content. */
.mv-foco{position:absolute;inset:0;z-index:5;pointer-events:none;display:block;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent var(--r,14%),rgba(4,4,7,.82) calc(var(--r,14%) + 6%))}
.mv-foco.step{opacity:0;transform:none;filter:none;transition:opacity .8s ease}
.mv-foco.step.on{opacity:1}
.mv-foco.step.on:has(~ .mv-foco.step.on){opacity:0}

/* mv-camera: a câmera entra no desenho, um ponto por toque (o movimento.js anima o viewBox do svg).
   <div class="mv-camera"><div class="mv-alvo">…desenho…</div>
     <i class="step" data-z="2.2" data-x="30" data-y="40"></i>…</div>  (x e y em % do desenho) */
.mv-camera{position:relative;overflow:hidden;border-radius:4px}
.mv-camera > i.step{display:none}
.mv-camera .sk,.mv-camera svg{overflow:hidden}

/* mv-empilha: os itens caem e se acumulam (notificações, horas, tarefas). Cada item é .step. */
.mv-empilha{display:flex;flex-direction:column-reverse;gap:10px}
.mv-empilha > .step{transform:translateY(-60vh);filter:none;opacity:1;visibility:hidden}
.mv-empilha > .step.on{visibility:visible;animation:mv-cai-pilha .7s cubic-bezier(.3,1.35,.5,1) both}
@keyframes mv-cai-pilha{from{transform:translateY(-60vh)}to{transform:none}}

/* mv-pulso: batida. Regular (--seg) ou irregular (.irregular, sorteada pelo movimento.js:
   é o reforço intermitente, a recompensa que chega sem hora marcada). */
.slide.active .mv-pulso:not(.irregular){animation:mv-bate var(--seg,1.2s) ease-in-out infinite}
.mv-pulso.bate{animation:mv-bate .55s ease-out}
@keyframes mv-bate{0%,100%{transform:scale(1)}30%{transform:scale(1.12)}}
.mv-pulso{display:inline-block;transform-origin:center}

/* mv-decifra e mv-maquina: só JS (movimento.js). Aqui, o cursor da máquina. */
.mv-maquina.digitando::after{content:"";display:inline-block;width:.08em;height:.9em;margin-left:.06em;background:currentColor;vertical-align:-.08em;animation:pisca 1s steps(1) infinite}

/* quem pediu menos movimento no aparelho vê tudo pronto */
@media (prefers-reduced-motion:reduce){
  .mv-emerge,.mv-pausa,.mv-ouro,.mv-vinheta,.mv-halo{animation:none!important;opacity:1!important;filter:none!important}
  .slide.active .mv-silencio{animation:none;width:100%}
  .slide.active .mv-aproxima,.slide.active .mv-paralaxe > *,.slide.active .mv-neve i,.slide.active .mv-pulso,.slide.active .mv-chama{animation:none!important}
  .slide.active .mv-mascara,.mv-mascara.step.on{animation:none;clip-path:none}
  .mv-mascara::after{display:none}
  .mv-empilha > .step.on{animation:none;transform:none}
}