/* ==========================================================
   Pixel Culture, movimento
   Tudo aqui depende da classe .mov no <html>, que só entra
   quando a pessoa não pediu "reduzir movimento" no sistema.
   Sem .mov, a página aparece no estado final, parada.

   Uma só linguagem: durações e curvas vêm dos tokens abaixo.
   Controles respondem rápido; entradas de conteúdo são mais lentas,
   mas nunca seguram a leitura. Preferir transform e opacity.
   ========================================================== */

:root {
  --mov-rapido: 160ms;  /* hover e clique em controles */
  --mov-curto: 220ms;   /* troca de estado: spoiler, sublinhado */
  --mov-medio: 300ms;   /* cards, imagens no hover, escala */
  --mov-lento: 600ms;   /* entrada de conteúdo, réguas, carimbo */
  --mov-cena: 1000ms;   /* momentos de cinema: capa, cena pós-créditos */
  --mov-passo: 60ms;    /* intervalo entre itens de uma sequência */
  --curva: cubic-bezier(.23, 1, .32, 1);          /* ease-out forte: tudo que entra ou sai */
  --curva-dupla: cubic-bezier(.77, 0, .175, 1);   /* ease-in-out forte: o que troca de estado na tela (slides) */
}

/* rolagem com inércia (Lenis): enquanto ela age, o scroll-behavior nativo sai do caminho */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* troca de página: um corte rápido, nativo do navegador */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: var(--mov-curto); }
}

@keyframes piscar { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes carimbo {
  0% { opacity: 0; transform: scale(1.3) rotate(-4deg); }
  60% { opacity: 1; transform: scale(.95) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes subir { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes entrar { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@keyframes aproximar { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes foco { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes cortina { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes foco-leve { from { transform: scale(1.06); } to { transform: none; } }
@keyframes da-esquerda { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } }
@keyframes da-direita { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } }


/* ==========================================================
   Controles: resposta rápida no hover e no clique
   ========================================================== */

/* cor muda suave para todo mundo (inclusive quem reduz movimento): cor não é movimento */
.btn,
.abas button,
.leitores-botoes button,
.destaques-abas button,
.tags a,
.pod-play,
.video-play {
  transition: background-color var(--mov-rapido) ease, color var(--mov-rapido) ease, border-color var(--mov-rapido) ease;
}
.nav a,
.cab a,
.faixa a,
.rodape-links a,
.rodape-botao,
.lidas a { transition: color var(--mov-rapido) ease; }

/* aperto: escala 0,97 com ease-out, interrompível (transition, não keyframe) */
.mov .btn,
.mov .abas button,
.mov .leitores-botoes button,
.mov .destaques-abas button,
.mov .tags a,
.mov .pod-play {
  transition: background-color var(--mov-rapido) ease, color var(--mov-rapido) ease, border-color var(--mov-rapido) ease,
    transform var(--mov-rapido) var(--curva);
}
.mov .btn:active,
.mov .abas button:active,
.mov .leitores-botoes button:active,
.mov .destaques-abas button:active,
.mov .tags a:active,
.mov .pod-play:active { transform: scale(.97); }

/* hover com movimento só para mouse: no toque, o "hover" dispara falso no tap */
.mov .t a {
  background: linear-gradient(var(--brasa), var(--brasa)) 0 92% / 0 .07em no-repeat;
  transition: background-size var(--mov-curto) ease;
}
.mov a.capa img,
.mov .card-r-capa img { transition: transform var(--mov-medio) var(--curva); }

@media (hover: hover) and (pointer: fine) {
  /* títulos: sublinhado em brasa que se desenha */
  .mov .t a:hover { text-decoration: none; background-size: 100% .07em; }
  /* capas: imagem aproxima de leve */
  .mov a.capa:hover img,
  .mov .card-r-capa:hover img { transform: scale(1.03); }
}


/* ==========================================================
   Identidade: logo, réguas, notas, créditos
   ========================================================== */

/* logo: o bloco vira claquete (bate uma vez), volta, vira controle (botões piscam), volta.
   Toca na primeira página da visita e quando o mouse passa no logo (js/movimento.js põe .tocando).
   Timeline única de 3,6 s; cada peça anda na sua porcentagem. */
.mov .logo { --logo-tempo: 3600ms; }
.mov .logo.tocando .m-bloco { animation: m-bloco var(--logo-tempo) both; }
.mov .logo.tocando .m-claquete { animation: m-claquete var(--logo-tempo) both; }
.mov .logo.tocando .m-haste { animation: m-haste var(--logo-tempo) both; }
.mov .logo.tocando .m-controle { animation: m-controle var(--logo-tempo) both; }
.mov .logo.tocando .m-botao { animation: m-botao var(--logo-tempo) both; }
.mov .logo.tocando .m-botao-b { animation-name: m-botao-b; }

/* abertura do logo (js/movimento.js, Web Animations): claquete no meio, controle capotando revela o nome.
   Até a abertura começar, o nome e o bloco ficam escondidos para não piscar. */
.logo-palavra { display: inline-block; }
.mov .logo { position: relative; }
.mov.mov-estreia .logo { color: transparent; }
.mov.mov-estreia .logo .marca { opacity: 0; }
.logo-intro { position: absolute; left: 0; bottom: .02em; overflow: visible; pointer-events: none; }
.logo-intro.i-claquete { width: .54em; height: .6em; }
.logo-intro.i-controle { width: .56em; height: .34em; }
.logo-intro .i-haste { transform-box: fill-box; transform-origin: 0 100%; }
.logo-intro .corpo { fill: var(--brasa); }
.logo-intro .furo { fill: var(--papel); }

/* o próprio bloco estica e vira o corpo de cada objeto (claquete 54×46, controle 56×34) */
@keyframes m-bloco {
  0% { transform: none; animation-timing-function: var(--curva); }
  10% { transform: scale(1.8, .7667); }
  35% { transform: scale(1.8, .7667); animation-timing-function: var(--curva); }
  44% { transform: none; }
  52% { transform: none; animation-timing-function: var(--curva); }
  62% { transform: scale(1.8667, .5667); }
  89% { transform: scale(1.8667, .5667); animation-timing-function: var(--curva); }
  100% { transform: none; }
}
@keyframes m-claquete {
  0%, 9% { opacity: 0; }
  13%, 33% { opacity: 1; }
  37%, 100% { opacity: 0; }
}
/* a haste abre, cai rápido até bater (aceleração de queda de verdade) e dá um quique pequeno */
@keyframes m-haste {
  0%, 15% { transform: rotate(-28deg); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  19.5% { transform: rotate(0); animation-timing-function: var(--curva); }
  21% { transform: rotate(-4deg); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  22.5%, 100% { transform: rotate(0); }
}
@keyframes m-controle {
  0%, 61% { opacity: 0; }
  65%, 86% { opacity: 1; }
  89%, 100% { opacity: 0; }
}
/* botões do controle acendem em alternância, como se alguém estivesse jogando */
@keyframes m-botao {
  0%, 67% { fill: var(--papel); }
  69%, 72% { fill: var(--tinta); }
  74%, 77% { fill: var(--papel); }
  79%, 82% { fill: var(--tinta); }
  84%, 100% { fill: var(--papel); }
}
@keyframes m-botao-b {
  0%, 71% { fill: var(--papel); }
  73%, 76% { fill: var(--tinta); }
  78%, 81% { fill: var(--papel); }
  83%, 85% { fill: var(--tinta); }
  87%, 100% { fill: var(--papel); }
}

/* régua de seção: o trecho em brasa se desenha */
.mov .cab::before { transform: scaleX(0); transform-origin: left; transition: transform var(--mov-lento) var(--curva); }
.mov .cab.visto::before { transform: scaleX(1); }

/* nota do veredito e da ficha: entra como carimbo */
.mov .veredito .nota,
.mov .ficha-nota .nota { opacity: 0; }
.mov .veredito.visto .nota,
.mov .ficha-nota.visto .nota { animation: carimbo var(--mov-lento) var(--curva) both; }

/* rodapé: créditos sobem linha por linha */
.mov .creditos-marca,
.mov .creditos-sub,
.mov .creditos dl > div { opacity: 0; }
.mov .creditos.visto .creditos-marca,
.mov .creditos.visto .creditos-sub,
.mov .creditos.visto dl > div { animation: subir var(--mov-lento) var(--curva) both; animation-delay: calc(var(--i, 0) * var(--mov-passo)); }

/* cena pós-créditos: aparece por último; o ponto de gravação pisca algumas vezes e fica aceso */
.cena-rotulo::before {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-right: .55em;
  border-radius: 50%;
  background: var(--brasa);
  vertical-align: .05em;
}
.mov .cena-rotulo,
.mov .cena-texto { opacity: 0; transition: opacity var(--mov-cena) var(--curva) .4s; }
.mov .cena-pos.visto .cena-rotulo,
.mov .cena-pos.visto .cena-texto { opacity: 1; }
.mov .cena-pos.visto .cena-rotulo::before { animation: piscar 1s 1.2s 4; }


/* ==========================================================
   Entradas de conteúdo
   ========================================================== */

/* abertura de matéria, do arquivo e do slide do carrossel: sobe em sequência curta */
.mov .artigo-topo > *,
.mov .pag-topo .pag-titulo,
.mov .pag-topo .pag-desc,
.mov .destaques-textos > .ativo > * { animation: subir var(--mov-lento) var(--curva) both; }
.mov .artigo-topo > :nth-child(2),
.mov .pag-topo .pag-desc,
.mov .destaques-textos > .ativo > :nth-child(2) { animation-delay: var(--mov-passo); }
.mov .artigo-topo > :nth-child(3),
.mov .destaques-textos > .ativo > :nth-child(3) { animation-delay: calc(var(--mov-passo) * 2); }
.mov .artigo-topo > :nth-child(4),
.mov .destaques-textos > .ativo > :nth-child(4) { animation-delay: calc(var(--mov-passo) * 3); }

/* capa da matéria: a lente assenta (escala e opacidade, sem desfoque pesado) */
.mov .artigo-capa .capa img,
.mov .artigo-capa .capa-txt { animation: foco var(--mov-cena) var(--curva) .1s both; }

/* carrossel: a capa ativa se aproxima durante o slide e pausa junto com ele */
.mov .destaques-capas > .ativo img,
.mov .destaques-capas > .ativo .capa-txt { animation: aproximar var(--tempo, 8s) linear both; transform-origin: 30% 70%; }
/* a que está saindo fica congelada no zoom em que estava até a nova cobrir (sem voltar ao tamanho de uma vez) */
.mov .destaques-capas > .saindo img,
.mov .destaques-capas > .saindo .capa-txt { animation: aproximar var(--tempo, 8s) linear both paused; transform-origin: 30% 70%; }
.mov .destaques.pausado .destaques-capas > .ativo img,
.mov .destaques.pausado .destaques-capas > .ativo .capa-txt { animation-play-state: paused; }

/* ficha lateral: o pontilhado de crédito se desenha */
.mov .ficha dl div::after { transform: scaleX(0); transform-origin: left; transition: transform var(--mov-lento) var(--curva); transition-delay: calc(var(--i, 0) * var(--mov-passo)); }
.mov .ficha.visto dl div::after { transform: scaleX(1); }

/* imagens no meio do texto: "ajuste de foco", o mesmo da capa das matérias. A foto aparece 8% maior e
   transparente e assenta no tamanho certo (1 s, curva de entrada). Só transform e opacity; a moldura corta a escala.
   Escolha do autor em 01/11/2026 (substituiu a cortina de cima para baixo). */
.mov .texto .figura picture,
.mov .texto .figura .video { display: block; overflow: hidden; }
.mov .texto .figura:not(.figura-video) img { opacity: 0; }
.mov .texto .figura:not(.figura-video).visto img { animation: foco var(--mov-cena) var(--curva) both; }
/* trailer: a moldura aparece e a miniatura assenta por dentro (a miniatura mantém o próprio esmaecido de hover) */
.mov .texto .figura-video .video { opacity: 0; transition: opacity var(--mov-lento) var(--curva); }
.mov .texto .figura-video.visto .video { opacity: 1; }
.mov .texto .figura-video.visto .video img { animation: foco-leve var(--mov-cena) var(--curva) both; }

/* comparativo: o jogo entra pela esquerda, o filme pela direita */
.mov .comparativo-lado { opacity: 0; }
.mov .comparativo.visto .comparativo-lado:first-child { animation: da-esquerda var(--mov-lento) var(--curva) both; }
.mov .comparativo.visto .comparativo-lado + .comparativo-lado { animation: da-direita var(--mov-lento) var(--curva) var(--mov-passo) both; }

/* citação em destaque: a régua em brasa se desenha */
.mov .texto blockquote { position: relative; border-top-color: transparent; }
.mov .texto blockquote::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brasa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mov-lento) var(--curva);
}
.mov .texto blockquote.visto::before { transform: scaleX(1); }

/* notícia: a linha do tempo acende evento por evento */
.mov .linha-tempo li { opacity: .2; transition: opacity var(--mov-medio) var(--curva); transition-delay: calc(var(--i, 0) * (var(--mov-passo) + 20ms)); }
.mov .linha-tempo.visto li { opacity: 1; }

/* arquivo de reviews: escala de notas linha por linha; cards em sequência curta ao filtrar */
.mov .escala dl > div { opacity: 0; }
.mov .escala.visto dl > div { animation: entrar var(--mov-medio) var(--curva) both; animation-delay: calc(var(--i, 0) * var(--mov-passo) + 150ms); }
.mov .card-r.entra { animation: entrar var(--mov-curto) var(--curva) both; animation-delay: calc(var(--i, 0) * 30ms); }

/* spoiler aberto */
.mov .spoiler-conteudo:not([hidden]) { animation: entrar var(--mov-curto) var(--curva) both; }

/* luz da sala: a página nova aparece num círculo que nasce na alavanca (site.js anima o clip-path);
   sem o fade padrão por baixo, a antiga fica parada até o círculo cobrir tudo */
.luz-trocando::view-transition-old(root),
.luz-trocando::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* selo de quem platinou o perfil (controle): a cada ~12 s o controle dá um pulinho e gira no ar (exceção pedida pelo autor à regra
   de não ter loop; cada selo começa num ponto sorteado pra não pularem juntos). Hover: pula na hora. */
/* o pulo: agacha, sobe desacelerando com meio giro, desce ganhando velocidade com a outra metade,
   amassa ao tocar o chão, quica de leve e assenta. Cada trecho tem a própria curva (física, não UI). */
@keyframes selo-pulo {
  0%, 85% { transform: translateY(0) rotate(0) scale(1, 1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  86.5% { transform: translateY(0) rotate(0) scale(1.08, .92); animation-timing-function: cubic-bezier(.22, .9, .36, 1); }
  91% { transform: translateY(-55%) rotate(180deg) scale(.98, 1.03); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  95.5% { transform: translateY(0) rotate(360deg) scale(1, 1); animation-timing-function: cubic-bezier(.22, .9, .36, 1); }
  96.8% { transform: translateY(0) rotate(360deg) scale(1.12, .88); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  98.3% { transform: translateY(-14%) rotate(360deg) scale(.97, 1.03); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: translateY(0) rotate(360deg) scale(1, 1); }
}
@keyframes selo-pulo-um {
  0% { transform: translateY(0) rotate(0) scale(1, 1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  10% { transform: translateY(0) rotate(0) scale(1.08, .92); animation-timing-function: cubic-bezier(.22, .9, .36, 1); }
  40% { transform: translateY(-55%) rotate(180deg) scale(.98, 1.03); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  70% { transform: translateY(0) rotate(360deg) scale(1, 1); animation-timing-function: cubic-bezier(.22, .9, .36, 1); }
  79% { transform: translateY(0) rotate(360deg) scale(1.12, .88); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  89% { transform: translateY(-14%) rotate(360deg) scale(.97, 1.03); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: translateY(0) rotate(360deg) scale(1, 1); }
}
.mov .selo-platina svg { animation: selo-pulo 12s linear infinite; animation-delay: var(--atraso, 0s); }
@media (hover: hover) and (pointer: fine) {
  .mov .selo-platina:hover svg { animation: selo-pulo-um 1.6s linear 1; }
}

/* barra de busca: entra descendo de leve ao abrir pela lupa */
@keyframes busca-abre { from { opacity: 0; transform: translateY(-6px); } }
.mov .busca.aberta form { animation: busca-abre var(--mov-curto) var(--curva); }