/* ============================================================================
   ~grec — Frente B, rodada 5b (GREC-0035): os capítulos como cartazes.
   Fonte da técnica: /Users/giordano/plugin-design/plugin/skills/atlas-tecnicas/
   famílias `shader-transicao`, `tipografia-variavel-cinetica`, `impressao-simulada`
   + `grao-textura`. Duas peças:
   1. .cartaz-fase — as três fases da trajetória (home), cartaz em tela cheia preso
      por fase, com transição por shader entre elas.
   2. .abre-pagina__arte — a gravura de capítulo das páginas internas ganha uma
      retícula de linha (gravura em metal) reativa ao cursor e à rolagem.
   Estado final como padrão: sem estas regras (ou com prefers-reduced-motion,
   sem WebGL, sem JavaScript) as duas peças são a imagem estática de sempre —
   nada nasce escondido, o canvas fica display:none até o JS confirmar que pode
   substituir a imagem por uma versão viva.
   ============================================================================ */

@property --cfp { syntax: '<number>'; inherits: true; initial-value: 1; }

/* -------------------------------------------------------------- 1. CARTAZ DE FASE
   Tela cheia de verdade: fora de `.pagina` (sem largura máxima, sem margem lateral),
   sangrando as quatro bordas. `top` negativo do tamanho da barra de navegação faz a cena
   deslizar por baixo dela (a barra tem z-index mais alto e fundo translúcido — GREC-0035
   pede o sangramento sob a barra, não uma faixa em branco no topo). */
.cartaz-fase { position: relative; width: 100%; height: 160vh; }
.cartaz-fase__cena {
  position: sticky; top: calc(-1 * var(--altura-topo));
  height: 100vh; height: calc(100svh + var(--altura-topo)); width: 100%; overflow: hidden;
  background: var(--canvas);   /* papel — nunca um vazio preto antes da textura chegar */
}
.cartaz-fase__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center; margin: 0;
}
.cartaz-fase__tela {
  position: absolute; inset: 0; width: 100%; height: 100%; display: none;
}
.cartaz-fase.tem-tela .cartaz-fase__tela { display: block; }
/* a <img> por baixo NÃO se esconde: o canvas cobre visualmente (mesmo tamanho, opaco), mas a
   imagem continua no DOM — o bloco inteiro já é aria-hidden porque o mesmo título e o mesmo ano
   existem, acessíveis, no .epoca__cab logo abaixo. */
.cartaz-fase__veu {
  position: absolute; inset: 0; pointer-events: none;
  opacity: clamp(0, calc(var(--cfp) * 3), 1);   /* o véu nasce com a gravura, nunca antes dela */
  background:
    linear-gradient(90deg, rgba(35,31,32,.86) 0%, rgba(35,31,32,.5) 34%, rgba(35,31,32,0) 60%),
    linear-gradient(0deg, rgba(35,31,32,.72) 0%, rgba(35,31,32,0) 34%);
}
.cartaz-fase__txt {
  position: absolute; left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 200px);
  bottom: clamp(28px, 8vh, 88px); z-index: 2; color: var(--canvas);
  opacity: clamp(0, calc(var(--cfp) * 6), 1);
}
.cartaz-fase__ano {
  margin: 0 0 .1em; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(2.75rem, 2rem + 6vw, 7.5rem); line-height: .86;
  letter-spacing: -0.01em; color: var(--brand-lift, var(--cin-red));
  font-variant-numeric: tabular-nums lining-nums;
}
.cartaz-fase__titulo {
  margin: 0; max-width: 16ch; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 1rem + 9.5vw, 11rem); line-height: .94;
  letter-spacing: var(--tr-tight);
}
/* sem JavaScript não há spans por letra: o título fica no peso estático que casca() já carrega
   (Inter Tight 700) — cheio, legível, sem depender do eixo variável. */
.cartaz-fase__titulo .w { display: inline-block; white-space: nowrap; }
.cartaz-fase__titulo .l {
  display: inline-block;
  --t: calc(var(--i, 0) / max(1, var(--n, 1) - 1));
  --e: clamp(0, calc((var(--cfp) - var(--t) * .55) / .3), 1);
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * .55em)) rotate(calc((1 - var(--e)) * -5deg));
  font-variation-settings: 'wght' calc(100 + var(--e) * 800);
  will-change: transform, opacity;
}
@supports not (font-variation-settings: 'wght' 400) {
  .cartaz-fase__titulo .l { font-variation-settings: normal; font-weight: 700; }
}

@media (max-width: 760px) {
  .cartaz-fase { height: 132vh; }
  .cartaz-fase__veu {
    background:
      linear-gradient(0deg, rgba(35,31,32,.9) 0%, rgba(35,31,32,.6) 40%, rgba(35,31,32,0) 66%);
  }
  .cartaz-fase__txt { right: clamp(20px, 6vw, 40px); bottom: 22px; }
  .cartaz-fase__titulo { max-width: 12ch; }
}

@media (prefers-reduced-motion: reduce) {
  .cartaz-fase { height: auto; min-height: 78vh; }
  .cartaz-fase__cena { position: relative; height: 78vh; height: 78svh; }
  .cartaz-fase__titulo .l { opacity: 1; transform: none; font-variation-settings: 'wght' 900; }
}

/* modo escuro: mesma regra que .arte já aplica ao <img>, estendida ao canvas quando ativo */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cartaz-fase__tela { filter: invert(1) hue-rotate(180deg); }
}
:root[data-tema="escuro"] .cartaz-fase__tela { filter: invert(1) hue-rotate(180deg); }

/* -------------------------------------------------------- 2. GRAVURA EM METAL (abre-página) */
.abre-pagina__arte { position: relative; }
.gravura-metal__tela {
  position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none;
}
.abre-pagina__arte.tem-tela .gravura-metal__tela { display: block; }
/* a <img> original (com o alt real) continua visível para quem lê por teclado ou leitor de tela;
   o canvas só cobre visualmente, opaco e do mesmo tamanho — nada de visibility:hidden aqui. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .gravura-metal__tela { filter: invert(1) hue-rotate(180deg); }
}
:root[data-tema="escuro"] .gravura-metal__tela { filter: invert(1) hue-rotate(180deg); }