/* Motion · Imersão Colete (spec §10.8) — entrada de página, scroll-reveal, hovers, micro.
   Regra de segurança: nada some sem JS. Só `html.js-motion` (posto por motion.js depois de checar
   prefers-reduced-motion) esconde `.rv` até receber `.in`. Sem JS, com reduce, ou no gate: tudo visível.
   Sem biblioteca. Vars: --ease (tokens.css), --rv-d (delay do stagger, posto pelo JS). */

/* ——— scroll-reveal ——— */
html.js-motion .rv{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rv-d,0s)}
html.js-motion .rv:not(.in){opacity:0;transform:translateY(24px)}
html.js-motion .rv.in{transition-delay:var(--rv-d,0s)}
/* entrada de página: filhos do primeiro hero/capa que ainda não têm animação própria */
html.js-motion .pe{animation:pe-sobe .9s var(--ease) both;animation-delay:calc(var(--pe-i,0)*90ms)}
html.js-motion .pe-abre{animation:pe-abre 1.1s var(--ease) both;animation-delay:calc(var(--pe-i,0)*90ms)}
@keyframes pe-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pe-abre{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ——— hovers ——— */
.cta-pill{transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.cta-pill__arrow{transition:transform .35s var(--ease)}
.cta-pill:hover{transform:translateY(-2px)}
.cta-pill:hover .cta-pill__arrow{transform:translateX(4px)}
.card-prova,.card-mod,.chip,.sw{transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease),color .35s var(--ease)}
.card-prova:hover,.card-mod:hover{border-color:var(--vermelho);transform:translateY(-2px)}
.claro .card-prova:hover{border-color:var(--vermelho-escuro)}
.idx li:hover{border-color:var(--vermelho)} .claro .idx li:hover{border-color:var(--vermelho-escuro)}
.idx li{transition:border-color .35s var(--ease)}
.chip:hover{background:var(--preto-3);color:var(--texto)}
.claro .chip:hover{background:var(--branco);color:var(--tinta)}
.box-seta{transition:border-color .35s var(--ease),transform .35s var(--ease)}
.box-seta:hover{border-color:var(--vermelho)}
.box-seta:hover svg,.box-seta:hover span{transform:translateY(3px)}
.box-seta svg,.box-seta span{transition:transform .35s var(--ease)}
/* imagens em caixa de recorte seco (overflow hidden já na caixa): zoom leve, aresta continua reta */
.foto img,.poster img,.hero__foto img,.thumbs figure img,.mk__box>img,.card-mod img,.previa-card img{transition:transform 1s var(--ease)}
.foto:hover img,.poster:hover img,.hero__foto:hover img,.thumbs figure:hover img,.mk__box:hover>img,.card-mod:hover img{transform:scale(1.02)}
.thumbs figure{overflow:hidden}
/* links de nav: underline por scale-x */
.nav a:not(.cta-pill),.hub__tab,.toc a{position:relative}
.nav a:not(.cta-pill)::after,.toc a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:not(.cta-pill):hover::after,.nav a:not(.cta-pill):focus-visible::after,.toc a:hover::after,.toc a[aria-current]::after{transform:scaleX(1)}

/* ——— micro ——— */
/* <details> abre com altura animada (::details-content, Chromium 131+/Safari 18.4+; noutros só abre) */
details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}
summary{transition:color .3s var(--ease)}

/* ——— reduce: tudo estático ——— */
@media(prefers-reduced-motion:reduce){
  html.js-motion .rv,html.js-motion .rv:not(.in),.pe,.pe-abre{opacity:1;transform:none;animation:none;transition:none;clip-path:none}
  .cta-pill,.cta-pill__arrow,.card-prova,.card-mod,.chip,.sw,.idx li,.box-seta,.foto img,.poster img,.hero__foto img,.thumbs figure img,.mk__box>img,.nav a::after,details::details-content{transition:none}
}