/* =====================================================================
   15B. MOVIMENTO EDITORIAL
   .anima-leve: qualquer aparelho sem reduced-motion (entradas curtas, só transform, opacity e clip-path).
   .anima-ok: desktop (sequências completas). Sem nenhum dos dois, tudo nasce no estado final.
   ===================================================================== */

/* 15B.1 Masthead (desktop): a régua dupla é traçada e o nome sobe letra por letra */
.anima-ok .cab-regua{ transform-origin: left center; animation: regua .9s cubic-bezier(.6,0,.2,1) .1s both; }
@keyframes regua{ from{ transform: scaleX(0); } }
.letra{ display: inline-block; }
.anima-ok .cabecalho .letra{ animation: letra .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--l) * 32ms + .25s); }
@keyframes letra{ from{ opacity: 0; transform: translateY(.32em) rotate(4deg); } }

/* 15B.2 Capa: a carta é servida na mesa e assenta (todos os aparelhos) */
.anima-leve .carta-wrap{ animation: servida 1s cubic-bezier(.2,.8,.25,1) .2s both; }
@keyframes servida{
  0%{ opacity: 0; transform: translate(34px, 56px) rotate(9deg); }
  70%{ opacity: 1; transform: translate(-2px, -4px) rotate(-1.2deg); }
  100%{ opacity: 1; transform: none; }
}
.anima-leve .capa-legenda{ animation: aparece .5s ease .9s both; }
.anima-leve .capa h1{ animation: surge .8s cubic-bezier(.2,.7,.2,1) both; }
.anima-leve .capa h1 span{ transform-origin: left center; animation: carimbo .5s cubic-bezier(.3,1.5,.5,1) .6s both; }
@keyframes aparece{ from{ opacity: 0; } }

/* 15B.3 Cartaz: a carta gira até ficar invertida e a manchete é carimbada palavra por palavra */
.palavra{ display: inline-block; }
.anima-leve .cartaz .mini-carta{ transition: transform 1.1s cubic-bezier(.5,-.35,.3,1.35) .25s; }
.anima-leve .cartaz:not(.visivel) .mini-carta{ transform: rotate(0deg); }
.anima-leve .cartaz .palavra{ transition: opacity .2s ease, transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--w) * 110ms + .8s); }
.anima-leve .cartaz:not(.visivel) .palavra{ opacity: 0; transform: scale(1.35) rotate(-4deg); }

/* 15B.4 Títulos de seção sobem de uma fenda */
.anima-leve .cab-secao.revela h2{ transition: clip-path .75s cubic-bezier(.3,.7,.2,1) .1s, transform .75s cubic-bezier(.3,.7,.2,1) .1s; }
.anima-leve .cab-secao.revela:not(.visivel) h2{ clip-path: inset(100% 0 0 0); transform: translateY(.35em); }

/* 15B.5 Grafo: nós brotam, rótulos aparecem depois */
.brotando .no .forma, .brotando .no .anel-comece{ transform-box: fill-box; transform-origin: center; animation: brota .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d, 0ms); }
.brotando .no text{ animation: aparece .4s ease both; animation-delay: calc(var(--d, 0ms) + .25s); }
@keyframes brota{ from{ transform: scale(0); } }

/* 15B.6 Cronologia curta: os losangos acendem conforme a espinha é traçada */
.anima-leve .crono-curta.revela li::before{ transition: transform .4s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--i, 0) * 170ms + .35s); }
.anima-leve .crono-curta.revela:not(.visivel) li::before{ transform: rotate(45deg) scale(0); }

/* 15B.8 $TOGA: letreiro de placas e três canais acendendo em sequência */
.placa{ display: inline-block; min-width: .55em; text-align: center; }
.anima-leve .toga-titulo .placa{ transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.3,1.4,.5,1), opacity .3s ease; transition-delay: calc(var(--p) * 90ms); }
.anima-leve .toga-titulo:not(.visivel) .placa{ opacity: 0; transform: perspective(320px) rotateX(-90deg); }
.anima-leve .tres-linha > *{ transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i) * 140ms + .2s); }
.anima-leve .tres-canais:not(.visivel) .tres-linha > *{ opacity: 0; transform: translateY(6px); }
.anima-leve .tres-canais.visivel .tres-linha span{ animation: acende .7s ease both; animation-delay: calc(var(--i) * 140ms + .95s); }
@keyframes acende{ 50%{ background: rgba(195,151,59,.5); } }
.anima-ok .vazio-proposito{ animation: hachura 14s linear infinite; }
@keyframes hachura{ to{ background-position: 68px 0; } }

/* 15B.9 Método: as respostas são impressas da esquerda para a direita */
.anima-leve .razao .r{ transition: clip-path .7s cubic-bezier(.3,.7,.2,1); transition-delay: calc(var(--i, 0) * 180ms + .25s); }
.anima-leve .razao:not(.visivel) .r{ clip-path: inset(0 100% 0 0); }