/* ============================================================================
   ~grec — A ABERTURA COMO PALCO (rodada 5b, GREC-0035)
   Só na home (gerar.py inclui este arquivo apenas em escrever("/", …)).

   Propósito: a câmera entra na gravura da ponte por profundidade, o pêndulo do
   metrônomo vive (bate mesmo em repouso, e se abre em compasso largo enquanto a
   cena avança), o nome cresce em escala de tela entre os planos, e a cena se
   dissolve em tinta — com uma borda vermelha emissiva — revelando a trajetória.

   Estado final como padrão (skill atlas-tecnicas §5): a marcação abaixo, SEM
   nenhuma regra deste arquivo, já é a composição inteira (fundo, ponte, nome no
   lugar, metrônomo com a pose clássica) — exatamente o que a rodada 5 entregava.
   O drama de palco (perspectiva, pin de ~300vh, dissolução) só liga dentro de
   @media (prefers-reduced-motion: no-preference) e (min-width: 761px) e
   @supports (animation-timeline: view()) — fora dali (celular, movimento
   reduzido, impressão, Firefox sem animation-timeline, sem JavaScript) o
   visitante vê a MESMA marcação parada, sem nada escondido (GREC-0035). O único
   traço que roda em toda parte é o tique leve do pêndulo — ele é barato
   (transform só) e é o que faz "o metrônomo viver" também no celular.

   Fonte da receita: atlas-tecnicas familias/imagem-3d.md (câmera por
   profundidade — aqui, sem Depth Anything, com camadas + perspectiva CSS, como
   a própria receita aceita: "translate3d já lê como profundidade"),
   tipografia-variavel-cinetica.md (peso/tracking do nome via animation-timeline
   + @property, molde tipografia-variavel.html) e shader-transicao.md
   (dissolução por ruído com borda emissiva — aqui em canvas 2D, não WebGL: é o
   degrau mais leve que ainda entrega o efeito, com fallback só-CSS por baixo). */

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
/* registrada para o abertura.js poder LER o número resolvido por
   getComputedStyle (variável não registrada devolve o texto do calc(), não o
   valor — --nome e --amp não precisam disso, só são lidas pelo próprio CSS). */
@property --sai { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ------------------------------------------------- CARREGAMENTO (correção de
   26/09): o palco inteiro nasce invisível e só aparece quando o script inline
   (gerar.py, logo após a marcação) confirma que as imagens da cena (fundo,
   meio, corpo — a única coisa que depende de rede aqui; o SVG do pêndulo é
   instantâneo) já foram DECODIFICADAS (img.decode()) — sem isso, o pêndulo
   aparecia sozinho no branco antes da gravura chegar. `.pronto` é posto pelo
   próprio script, com um `setTimeout` de segurança (rede que nunca termina) e
   um `<noscript>` que força a visibilidade sem JavaScript nenhum — nenhum
   destes é o `.abertura__palco` (que é `display:contents` em repouso e não
   tem caixa própria para receber opacidade): o alvo é a `<section>` inteira. */
#inicio { opacity: 0; }
#inicio.pronto { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  #inicio { transition: opacity .4s ease; }
}
@media (prefers-reduced-motion: reduce) {
  /* mesma espera pelo .pronto (ver o texto acima) — só sem a transição animada */
  #inicio { transition: none; }
}
@media print { #inicio { opacity: 1 !important; } }

/* -------------------------------------------------------- SEMPRE (toda tela)
   O pêndulo vive: bate um tique leve mesmo sem a cena de palco (celular,
   Firefox sem animation-timeline, ou desktop antes/depois do pin). --amp vem
   de 1 por padrão (±7°); o bloco de palco, mais abaixo, sobe --amp com --p. */
.abertura__palco { display: contents; }
.abertura__objeto { aspect-ratio: 760 / 1143; }
.abertura__corpo { position: absolute; inset: 0; margin: 0; }
.abertura__corpo img { width: 100%; height: 100%; object-fit: contain; }
/* O pêndulo é SVG, desenhado no traço (rodada 5b, correção de 26/09 — o recorte
   por máscara do corpo deixava uma cicatriz borrada nos ângulos largos do
   balanço; o corpo agora é uma placa limpa gerada pelo Codex, sem o braço).
   O pivô (41,18%/64,74%) é o parafuso do eixo desenhado no corpo. */
.abertura__pendulo-svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform-origin: 41.18% 64.74%; overflow: visible; }
.abertura__neblina, .abertura__luz, .abertura__tinta, .abertura__veu-fim, .abertura__veu { position: absolute; inset: 0; margin: 0; pointer-events: none; opacity: 0; }
.abertura__tinta { z-index: 5; }
/* o traço do pêndulo é tinta + vermelho fixos (como as gravuras); no escuro,
   o mesmo giro de cor que já se aplica às gravuras (.arte img) — inverte e
   volta a hue-rotate, o que devolve o vermelho a vermelho. */
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .abertura__pendulo-svg { filter: invert(1) hue-rotate(180deg); } }
:root[data-tema="escuro"] .abertura__pendulo-svg { filter: invert(1) hue-rotate(180deg); }

@keyframes grec-tique {
  from { transform: rotate(calc(var(--amp, 1) * -7deg)); }
  to   { transform: rotate(calc(var(--amp, 1) * 7deg)); }
}
@media (prefers-reduced-motion: no-preference) {
  .abertura__pendulo-svg { animation: grec-tique 1.28s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce), print {
  .abertura__pendulo-svg { animation: none !important; transform: none !important; }
}

/* --------------------------------------------------- O PALCO (desktop, com
   movimento e com animation-timeline: view() — GREC-0035 §pisos). Sem isso,
   nada muda: a marcação acima já é a página inteira. */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .abertura {
      display: block; overflow: clip; min-height: 0;
      height: 300vh;
      --nome: clamp(0, (var(--p) - .24) / .26, 1);
      --sai:  clamp(0, (var(--p) - .8) / .2, 1);
      --amp:  calc(1 + var(--p) * 3.4);
      animation: grec-avanca linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 100%;
    }
    @keyframes grec-avanca { from { --p: 0; } to { --p: 1; } }

    .abertura__palco {
      display: block; position: sticky; top: 0; height: 100svh; overflow: clip;
      perspective: 1400px; perspective-origin: 50% 42%;
    }

    /* a cena recebe a câmera: fundo quase parado (mais longe), a ponte cresce
       e desliza para o lado — a mesma leitura de profundidade que a receita
       "imagem-3d" descreve com translate3d, só que com perspective real e
       amplitude de cinema, não de contido. */
    /* a margem de 5% (a zona calma) fecha suavemente com --p — em vez de
       saltar assim que a consulta liga, para o repouso (--p:0) ficar IDÊNTICO
       à composição clássica, e só a rolagem abrir o palco. */
    .abertura__cena { inset: 0 0 0 calc(5% - var(--p) * 5%); }
    .abertura__fundo {
      transform: translateZ(calc(var(--p) * -140px)) scale(calc(1 + var(--p) * .12));
    }
    .abertura__meio {
      transform:
        translate3d(calc(var(--par-x, 0) * 6px + var(--p) * -6vw), calc(var(--par-y, 0) * -10px + var(--p) * 4vh), 0)
        translateZ(calc(var(--p) * 90px))
        scale(calc(1 + var(--p) * .62));
    }
    /* o véu da zona calma (correção de 26/09): o ::before de sempre vive no
       stacking context de .abertura; .abertura__palco (sticky) cria o SEU
       PRÓPRIO stacking context, e um ::before de fora não consegue mais ficar
       "entre" a cena e o texto que estão AMBOS dentro do palco — o resultado
       medido foi o véu branco cobrindo o texto inteiro (nome e olho saíam
       cinza-claro, ilegíveis, mesmo em --p:0). Solução: um véu de verdade
       DENTRO do palco (.abertura__veu, mesmo degradê, ver grec.css para a
       variante escura replicada logo abaixo), e o ::before de fora desligado
       enquanto o palco avançado estiver ativo. */
    .abertura::before { display: none; }
    .abertura__veu {
      z-index: 2;
      background: linear-gradient(to right, rgba(255,255,255,.82) 0%, rgba(255,255,255,.82) 30%, rgba(255,255,255,0) 52%);
      opacity: calc(1 - var(--nome));
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-tema="claro"]) .abertura__veu { background: linear-gradient(to right, rgba(22,17,15,.82) 0%, rgba(22,17,15,.82) 30%, rgba(22,17,15,0) 52%); }
    }
    :root[data-tema="escuro"] .abertura__veu { background: linear-gradient(to right, rgba(22,17,15,.82) 0%, rgba(22,17,15,.82) 30%, rgba(22,17,15,0) 52%); }

    /* neblina de papel: a distância apaga a gravura por trás, como na receita
       de profundidade (a névoa cresce com a viagem da câmera). */
    .abertura__neblina {
      background: radial-gradient(120% 95% at 50% 42%, transparent 35%, color-mix(in oklab, var(--bg), transparent 25%) 100%);
      opacity: calc(var(--p) * .58);
    }
    /* faixa de luz que varre a cena, uma vez, entre o meio e o fim do palco */
    .abertura__luz {
      background: linear-gradient(115deg, transparent 38%, color-mix(in oklab, white, transparent 42%) 50%, transparent 62%);
      mix-blend-mode: overlay;
      transform: translateX(calc(var(--p) * 130vw - 60vw));
      opacity: calc(clamp(0, (var(--p) - .15) / .2, 1) * (1 - clamp(0, (var(--p) - .55) / .2, 1)) * .9);
    }

    /* o nome: cresce em escala de tela SEM sair do lugar onde nasce (nada de
       position:absolute nem de recentralizar — isso saltaria assim que a
       consulta ligasse, mesmo em --p:0) e SEM ser cortado pela barra do topo:
       o scale() vai no <h1> (não no bloco inteiro), ancorado no seu próprio
       canto superior esquerdo (transform-origin: left top) — a primeira
       linha ("Giordano") fica onde já estava, só a segunda ("Cabral") cresce
       para baixo/direita. Em --p:0, scale(1) é EXATAMENTE a composição de
       sempre. O rótulo e o olho (texto pequeno) NÃO escalam — só desaparecem
       (rápido: sumidos bem antes da metade do crescimento do nome), porque
       são a legenda de um instante, não o que atravessa a cena; o nome é o
       único texto que "entra entre os planos" por cima da ponte. */
    .abertura__txt {
      transform: translateZ(calc(var(--p) * 40px));
      opacity: calc(1 - var(--sai));
      will-change: transform;
    }
    .abertura__txt .rotulo, .abertura__txt .olho { opacity: calc(1 - clamp(0, var(--nome) / .3, 1)); }
    .abertura h1 {
      transform-origin: left top;
      transform: scale(calc(1 + var(--nome) * .5));   /* 1,5x no máximo: grande, não brutal (Giordano, 27/09) */
      font-variation-settings: 'wght' calc(700 - var(--nome) * 200);   /* afina ao crescer */
      letter-spacing: -0.04em;
    }

    /* o metrônomo: SÓ transform/opacity mudam — a âncora (right/bottom/width)
       continua a de sempre, então em --p:0 o transform abaixo se reduz ao
       original (translate3d do parallax, sem translateZ nem escala) e o
       "vir em direção à câmera" é inteiramente coisa da rolagem. O pêndulo
       bate cada vez mais largo por --amp (lido pelo @keyframes de sempre). */
    .abertura__objeto {
      transform:
        translate3d(calc(var(--par-x, 0) * 16px - var(--p) * 20vw), calc(var(--par-y, 0) * -26px - var(--p) * 14vh), 0)
        translateZ(calc(var(--p) * 220px))
        scale(calc(1 + var(--p) * .85));
      opacity: calc(1 - var(--sai));
    }

    /* dissolução em tinta, borda vermelha emissiva (shader-transicao, degrau
       canvas 2D): a gravura se COBRE de tinta passando por um instante escuro
       com brasa vermelha na borda, e assenta no papel claro da PÁGINA
       (var(--bg) — a mesma cor de fundo que a trajetória usa logo depois),
       nunca num bloco preto sólido (correção de 26/09: a primeira versão
       assentava em tinta escura sólida, "parede preta"). Camadas, de baixo
       para cima: 1) o papel (var(--bg)), opacidade sobe com --sai — é o
       estado FINAL; 2) a tinta (escura), só de passagem, pico em --sai:0,5;
       3) a brasa vermelha, também só de passagem, mesmo pico. O canvas
       (abertura.js), quando roda, assume com ruído por célula em vez do
       degradê parabólico e desliga o ::before/::after (classe .tem-tinta). */
    .abertura__veu-fim {
      position: absolute; inset: 0; z-index: 4; pointer-events: none;
      background: var(--bg); opacity: var(--sai);
    }
    .abertura__veu-fim::before {
      content: ''; position: absolute; inset: 0;
      background: var(--ink-800);
      opacity: calc(4 * var(--sai) * (1 - var(--sai)));
    }
    .abertura__veu-fim::after {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(65% 60% at 50% 50%, var(--brand) 0%, transparent 72%);
      opacity: calc(4.6 * var(--sai) * (1 - var(--sai)));
    }
    .abertura__palco.tem-tinta .abertura__veu-fim::before,
    .abertura__palco.tem-tinta .abertura__veu-fim::after { opacity: 0 !important; }
    .abertura__tinta { opacity: 1; }
  }
}