/* cena 05 — ordem 046 (24/09): dono único, a frente desta cena.
   A FORJA DO BRASÃO (pedido dele, 24/09: "extremamente mais agressiva e impactante"). O perfil do membro é um brasão monumental
   (41% da altura da tela, contra 11% da moldura anterior); as cinco estrelas CAEM na coroa com onda de choque na luz do capítulo;
   o número no coração conta as que acenderam; na quinta o brasão acende (clarão e onda que atravessa a tela); Confiança e
   Credibilidade são os tenentes: anéis que enchem e estouram em raios; os comentários descem como lacres carimbados.
   A cor é LUZ (cânone): a tocha do Cadastro (--conde) levada ao brilho vira a luz dos golpes; o ouro e a folha são a marca; a
   letra segue marfim. Os golpes são disparados por cena05.js (fila sobre o g da câmera) e animados pela Web Animations API. */

.plano[data-cena="5"] {
  /* a tocha do capítulo como luz: o mesmo matiz, levado ao claro (nunca a cor da letra) */
  --luz-viva: oklch(from var(--luz) .82 calc(c * 1.4) h);
  --luz-funda: oklch(from var(--luz) .5 calc(c * 1.2) h);
  --h: clamp(250px, 41vh, 470px);   /* a altura do brasão: o herói da cena */
  --ritmo: 1;
}
/* o título e o índice ficam na frente da luz do brasão (o clarão passa atrás da letra, nunca por cima) */
.plano[data-cena="5"] > .gancho, .plano[data-cena="5"] > .indice { position: relative; z-index: 3; }
.plano[data-cena="5"] > .capitulo { z-index: 3; }
/* o herói desta cena é o brasão: o título cede a escala e fica em DUAS linhas (as duas frases dele), nunca quatro (medido a 1440:
   4 linhas, 373 px de altura, empurravam o brasão para fora da tela) */
.plano[data-cena="5"] > .gancho { font-size: clamp(40px, 4.8vw, 92px); max-width: min(94vw, 1500px); }

/* ——— o palco: brasão no eixo, os dois tenentes nos flancos, os lacres embaixo ——— */
.plano[data-cena="5"] > .reputacao.forja { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "t1 escudo t2" "lacres lacres lacres";
  align-items: center; column-gap: clamp(14px, 2.6vw, 50px); row-gap: clamp(10px, 1.9vh, 22px); width: min(94vw, 1180px); max-width: none; }

/* ——— o brasão ——— */
.forja .escudo { grid-area: escudo; position: relative; height: var(--h); aspect-ratio: 400 / 470; container-type: size;
  /* a profundidade: o brasão vem do fundo e cresce para a câmera a cada estrela que cai (0,8 → 1) */
  transform: scale(calc(.8 + .2 * var(--n, 0))); transition: transform .42s cubic-bezier(.2, 1.5, .4, 1); }
.reduzido .forja .escudo { transform: none; transition: none; }
.brasao-rep { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.brasao-rep .rep-dentro-a { stop-color: var(--luz-funda); stop-opacity: .5; }
.brasao-rep .rep-dentro-b { stop-color: var(--noite); stop-opacity: .96; }
.brasao-rep .lampejo-0 { stop-color: var(--marfim); stop-opacity: 0; }
.brasao-rep .lampejo-1 { stop-color: var(--marfim); stop-opacity: .2; }
.brasao-rep .cera-a { stop-color: var(--marfim); }
.brasao-rep .cera-b { stop-color: var(--folha); }
.brasao-rep .cera-c { stop-color: var(--ouro); }
.brasao-rep .fio { fill: none; stroke: var(--ouro); stroke-width: 1.6; stroke-dasharray: 600; stroke-dashoffset: var(--traco, 600); }
.brasao-rep .corpo { fill: url(#rep-dentro); stroke: var(--folha); stroke-width: 2.2; stroke-opacity: .55; transition: stroke-opacity .5s var(--curva); }
.brasao-rep .luz-corpo { fill: none; stroke: var(--luz-viva); stroke-width: 7; opacity: 0; filter: blur(7px); transition: opacity .7s var(--curva); }
.brasao-rep .borda-dentro { fill: none; stroke: var(--ouro); stroke-width: 1; stroke-dasharray: 2 5; opacity: .6; }
.brasao-rep .lampejo { opacity: 0; }
.brasao-rep .retrato { fill: none; stroke: var(--traco-luz); stroke-width: 2.4; stroke-linecap: round; }
.brasao-rep .retrato .aro { stroke: var(--folha); stroke-width: 1.8; fill: rgba(5, 4, 8, .82); }
/* as cinco estrelas: soquetes apagados na coroa até o golpe; batida, a estrela é ouro maciço com a luz do capítulo em volta */
.brasao-rep .astro { fill: rgba(5, 4, 8, .9); stroke: var(--folha); stroke-width: .7; opacity: .3; transform-box: fill-box; transform-origin: center; }
.brasao-rep .astros g.bate .astro { fill: var(--folha); stroke: var(--marfim); stroke-width: .5; opacity: 1; filter: drop-shadow(0 0 3px var(--luz-viva)); }
.brasao-rep .onda { fill: none; stroke: var(--luz-viva); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.brasao-rep .onda.o2 { stroke: var(--marfim); stroke-width: .8; }
.brasao-rep .clarao-astro { fill: var(--luz-viva); opacity: 0; transform-box: fill-box; transform-origin: center; filter: blur(4px); }
/* acesa (a quinta estrela caiu): o brasão inteiro pega fogo de luz; o lampejo de marfim passa pelo escudo a cada 5,5 s */
.forja.acesa .brasao-rep .corpo { stroke-opacity: 1; }
.forja.acesa .brasao-rep .luz-corpo { opacity: .85; }
.forja.acesa .brasao-rep .lampejo { opacity: 1; animation: lampejo 5.5s cubic-bezier(.6, 0, .4, 1) 1.2s infinite; }
@keyframes lampejo { 0% { transform: translateX(0); } 30%, 100% { transform: translateX(520px); } }

/* o número: conta as estrelas que acenderam (cena05.js mede no DOM); é a nota do perfil, no coração do brasão */
.forja .nota { position: absolute; left: 0; right: 0; top: 53%; height: 37%; margin: 0; display: flex; align-items: center; justify-content: center; gap: 2.4cqh; }
.forja .nota-n { display: inline-block; min-width: .6em; font: 600 38cqh/1 var(--display); letter-spacing: -.03em; color: var(--folha);
  text-shadow: var(--halo), 0 0 34px color-mix(in srgb, var(--luz-viva) 70%, transparent); }
.forja .nota-estrela { width: 11cqh; height: 11cqh; margin-top: -12cqh; fill: var(--folha); opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 6px var(--luz-viva)); }
.forja.acesa .nota-estrela { opacity: 1; }

/* a luz atrás do brasão: halo que cresce com as estrelas, raios que giram depois de aceso, e os dois golpes da ignição */
.forja .luz-escudo { position: absolute; left: 50%; top: 47%; width: 0; height: 0; z-index: -1; pointer-events: none; }
.forja .luz-escudo i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.forja .halo { width: calc(var(--h) * 1.7); height: calc(var(--h) * 1.7); opacity: calc(.12 + .8 * var(--n, 0)); transition: opacity .35s var(--curva);
  background: radial-gradient(circle, color-mix(in srgb, var(--luz-viva) 42%, transparent) 0%, color-mix(in srgb, var(--luz-funda) 26%, transparent) 36%, transparent 68%); }
.forja .raios-fundo { width: calc(var(--h) * 3.1); height: calc(var(--h) * 3.1); opacity: 0; transition: opacity 1.2s var(--curva); will-change: transform;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 5deg, color-mix(in srgb, var(--luz-viva) 20%, transparent) 7.5deg, transparent 10deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 14%, transparent 60%); mask-image: radial-gradient(circle, #000 14%, transparent 60%);
  animation: rep-gira 90s linear infinite; animation-play-state: paused; }
.forja.acesa .raios-fundo { opacity: .8; animation-play-state: running; }
@keyframes rep-gira { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.forja .clarao { width: calc(var(--h) * 2.6); height: calc(var(--h) * 2.6); opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--marfim) 80%, transparent) 0%, color-mix(in srgb, var(--luz-viva) 45%, transparent) 20%, transparent 62%); }
.forja .choque { width: var(--h); height: var(--h); opacity: 0; border: 3px solid var(--luz-viva);
  box-shadow: 0 0 34px 4px var(--luz-viva), inset 0 0 34px color-mix(in srgb, var(--luz-viva) 70%, transparent); }
.forja .choque.c2 { border: 1.5px solid var(--marfim); box-shadow: 0 0 18px color-mix(in srgb, var(--marfim) 60%, transparent); }

/* ——— os tenentes: Confiança e Credibilidade, anéis que enchem sob pressão e estouram ——— */
.forja .tenente { display: grid; justify-items: center; row-gap: clamp(8px, 1.4vh, 14px); }
.forja .t1 { grid-area: t1; justify-self: end; }
.forja .t2 { grid-area: t2; justify-self: start; }
.anel-rep { width: clamp(160px, 23vh, 260px); height: auto; overflow: visible; }
.brasao-rep .anel-luz-a { stop-color: var(--luz-viva); stop-opacity: .55; }
.brasao-rep .anel-luz-b { stop-color: var(--luz-funda); stop-opacity: .3; }
.brasao-rep .anel-luz-c { stop-color: var(--luz-funda); stop-opacity: 0; }
.anel-rep .brilho-anel { fill: url(#rep-anel-luz); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s var(--curva); }
.anel-rep .trilho { fill: rgba(5, 4, 8, .78); stroke: rgba(239, 228, 204, .12); stroke-width: 12; }
.anel-rep .enche { fill: none; stroke: var(--folha); stroke-width: 12; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset calc(560ms * var(--ritmo)) cubic-bezier(.55, 0, .85, .35); }
.anel-rep .marcas line { stroke: var(--ouro); stroke-width: 2; opacity: .35; }
.anel-rep .raios { opacity: 0; transform-box: fill-box; transform-origin: center; }
.anel-rep .raios line { stroke: var(--luz-viva); stroke-width: 5; stroke-linecap: round; }
.anel-rep .raios line:nth-child(odd) { stroke: var(--marfim); stroke-width: 3; }
.anel-rep .icone { fill: none; stroke: rgba(239, 228, 204, .32); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.t2 .anel-rep .icone { stroke-width: 2.4; }
.forja .tenente > span { font: 600 clamp(22px, 2.1vw, 34px)/1.05 var(--display); letter-spacing: -.01em; color: var(--marfim); opacity: .4; transition: opacity .3s; }
.forja .tenente.enchendo .enche { stroke-dashoffset: 0; }
.forja .tenente.estourou .enche { filter: drop-shadow(0 0 7px var(--luz-viva)); }
.forja .tenente.estourou .marcas line { stroke: var(--folha); opacity: 1; }
.forja .tenente.estourou .raios { opacity: .4; }
.forja .tenente.estourou .brilho-anel { opacity: .9; }
.forja .tenente.estourou .icone { stroke: var(--marfim); }
.forja .t2.estourou .icone { fill: var(--folha); stroke: var(--marfim); }
.forja .tenente.nomeado > span { opacity: 1; }
.forja .tenente.estourou > span { opacity: 1; text-shadow: var(--halo), 0 0 24px var(--brilho); }

/* ——— os lacres: cada comentário desce carimbado pelo sinete do REINO (cera de ouro) ——— */
.forja .lacres { grid-area: lacres; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(16px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; width: 100%; max-width: none; }
.forja .lacre { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 10px 26px 10px 12px; text-align: left; opacity: .12;
  font: italic 400 clamp(18px, 1.35vw, 23px)/1.36 var(--display); color: var(--marfim);
  background: linear-gradient(160deg, rgba(14, 12, 20, .97), rgba(5, 4, 8, .95));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--folha) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--folha) 50%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); }
.forja .lacre.carimbado { opacity: 1; }
.forja .lacre > span::before { content: '\201C'; color: var(--folha); margin-right: .08em; }
.forja .lacre > span::after { content: '\201D'; color: var(--folha); margin-left: .04em; }
.sinete { width: clamp(58px, 4.6vw, 78px); height: auto; overflow: visible; transform: rotate(-8deg); }
.sinete .cera { fill: url(#rep-cera); stroke: var(--ouro); stroke-width: 7; stroke-dasharray: 4 3.2; }
.sinete .orla { fill: none; stroke: rgba(5, 4, 8, .4); stroke-width: 1.5; }
.sinete .coroa { fill: none; stroke: rgba(5, 4, 8, .75); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.sinete .po { fill: none; stroke: var(--luz-viva); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.forja .lacres .rotulo { grid-column: 1 / -1; justify-self: center; font-size: 18px; }

/* ——— o celular: o brasão em cima, os dois tenentes lado a lado, os lacres empilhados (nada abaixo de 16 px) ——— */
@media (max-width: 720px) {
  .plano[data-cena="5"] { --h: min(246px, 28vh); }
  .plano[data-cena="5"] > .reputacao.forja { grid-template-columns: 1fr 1fr; grid-template-areas: "escudo escudo" "t1 t2" "lacres lacres"; column-gap: 10px; row-gap: 10px; width: 100%; }
  .forja .escudo { justify-self: center; }
  .forja .t1, .forja .t2 { justify-self: center; }
  .anel-rep { width: 92px; }
  .forja .tenente { row-gap: 6px; }
  .forja .tenente > span { font-size: 20px; }
  .forja .lacres { grid-template-columns: 1fr; gap: 8px; }
  .forja .lacre { font-size: 17px; padding: 7px 22px 7px 8px; column-gap: 10px; }
  .sinete { width: 44px; }
}

/* ——— sem movimento: os estados chegam sem golpe nem giro ——— */
.reduzido .forja .raios-fundo, .reduzido .forja.acesa .brasao-rep .lampejo { animation: none; }
.reduzido .anel-rep .enche { transition: none; }