/* ============================================================
   Direção cinematográfica em tempo real.

   A folha trabalha quase exclusivamente no compositor: transform e
   opacity. Blur, clip-path e mistura aparecem apenas nos cortes curtos.
   Toda informação continua no DOM e a experiência reduzida fica estática.
   ============================================================ */

:root {
  --cinema-corte: cubic-bezier(.16, .84, .24, 1);
  --cinema-impacto: cubic-bezier(.12, .88, .18, 1);
  --cinema-ambar: #ffd85e;
  --cinema-violeta: #b79bff;
  --cinema-gelo: #eaf3fb;
  --cinema-preto: #05050a;
  --cinema-grafite: #111118;
  --cinema-linha: rgba(255,255,255,.15);
  --cinema-linha-fraca: rgba(255,255,255,.08);
}

/* A marca entra como luz e sinal, não como tinta. As superfícies continuam
   neutras para que pele, metal e fotografia mantenham materialidade. */
.titulo-cinematico,
.cinema-prologo,
.entrada-andar-cinematica {
  background-color: var(--cinema-preto) !important;
}
.cinema-prologo .cinema-dialogo {
  border-color: var(--cinema-linha);
  border-left-color: var(--cinema-violeta);
  background: linear-gradient(145deg, rgba(8,8,14,.975), rgba(4,4,8,.96));
}
.cinema-prologo[data-forca="censo"] .cinema-dialogo { border-left-color:var(--cinema-ambar); }
.cinema-prologo[data-forca="censo"] .cinema-dialogo > strong { color:var(--cinema-ambar); }
.cinema-prologo[data-forca="anomalia"] .cinema-dialogo {
  box-shadow:0 24px 70px rgba(0,0,0,.68),inset 0 0 58px rgba(88,4,250,.055);
}

/* O briefing continua dentro do ambiente. A fotografia não some atrás de
   uma página preta; vira profundidade controlada sob a leitura. */
.tela.briefing-cinematico {
  isolation:isolate;
  background:
    linear-gradient(110deg,rgba(5,5,10,.76),rgba(5,5,10,.26)),
    var(--briefing-fundo) center / cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 28px 90px rgba(0,0,0,.58);
}
.tela.briefing-cinematico > .miolo {
  background:linear-gradient(125deg,rgba(7,7,13,.68),rgba(7,7,13,.30));
  border-color:var(--cinema-linha);
  border-top-color:var(--cinema-violeta);
  backdrop-filter:blur(2px);
}
.briefing-cinematico .missao-alvo {
  border:1px solid rgba(255,216,94,.14);
  border-left:2px solid var(--cinema-ambar);
  background:linear-gradient(90deg,rgba(255,216,94,.09),rgba(255,216,94,.018));
}
.briefing-cinematico .briefing-falas {
  background:linear-gradient(180deg,rgba(5,5,10,.44),rgba(5,5,10,.18));
}

/* Menu principal: profundidade ambiental, entrada por planos e resposta. */
.titulo-cinematico > .miolo {
  position: relative;
  isolation: isolate;
  perspective: 1100px;
}

.titulo-cinematico .titulo-conteudo,
.titulo-cinematico .painel-incidente {
  position: relative;
  z-index: 5;
}

.motion-titulo-fx {
  position: absolute;
  z-index: 0;
  /* O overscan pertence aos planos internos, não ao contêiner. Quando o
     contêiner ultrapassava a viewport, ele aumentava o scrollHeight da tela
     de título e criava uma rolagem sem conteúdo em todos os aparelhos com
     movimento ativo. */
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}

/* A abertura do menu é uma cena fechada. Os planos podem mover e ampliar
   dentro dela, mas o movimento não pode transformar o menu em uma página. */
.titulo-cinematico {
  overflow: hidden;
  overflow: clip;
}
.titulo-cinematico > .miolo { overflow: hidden; overflow: clip; }

.motion-titulo-profundidade,
.motion-titulo-feixe,
.motion-titulo-varredura,
.motion-titulo-grao {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.motion-titulo-profundidade {
  background: url('../assets/keyart-arquivo-cinematico-v2.webp') 58% 48% / cover no-repeat;
  will-change: transform, opacity;
}

.motion-titulo-fundo {
  opacity: .22;
  filter: saturate(.68) contrast(1.08) brightness(.62);
  transform: scale(1.10)
    translate3d(calc(var(--olhar-x, 0) * -7px), calc(var(--olhar-y, 0) * -5px), 0);
  animation: motion-titulo-camera 18s ease-in-out infinite alternate;
}

.motion-titulo-meio {
  opacity: .12;
  background-position: 63% 55%;
  background-size: 116% auto;
  filter: saturate(.8) contrast(1.2) brightness(.72);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 42%, #000 58% 100%);
  mask-image: linear-gradient(90deg, transparent 0 42%, #000 58% 100%);
  transform: scale(1.04)
    translate3d(calc(var(--olhar-x, 0) * -15px), calc(var(--olhar-y, 0) * -9px), 0);
  animation: motion-titulo-meio 13s ease-in-out infinite alternate;
}

.motion-titulo-feixe {
  inset: -30% -10%;
  opacity: .28;
  background: linear-gradient(112deg, transparent 32%, rgba(183,155,255,.03) 42%, rgba(240,227,255,.16) 49%, transparent 58%);
  transform: translate3d(-22%, 0, 0) rotate(-2deg);
  animation: motion-titulo-feixe 9.6s ease-in-out infinite;
}

.motion-titulo-varredura {
  opacity: .2;
  background: linear-gradient(180deg, transparent 0 46%, rgba(255,216,94,.28) 49%, rgba(183,155,255,.12) 50%, transparent 54%);
  transform: translate3d(0, -72%, 0);
  animation: motion-titulo-varredura 7.8s cubic-bezier(.2,.7,.2,1) infinite;
}

.motion-titulo-grao,
.motion-cinema-grao,
.motion-andar-grao {
  opacity: .12;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.027) 4px),
    url('../assets/grao.png');
  background-size: auto, 160px 160px;
  mix-blend-mode: screen;
  animation: motion-grao .34s steps(2, end) infinite;
}

.motion-titulo-particulas,
.motion-cinema-particulas,
.motion-andar-particulas,
.motion-impacto-particulas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.motion-titulo-particulas i,
.motion-cinema-particulas i,
.motion-andar-particulas i,
.motion-impacto-particulas i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(1px * var(--z));
  height: calc(9px * var(--z));
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(183,155,255,.68));
  opacity: .08;
  transform: translate3d(0, 12vh, 0);
  animation: motion-poeira var(--d) linear var(--a) infinite;
}

.titulo-cinematico.cinematica-pronta .titulo-kicker { animation: motion-texto-entra .64s var(--cinema-corte) both .08s; }
.titulo-cinematico.cinematica-pronta .marca-linha { animation: motion-marca-entra .9s var(--cinema-corte) both .14s; }
.titulo-cinematico.cinematica-pronta .titulo-chamada { animation: motion-texto-entra .76s var(--cinema-corte) both .3s; }
.titulo-cinematico.cinematica-pronta .titulo-resumo { animation: motion-texto-entra .68s var(--cinema-corte) both .42s; }
.titulo-cinematico.cinematica-pronta .menu-principal { animation: motion-texto-entra .68s var(--cinema-corte) both .54s; }
.titulo-cinematico.cinematica-pronta .menu-legal { animation: motion-texto-entra .62s var(--cinema-corte) both .68s; }
.titulo-cinematico.cinematica-pronta .painel-incidente {
  transform-origin: 100% 50%;
  animation: motion-painel-entra .96s var(--cinema-corte) both .36s;
}

.titulo-cinematico .menu-continuar {
  transform-style: preserve-3d;
  transition: transform .24s var(--cinema-impacto), box-shadow .24s ease, filter .2s ease;
}
.titulo-cinematico .menu-continuar:hover,
.titulo-cinematico .menu-continuar:focus-visible {
  transform: translate3d(0, -3px, 20px);
  box-shadow: 0 18px 50px rgba(255,216,94,.18), 0 0 0 1px rgba(255,255,255,.12);
}

/* Prólogo: montagem com câmera própria por quadro e corte entre cenas. */
.cinema-prologo > .miolo { perspective: 1200px; }
.cinema-prologo .cinema-montagem {
  grid-template-columns:minmax(0,1.72fr) minmax(150px,.78fr);
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:clamp(6px,.65vw,11px);
}
.cinema-prologo .cinema-quadro-a { grid-column:1;grid-row:1 / -1; }
.cinema-prologo .cinema-quadro-b { grid-column:2;grid-row:1; }
.cinema-prologo .cinema-quadro-c { grid-column:2;grid-row:2; }
.cinema-prologo .cinema-quadro-d { grid-column:2;grid-row:3; }
.cinema-prologo .cinema-quadro {
  border-color:var(--cinema-linha);
  box-shadow:inset 0 0 52px rgba(0,0,0,.5),0 18px 42px rgba(0,0,0,.34);
}
.cinema-prologo .cinema-quadro-a { border-color:rgba(183,155,255,.46); }
.cinema-prologo .cinema-quadro:not(.cinema-quadro-a) > div {
  left:clamp(10px,1vw,18px);right:clamp(10px,1vw,18px);bottom:clamp(9px,1vh,15px);
}
.cinema-prologo .cinema-quadro:not(.cinema-quadro-a) b { font-size:clamp(7px,.55vw,9px);margin-bottom:4px; }
.cinema-prologo .cinema-quadro:not(.cinema-quadro-a) p { font-size:clamp(9px,.68vw,12px);line-height:1.3; }
.motion-cinema-fx {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.motion-cinema-luz,
.motion-cinema-mira,
.motion-cinema-corte,
.motion-cinema-grao,
.motion-cinema-barras { position: absolute; inset: 0; }

.motion-cinema-luz {
  opacity: .22;
  background:
    radial-gradient(circle at calc(52% + var(--olhar-x, 0) * 3%) calc(28% + var(--olhar-y, 0) * 2%), rgba(223,211,255,.2), transparent 24%),
    linear-gradient(100deg, transparent 35%, rgba(183,155,255,.05), transparent 64%);
  mix-blend-mode: screen;
  animation: motion-cinema-luz 8s ease-in-out infinite alternate;
}

.motion-cinema-mira { opacity: .3; }
.motion-cinema-mira i {
  position: absolute;
  left: 50%; top: 50%;
  width: 18vmin; height: 18vmin;
  border: 1px solid rgba(183,155,255,.14);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(calc(.82 + var(--i, 0) * .24));
}
.motion-cinema-mira i:nth-child(2) { --i: 1; border-style: dashed; animation: motion-girar-mira 28s linear infinite; }
.motion-cinema-mira i:nth-child(3) { --i: 2; opacity: .34; animation: motion-girar-mira 19s linear reverse infinite; }

.motion-cinema-barras {
  z-index: 20;
  box-shadow: inset 0 clamp(18px,3.6vh,38px) 0 rgba(0,0,0,.84), inset 0 clamp(-38px,-3.6vh,-18px) 0 rgba(0,0,0,.84);
}

.motion-cinema-corte {
  z-index: 19;
  display: grid;
  place-items: center;
  opacity: 0;
  background: #05040a;
  transform: translate3d(-102%,0,0) skewX(-7deg);
}
.motion-cinema-corte span {
  color: rgba(240,235,255,.82);
  font: 700 clamp(10px,1vw,15px)/1 var(--fonte-codigo);
  letter-spacing: .24em;
  text-transform: uppercase;
  transform: skewX(7deg);
}
.cinema-prologo.cinema-em-corte .motion-cinema-corte {
  animation: motion-corte-cena .86s var(--cinema-corte) both;
}

.cinema-quadro { transform: translateZ(0); }
.cinema-quadro .cinema-plano {
  position: absolute;
  z-index: 0;
  inset: -5%;
  display: block;
  background-position: center;
  background-size: cover;
  filter: saturate(.9) contrast(1.08) brightness(.82);
  transform: scale(1.08) translate3d(0,0,0);
  will-change: transform, opacity;
}
.cinema-quadro::after { z-index: 1; }
.cinema-quadro > div { z-index: 2; }

.cinema-prologo.cinema-em-corte .cinema-quadro {
  animation: motion-quadro-entra .82s var(--cinema-corte) both;
}
.cinema-prologo.cinema-em-corte .cinema-quadro:nth-child(2) { animation-delay: .08s; }
.cinema-prologo.cinema-em-corte .cinema-quadro:nth-child(3) { animation-delay: .15s; }
.cinema-prologo.cinema-em-corte .cinema-quadro:nth-child(4) { animation-delay: .22s; }
.cinema-prologo.cinema-em-corte .cinema-quadro:nth-child(1) .cinema-plano { animation: motion-plano-a 9s ease-in-out both; }
.cinema-prologo.cinema-em-corte .cinema-quadro:nth-child(2) .cinema-plano { animation: motion-plano-b 8.4s ease-in-out both .08s; }
.cinema-prologo.cinema-em-corte .cinema-quadro:nth-child(3) .cinema-plano { animation: motion-plano-c 9.2s ease-in-out both .15s; }
.cinema-prologo.cinema-em-corte .cinema-quadro:nth-child(4) .cinema-plano { animation: motion-plano-d 8.8s ease-in-out both .22s; }

.cinema-prologo.cinema-em-corte .cinema-busto {
  animation: motion-busto-entra .88s var(--cinema-corte) both .18s;
}
.cinema-prologo.cinema-em-corte .cinema-busto-direita { animation-name: motion-busto-direita; }
.cinema-busto[data-ativo="nao"] { opacity: .56; filter: saturate(.66) brightness(.74); }
.cinema-busto[data-ativo="sim"] { opacity: 1; filter: drop-shadow(0 0 24px rgba(183,155,255,.16)); }
.cinema-busto[data-ativo="sim"] figcaption { border-color: rgba(255,216,94,.52); }
.cinema-busto[data-ativo="sim"]::before {
  content: '';
  position: absolute;
  inset: 18% 4% 4%;
  z-index: -1;
  opacity: .35;
  background: radial-gradient(ellipse at 50% 42%, rgba(183,155,255,.34), transparent 64%);
  animation: motion-foco-personagem 4.2s ease-in-out infinite alternate;
}

.cinema-prologo.cinema-em-corte .cinema-dialogo {
  animation: motion-dialogo-entra .72s var(--cinema-corte) both .28s;
}
.cinema-prologo.cinema-em-corte .cinema-dialogo::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 0 24%, rgba(183,155,255,.11) 48%, transparent 68%);
  transform: translate3d(-100%,0,0);
  animation: motion-dialogo-varrer 1.15s var(--cinema-corte) both .48s;
}

/* Entradas de andar: cada setor usa a mesma gramática e uma assinatura. */
.entrada-andar-cinematica > .miolo { perspective: 1200px; isolation: isolate; }
.motion-andar-fx {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.motion-andar-eco,
.motion-andar-eixo,
.motion-andar-diagrama,
.motion-andar-flash,
.motion-andar-grao { position: absolute; inset: 0; }

.motion-andar-eco {
  background: var(--entrada-fundo) center / cover no-repeat;
  opacity: .13;
  filter: saturate(.42) contrast(1.24) brightness(.58);
  transform: scale(1.12)
    translate3d(calc(var(--olhar-x, 0) * -7px), calc(var(--olhar-y, 0) * -5px), 0);
}
.motion-andar-eco-a {
  -webkit-mask-image: linear-gradient(90deg,#000,transparent 54%);
  mask-image: linear-gradient(90deg,#000,transparent 54%);
  animation: motion-andar-eco-a 3.6s var(--cinema-corte) both;
}
.motion-andar-eco-b {
  -webkit-mask-image: linear-gradient(90deg,transparent 46%,#000);
  mask-image: linear-gradient(90deg,transparent 46%,#000);
  animation: motion-andar-eco-b 3.6s var(--cinema-corte) both;
}

.motion-andar-eixo { opacity: .28; }
.motion-andar-eixo i {
  position: absolute;
  left: 50%; top: -12%;
  width: 1px; height: 124%;
  background: linear-gradient(180deg, transparent, rgba(183,155,255,.7), transparent);
  transform: rotate(calc((var(--i, 0) - 1) * 18deg));
  transform-origin: 50% 50%;
}
.motion-andar-eixo i:nth-child(2) { --i: 1; }
.motion-andar-eixo i:nth-child(3) { --i: 2; }

.motion-andar-diagrama {
  left: auto;
  top: 15%; right: 7%; bottom: auto;
  width: clamp(160px, 22vw, 350px);
  height: clamp(160px, 22vw, 350px);
  opacity: .5;
  border: 1px solid rgba(183,155,255,.18);
  border-radius: 50%;
  animation: motion-diagrama-entra 1.2s var(--cinema-corte) both .2s;
}
.motion-andar-diagrama i {
  position: absolute;
  inset: calc(9% * var(--i, 1));
  border: 1px dashed rgba(183,155,255,.2);
  border-radius: 50%;
  opacity: calc(1 - var(--i, 1) * .12);
  animation: motion-girar calc(16s + var(--i,1) * 4s) linear infinite;
}
.motion-andar-diagrama i:nth-child(1) { --i: 1; }
.motion-andar-diagrama i:nth-child(2) { --i: 2; animation-direction: reverse; }
.motion-andar-diagrama i:nth-child(3) { --i: 3; }
.motion-andar-diagrama i:nth-child(4) { --i: 4; animation-direction: reverse; }
.motion-andar-diagrama b {
  position: absolute;
  left: 50%; top: 50%; width: 9px; height: 9px;
  border-radius: 50%; background: var(--cinema-ambar);
  box-shadow: 0 0 28px rgba(255,216,94,.78);
  transform: translate(-50%,-50%);
  animation: motion-nucleo 1.3s ease-in-out infinite alternate;
}

.entrada-andar-cinematica[data-assinatura="servidores"] .motion-andar-diagrama,
.entrada-andar-cinematica[data-assinatura="fitas"] .motion-andar-diagrama { border-radius: 2px; transform: rotate(8deg); }
.entrada-andar-cinematica[data-assinatura="contadoria"] .motion-andar-diagrama i { border-style: solid; }
.entrada-andar-cinematica[data-assinatura="elos"] .motion-andar-diagrama { transform: rotate(45deg); border-radius: 18%; }
.entrada-andar-cinematica[data-assinatura="retencao"] .motion-andar-diagrama { border-color: rgba(255,103,91,.48); }
.entrada-andar-cinematica[data-assinatura="retencao"] .motion-andar-diagrama b { background:#ff675b; box-shadow:0 0 34px rgba(255,103,91,.84); }
.entrada-andar-cinematica[data-assinatura="profundo"] .motion-andar-diagrama { opacity:.28; transform:scale(1.38); }

.motion-andar-flash {
  z-index: 5;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(236,229,255,.72), transparent);
  transform: translate3d(-100%,0,0) skewX(-12deg);
  animation: motion-andar-flash 1.35s var(--cinema-corte) both .36s;
}
.entrada-andar-cinematica.cinematica-pronta .entrada-andar-cartela { animation: motion-cartela-andar .9s var(--cinema-corte) both .26s; }
.entrada-andar-cinematica.cinematica-pronta .entrada-andar-topo { animation: motion-texto-entra .62s var(--cinema-corte) both .08s; }
.entrada-andar-cinematica.cinematica-pronta .entrada-andar-seguir { animation: motion-texto-entra .62s var(--cinema-corte) both .8s; }

/* Consequência: impacto curto, não modal e semanticamente redundante. */
.motion-impacto {
  position: fixed;
  z-index: 94;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: rgba(1,4,8,.16);
  transition: opacity .28s ease;
}
.motion-impacto.ativo { opacity: 1; }
.motion-impacto::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 52%, rgba(224,211,255,.5), transparent 23%);
  transform: scale(.6);
}
.motion-impacto.ativo::before { animation: motion-impacto-pulso .8s var(--cinema-impacto) both; }
.motion-impacto-linhas { position:absolute; inset:0; }
.motion-impacto-linhas i {
  position:absolute; left:calc(11% + var(--i,0) * 19%); top:0;
  width:1px; height:100%; background:linear-gradient(180deg,transparent,rgba(183,155,255,.52),transparent);
  transform:translate3d(0,-100%,0);
}
.motion-impacto-linhas i:nth-child(1){--i:0}.motion-impacto-linhas i:nth-child(2){--i:1}.motion-impacto-linhas i:nth-child(3){--i:2}.motion-impacto-linhas i:nth-child(4){--i:3}.motion-impacto-linhas i:nth-child(5){--i:4}
.motion-impacto.ativo .motion-impacto-linhas i { animation:motion-impacto-linha .72s var(--cinema-corte) both calc(var(--i) * .045s); }
.motion-impacto-texto {
  position:absolute; left:50%; top:50%; width:min(84vw,760px);
  padding:22px 26px 24px; border-left:2px solid var(--cinema-ambar);
  background:linear-gradient(90deg,rgba(3,7,12,.94),rgba(3,7,12,.54));
  box-shadow:0 24px 70px rgba(0,0,0,.62);
  opacity:0; transform:translate3d(-50%,calc(-50% + 28px),0) scale(.98);
}
.motion-impacto.ativo .motion-impacto-texto { animation:motion-impacto-texto .64s var(--cinema-impacto) both .18s; }
.motion-impacto-texto span { display:block;margin-bottom:8px;color:var(--cinema-violeta);font:700 10px/1 var(--fonte-codigo);letter-spacing:.19em; }
.motion-impacto-texto strong { color:var(--cinema-gelo);font:700 clamp(20px,3vw,38px)/1.05 var(--fonte-interface); }
.motion-impacto-particulas i { opacity:.28; height:2px; width:clamp(18px,4vw,62px); }

@keyframes motion-titulo-camera { to { transform:scale(1.035) translate3d(calc(1% + var(--olhar-x,0) * -7px),calc(-.6% + var(--olhar-y,0) * -5px),0); } }
@keyframes motion-titulo-meio { to { transform:scale(1.09) translate3d(calc(-.6% + var(--olhar-x,0) * -15px),calc(.5% + var(--olhar-y,0) * -9px),0); } }
@keyframes motion-titulo-feixe { 0%,18%{transform:translate3d(-34%,0,0) rotate(-2deg);opacity:0}48%,66%{opacity:.34}100%{transform:translate3d(42%,0,0) rotate(-2deg);opacity:0} }
@keyframes motion-titulo-varredura { 0%,12%{transform:translate3d(0,-72%,0);opacity:0}38%,68%{opacity:.26}88%,100%{transform:translate3d(0,76%,0);opacity:0} }
@keyframes motion-grao { 0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-1.5%,1%,0)}50%{transform:translate3d(1%,-1.5%,0)}75%{transform:translate3d(.8%,1.2%,0)} }
@keyframes motion-poeira { 0%{opacity:0;transform:translate3d(0,14vh,0)}18%{opacity:calc(.08 * var(--z))}82%{opacity:calc(.15 * var(--z))}100%{opacity:0;transform:translate3d(calc(var(--olhar-x,0) * -12px),-18vh,0)} }
@keyframes motion-texto-entra { from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none} }
@keyframes motion-marca-entra { from{opacity:0;transform:translate3d(-20px,0,0) scale(.96)}to{opacity:1;transform:none} }
@keyframes motion-painel-entra { from{opacity:0;transform:translate3d(42px,0,-80px) rotateY(-5deg)}to{opacity:1;transform:none} }
@keyframes motion-cinema-luz { to{opacity:.42;transform:translate3d(calc(var(--olhar-x,0) * -12px),calc(var(--olhar-y,0) * -8px),0) scale(1.06)} }
@keyframes motion-girar-mira { to{transform:translate(-50%,-50%) scale(calc(.82 + var(--i,0) * .24)) rotate(360deg)} }
@keyframes motion-girar { to{transform:rotate(360deg)} }
@keyframes motion-corte-cena { 0%{opacity:0;transform:translate3d(-102%,0,0) skewX(-7deg)}32%,48%{opacity:.98;transform:translate3d(0,0,0) skewX(-7deg)}100%{opacity:0;transform:translate3d(104%,0,0) skewX(-7deg)} }
@keyframes motion-quadro-entra { from{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(-18px,0,0)}to{opacity:1;clip-path:inset(0);transform:none} }
@keyframes motion-plano-a { to{transform:scale(1.015) translate3d(calc(-1.4% + var(--olhar-x,0) * -3px),-.6%,0)} }
@keyframes motion-plano-b { to{transform:scale(1.02) translate3d(1.8%,-1.2%,0)} }
@keyframes motion-plano-c { to{transform:scale(1.018) translate3d(-1.5%,1.2%,0)} }
@keyframes motion-plano-d { to{transform:scale(1.025) translate3d(1.2%,.7%,0)} }
@keyframes motion-busto-entra { from{opacity:0;transform:translate3d(-34px,18px,0) scale(.96)}to{opacity:1;transform:none} }
@keyframes motion-busto-direita { from{opacity:0;transform:translate3d(34px,18px,0) scale(.96)}to{opacity:1;transform:none} }
@keyframes motion-foco-personagem { to{opacity:.62;transform:scale(1.08)} }
@keyframes motion-dialogo-entra { from{opacity:0;transform:translate3d(0,30px,0) scale(.985)}to{opacity:1;transform:none} }
@keyframes motion-dialogo-varrer { to{transform:translate3d(100%,0,0)} }
@keyframes motion-andar-eco-a { from{opacity:0;transform:scale(1.18) translate3d(-5%,1%,0)}to{opacity:.13;transform:scale(1.04) translate3d(0,0,0)} }
@keyframes motion-andar-eco-b { from{opacity:0;transform:scale(1.18) translate3d(5%,-1%,0)}to{opacity:.13;transform:scale(1.04) translate3d(0,0,0)} }
@keyframes motion-diagrama-entra { from{opacity:0;transform:scale(.62) rotate(-16deg)}to{opacity:.5;transform:none} }
@keyframes motion-nucleo { to{transform:translate(-50%,-50%) scale(1.5);opacity:.58} }
@keyframes motion-andar-flash { 0%,12%{opacity:0;transform:translate3d(-100%,0,0) skewX(-12deg)}42%{opacity:.78}100%{opacity:0;transform:translate3d(110%,0,0) skewX(-12deg)} }
@keyframes motion-cartela-andar { from{opacity:0;transform:translate3d(-38px,0,0) rotateY(4deg);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)} }
@keyframes motion-impacto-pulso { 0%{opacity:0;transform:scale(.6)}36%{opacity:.78}100%{opacity:0;transform:scale(1.5)} }
@keyframes motion-impacto-linha { to{transform:translate3d(0,100%,0)} }
@keyframes motion-impacto-texto { to{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)} }

/* Mobile é uma composição própria: todos os quatro quadros permanecem
   disponíveis, sem a faixa horizontal que fazia a história parecer um site. */
@media (max-width: 900px) {
  .tela.briefing-cinematico,
  .tela.briefing-cinematico > .miolo {
    height:100dvh;
    min-height:0;
  }
  .tela.briefing-cinematico > .miolo {
    grid-template-rows:auto auto auto auto auto auto;
    align-content:center;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .briefing-cinematico .briefing-comunicacoes {
    align-content:start;
    align-items:start;
    overflow:visible;
    scrollbar-gutter:auto;
  }
  .motion-titulo-fundo { opacity:.14; }
  .motion-titulo-meio { display:none; }
  .titulo-cinematico.cinematica-pronta .painel-incidente { animation-name:motion-texto-entra; }

  .cinema-prologo .cinema-montagem {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:minmax(0,1.45fr) minmax(0,.8fr) !important;
    gap:5px !important;
    height:auto !important;
    overflow:hidden !important;
    scroll-snap-type:none !important;
  }
  .cinema-prologo .cinema-quadro,
  .cinema-prologo .cinema-quadro-a,
  .cinema-prologo .cinema-quadro-b,
  .cinema-prologo .cinema-quadro-c,
  .cinema-prologo .cinema-quadro-d {
    width:auto !important;height:auto !important;min-height:0;grid-column:auto;grid-row:auto !important;flex:none;
  }
  .cinema-prologo .cinema-quadro-a { grid-column:1 / -1;grid-row:1 !important; }
  .cinema-prologo .cinema-quadro > div { left:10px;right:10px;bottom:8px; }
  .cinema-prologo .cinema-quadro:not(.cinema-quadro-a) p { font-size:clamp(8px,2.15vw,11px);line-height:1.25; }
  .cinema-prologo .cinema-quadro:not(.cinema-quadro-a) b { font-size:7px;margin-bottom:3px; }
  .motion-cinema-barras { box-shadow:inset 0 18px 0 rgba(0,0,0,.78),inset 0 -18px 0 rgba(0,0,0,.78); }
  .motion-cinema-mira { display:none; }
  .motion-andar-diagrama { right:-8%;top:19%;opacity:.32; }
  .motion-impacto-texto { width:calc(100vw - 32px);padding:18px; }
  .cinema-prologo .cinema-dialogo { overflow-x:hidden !important; }
  .cinema-prologo .cinema-comandos > * { min-width:0; }
}

/* No celular em pé, o dossiê funciona como HUD no plano superior e o menu
   fica ancorado no rodapé. Assim a fotografia continua respirando entre os
   dois blocos e nenhuma informação ou ação depende de rolagem. */
@media (max-width: 760px) and (orientation: portrait) {
  .titulo-cinematico > .miolo {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding:
      max(10px, env(safe-area-inset-top))
      16px
      max(12px, env(safe-area-inset-bottom));
  }

  .titulo-cinematico .titulo-conteudo {
    margin-top: 0;
  }

  .titulo-cinematico .painel-incidente {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 16px;
    left: 16px;
    width: auto;
    margin: 0;
    padding: 9px 11px 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 5px 10px;
  }

  .titulo-cinematico .painel-incidente .painel-rotulo {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 7.5px;
  }
  .titulo-cinematico .painel-incidente > strong {
    display: block;
    grid-column: 1;
    font-size: 22px;
  }
  .titulo-cinematico .painel-incidente > p:not(.painel-rotulo) {
    display: block;
    grid-column: 2;
    margin: 0;
    font-size: 8px;
    line-height: 1.2;
  }
  .titulo-cinematico .painel-incidente .menu-progresso {
    grid-column: 1 / -1;
    width: 100%;
    height: 3px;
    margin: 0;
  }
  .titulo-cinematico .painel-incidente .sinal {
    display: flex;
    min-width: 0;
    margin: 0;
    gap: 5px;
    font-size: 8px;
    line-height: 1.25;
  }
  .titulo-cinematico .painel-incidente .sinal i { flex: 0 0 4px; }
  .titulo-cinematico .painel-incidente small {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-column: 1 / -1;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    margin: 0;
    font-size: 8px;
    line-height: 1.25;
  }
  .titulo-cinematico .painel-incidente small b {
    display: block;
    margin: 0;
    font-size: 7px;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .titulo-cinematico .titulo-conteudo { padding: 14px; }
  .titulo-cinematico .titulo-kicker { margin-bottom: 9px !important; }
  .titulo-cinematico .marca-linha { gap: 7px; }
  .titulo-cinematico .marca { font-size: clamp(58px, 20vw, 76px); }
  .titulo-cinematico .episodio { padding-block: 5px; font-size: 8px; }
  .titulo-cinematico .lema { margin-bottom: 7px; font-size: 9px; line-height: 1.35; }
  .titulo-cinematico .titulo-chamada {
    margin-bottom: 7px !important;
    font-size: clamp(19px, 5.7vw, 24px) !important;
    line-height: 1.08;
  }
  .titulo-cinematico .titulo-resumo {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.38;
  }
  .titulo-cinematico .menu-principal { margin-top: 8px; gap: 6px; }
  .titulo-cinematico .menu-continuar { min-height: 54px; }
  .titulo-cinematico .menu-secundario {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .titulo-cinematico .menu-secundario:has(#t-novo) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .titulo-cinematico .menu-secundario > :last-child:nth-child(odd) { grid-column: auto; }
  .titulo-cinematico .menu-secundario .botao-fraco {
    min-height: 44px;
    padding-inline: 3px;
    font-size: 7.5px;
    letter-spacing: .015em;
  }
  .titulo-cinematico .menu-legal {
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 7px !important;
    font-size: 7.5px;
  }
}

/* Altura curta pede edição tipográfica, não supressão de contexto. */
@media (max-height: 760px) and (min-width: 761px) {
  .titulo-cinematico .titulo-resumo {
    display: block;
    margin-bottom: 9px;
    font-size: 11.5px;
    line-height: 1.35;
  }
}

@media (max-height: 500px) and (min-width: 600px) {
  .titulo-cinematico .lema {
    display: block;
    margin-bottom: 3px;
    font-size: 8px;
    line-height: 1.2;
  }
  .titulo-cinematico .titulo-resumo {
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.2;
  }
  .titulo-cinematico .menu-principal { margin-top: 5px; }
}

@media (max-width: 520px) {
  .cinema-prologo .cinema-montagem {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  }
  .cinema-prologo .cinema-quadro-a,
  .cinema-prologo .cinema-quadro-b,
  .cinema-prologo .cinema-quadro-c,
  .cinema-prologo .cinema-quadro-d { grid-column:auto;grid-row:auto; }
  .cinema-prologo .cinema-quadro > div { left:8px;right:8px;bottom:7px; }
  .cinema-prologo .cinema-quadro p { font-size:clamp(7.6px,2.35vw,10px) !important; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .cinema-prologo .cinema-montagem { grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-template-rows:1fr !important; }
  .cinema-prologo .cinema-quadro-a { grid-column:auto;grid-row:auto !important; }
  .cinema-prologo .cinema-quadro p { font-size:8px !important;line-height:1.2 !important; }
  .cinema-prologo .cinema-quadro b { font-size:6px !important; }
  .motion-cinema-barras { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-titulo-fx,
  .motion-cinema-fx,
  .motion-andar-fx,
  .motion-impacto { display:none !important; }
  .titulo-cinematico *,
  .cinema-prologo *,
  .entrada-andar-cinematica * { animation:none !important;transition-duration:.01ms !important; }
  .cinema-quadro .cinema-plano { transform:none; }
  .cinema-busto { opacity:1 !important;filter:none !important; }
}

html[data-movimento="reduzido"] .motion-titulo-fx,
html[data-movimento="reduzido"] .motion-cinema-fx,
html[data-movimento="reduzido"] .motion-andar-fx,
html[data-movimento="reduzido"] .motion-impacto { display:none !important; }
html[data-movimento="reduzido"] .titulo-cinematico *,
html[data-movimento="reduzido"] .cinema-prologo *,
html[data-movimento="reduzido"] .entrada-andar-cinematica * { animation:none !important;transition-duration:.01ms !important; }

@media (prefers-reduced-data: reduce) {
  .motion-titulo-particulas,
  .motion-cinema-particulas,
  .motion-andar-particulas,
  .motion-titulo-grao,
  .motion-cinema-grao,
  .motion-andar-grao { display:none; }
}

html[data-efeitos="reduzido"] .motion-titulo-particulas,
html[data-efeitos="reduzido"] .motion-cinema-particulas,
html[data-efeitos="reduzido"] .motion-andar-particulas,
html[data-efeitos="reduzido"] .motion-titulo-grao,
html[data-efeitos="reduzido"] .motion-cinema-grao,
html[data-efeitos="reduzido"] .motion-andar-grao,
[data-cinematica-leve="sim"] :is(.motion-titulo-particulas,.motion-cinema-particulas,.motion-andar-particulas,.motion-titulo-grao,.motion-cinema-grao,.motion-andar-grao) { display:none; }