/* ==========================================================================
   corte.css: o corte entre as seções dos capítulos 1, 2 e 3 (/texto, /dentro, /aprende) do site IA explicada (FAROL)

   O mesmo arquivo, com o mesmo md5, nas três pastas (FAROL-0428): nenhum capítulo importa de outro nem de
   /comum-agentes. Porta o corte aprovado no capítulo 7 (FAROL-0414, FAROL-0423; a composição do ciclo 3 da crítica,
   com os achados A1 e A2 já aplicados): o header.ia-cena-cab de cada seção vira um espaço vazio de uma tela na rolagem,
   e o que ele tinha (o romano, o título em blocos, a frase de entrada) passa a uma .ia-cartela presa à tela inteira,
   que o corte.js põe no ar de uma vez quando esse espaço chega à linha de leitura e tira de uma vez quando ele a deixa:
   a cartela não rola, ela troca. Sem quadro intermediário e sem transição, igual com movimento reduzido; enquanto ela
   está no ar o palco some por baixo (html[data-corte]) e o motor troca o desenho de cena sem ninguém ver. A seção I não
   tem corte: a capa é a abertura dela (.cena--sem-corte: o cabeçalho fica só para o leitor de tela).

   Tudo aqui depende das classes que o corte.js põe (ia-cena-cab--corte, ia-cena-cab--no-ar, cena--sem-corte e
   html[data-corte]): sem o script, o cabeçalho fica em fluxo, como pagina.css o desenha. Carrega depois de pagina.css e
   de palco.css. Fora das classes ia-cartela e ia-cena-*, mexe só no que o corte pede: o ritmo em volta do corte
   (.cena + .cena, .passo + .passo, scroll-margin-top), o palco escondido sob a cartela e, a 390, a tira sem contexto de
   empilhamento (a cartela mora dentro dela).

   Composição (a do 7 depois do ciclo 3): fundo cheio alternando vermelho (II, IV, VI) e preto (III, V, VII); a régua do
   canon no alto, «IA explicada · Capítulo 1 ———— II de IV», cujo fio se enche com a rolagem (o único movimento, guiado
   pela rolagem, não pelo tempo); o romano muito grande sentado sobre o título, no terço de baixo, com o «de IV» pequeno
   na linha de base dele; o título nos blocos da gramática destes capítulos (uma palavra por bloco, fio branco: a cabeça
   de cena e o sumário da capa em escala de página) e a frase de entrada ao lado (1440) ou abaixo (390). Canon CIn-UFPE:
   nenhuma cor nova, nenhuma sombra, nenhum gradiente. Letras: 16 px no computador e 14 no celular em toda a cartela;
   as exceções são o «de N» (15 px a partir de 960 px, achado A1 da crítica do 7) e o fio da régua (4 px; 3 a 390).
   ========================================================================== */

/* --- o espaço do corte na rolagem: uma tela de altura. Quando a cartela sai, descendo, a primeira ficha da seção nova
       já está à vista, 16vh abaixo da linha de leitura, com o palco de volta no passo dela --- */
.ia-cena-cab--corte { height: 100vh; height: 100svh; margin-bottom: 16vh; }

/* a seção I: a capa é a abertura dela; o cabeçalho (romano, título, frase) fica só para o leitor de tela */
.cena--sem-corte > .ia-cena-cab {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* o corte é corte: enquanto a cartela de uma seção está no ar o corte.js liga html[data-corte] e o palco some por baixo
   dela, sem transição; volta de uma vez quando ela sai. A regra vai também nos filhos (canvas, seletor, casa, amostras),
   para nenhum deles se declarar visível por conta própria */
html[data-corte] .ia-miolo-grade > .palco-global,
html[data-corte] .ia-miolo-grade > .palco-global * { visibility: hidden; transition: none; }

/* --- a cartela: presa à tela inteira, por cima do cabeço (z 10) e do palco (z 2); fora do ar fica transparente, não
       escondida, para o título da seção continuar existindo para o leitor de tela. Linhas da grade: régua | vão livre |
       número | título (+ a frase ao lado, na coluna 2) --- */
.ia-cena-cab--corte > .ia-cartela {
  position: fixed; inset: 0; z-index: 11;
  opacity: 0; pointer-events: none; transition: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 36ch); grid-template-rows: auto minmax(0, 1fr) auto auto;
  column-gap: var(--ia-calha); row-gap: 0; align-items: end;
  padding: 36px var(--gut) 44px;
  background: var(--tinta); color: var(--farol-branco);
}
.ia-cena-cab--no-ar > .ia-cartela { opacity: 1; pointer-events: auto; }
.cena:nth-child(even) > .ia-cena-cab--corte > .ia-cartela { background: var(--acento); }

/* a régua do canon no alto (o corte.js a escreve): a borda que entra primeiro pela base da tela se lê como abertura de
   seção, e não como o romano cortado (crítica do corte do cap. 7, R1). Labels a 16 px (14 a 390): o piso das letras */
.ia-cena-regua { grid-column: 1 / -1; grid-row: 1; align-self: start; display: flex; align-items: center; gap: 16px; }
.ia-cena-regua .label { font-size: 16px; white-space: nowrap; }
.ia-cena-regua .rule { position: relative; flex: 1; height: 1px; background: var(--farol-branco); }
/* o único movimento da cartela: o fio da régua se preenche, em branco sobre a cor, com o avanço do espaço do corte pela
   linha de leitura (--ia-corte-p, que o corte.js escreve a cada quadro: 0 quando a cartela entra, 1 quando sai; subindo,
   esvazia). Guiado pela rolagem, não pelo tempo: sem transição, igual com movimento reduzido. É o sinal de que a rolagem
   continua enquanto a cartela está parada na tela (leitura a frio do ciclo 2 do 7: «travou»; crítica, R3; 4 px por A1) */
.ia-cena-regua .rule::after {
  content: ''; position: absolute; left: 0; top: -1.5px; width: 100%; height: 4px; background: var(--farol-branco);
  transform: scaleX(var(--ia-corte-p, 0)); transform-origin: 0 50%; transition: none;
}

/* o número: o romano e, na linha de base dele, à direita, o «de IV» em label (o corte.js põe os dois numa .ia-cena-numero
   antes do h2). Na cartela o romano perde o bloco vermelho da gramática (.ia-bloco--sujeito): é o numeral branco, muito
   grande, sentado sobre o título. O II solto no alto, longe do nome, lia como o símbolo de pausa (leitura a frio do
   ciclo 2 do 7; crítica, R1). O romano se limita também pela altura (46svh): a pilha régua + romano + título (+ frase a
   390) tem de caber na tela, senão o testar-peca acusa «texto não cabe» no elemento preso */
.ia-cena-numero { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: baseline; }
.ia-cartela .ia-cena-num {
  display: block; background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 0 -.04em; color: inherit;
  font-weight: 900; font-size: clamp(160px, min(30vw, 46vh), 440px); font-size: clamp(160px, min(30vw, 46svh), 440px);
  line-height: .8; letter-spacing: -.04em;
}
.ia-cartela .ia-cena-de { margin-left: 20px; white-space: nowrap; font-size: 16px; }   /* A1: ao lado do romano de 414 px; 16 px, o piso do computador (M8 da revisão do cap. 1) */

/* o título, nos blocos da gramática (uma palavra por bloco, fio de 1 px em branco); a frase ao lado, na coluna 2 */
.ia-cena-cab--corte h2 {
  grid-column: 1; grid-row: 4; margin: 4px 0 0;
  font-size: clamp(44px, 5.6vw, 84px); line-height: 1.5; letter-spacing: -.015em; max-width: 16ch;
}
.ia-cena-cab--corte .ia-cena-cab__frase {
  grid-column: 2; grid-row: 4; margin: 0; max-width: none; padding-bottom: .25em;
  font-size: clamp(18px, 1.6vw, 23px); font-weight: 500; line-height: 1.35;
}

/* --- 1440: o ritmo em volta do corte. O último passo da seção fica no palco tanto quanto os outros (48vh entre a última
       ficha e o espaço do corte, como entre duas fichas em pagina.css); a âncora do sumário pousa com a cartela no ar
       (o espaço dela a 40vh, sobre a linha de leitura); a seção I continua pousando sob o cabeço --- */
@media (min-width: 960px) {
  .cena + .cena { margin-top: 48vh; }
  .cena { scroll-margin-top: 40vh; }
  .cena--sem-corte { scroll-margin-top: calc(var(--ia-cab) + 24px); }
}

/* --- 390: a cartela numa coluna só (a frase abaixo do título); o romano a 46vw (179 px a 390) com o «de IV» ao lado --- */
@media (max-width: 959px) {
  /* a tira não pode criar contexto de empilhamento (pagina.css lhe dá z-index: 1): a cartela mora dentro dela e tem de
     passar por cima do palco (z 2) e do cabeço. Com z auto as fichas continuam passando sob o palco, em ordem de documento */
  .ia-tira { z-index: auto; }
  .ia-cena-cab--corte { margin-bottom: 8vh; margin-bottom: 8svh; }   /* quando a cartela sai, a primeira ficha já aparece sob o palco */
  .ia-cena-cab--corte > .ia-cartela {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    padding: 28px var(--gut) 36px;
  }
  .ia-cena-regua .label { font-size: 14px; }
  .ia-cena-regua .rule::after { height: 3px; top: -1px; }
  .ia-cartela .ia-cena-num { font-size: clamp(132px, 46vw, 200px); font-size: clamp(132px, min(46vw, 34svh), 200px); }
  .ia-cartela .ia-cena-de { margin-left: 12px; font-size: 14px; }
  .ia-cena-cab--corte h2 { grid-column: 1; grid-row: 4; margin-top: 6px; font-size: clamp(40px, 11vw, 56px); max-width: none; }
  .ia-cena-cab--corte .ia-cena-cab__frase { grid-column: 1; grid-row: 5; margin-top: 16px; padding-bottom: 0; font-size: 18px; }
  .cena { scroll-margin-top: 70vh; scroll-margin-top: 70svh; }   /* a âncora pousa com a cartela no ar */
  .cena--sem-corte { scroll-margin-top: calc(60vh + 12px); scroll-margin-top: calc(60svh + 12px); }
}
/* A2 (crítica do corte do 7, confirmada por duas leituras a frio): o vão entre fichas e o vão antes do corte, 18svh nos
   dois lugares (iguais, para o último passo ficar no palco tanto quanto os outros), para a cartela entrar com o pé da
   última ficha ainda na tira sob o palco. Só na janela em pé (ou deitada com mais de 500 px): no celular deitado o ritmo é
   o de 1440 (abaixo) */
@media (max-width: 959px) and (orientation: portrait), (max-width: 959px) and (orientation: landscape) and (min-height: 501px) {
  .cena + .cena { margin-top: 18vh; margin-top: 18svh; }
  .passo + .passo { margin-top: 18vh; margin-top: 18svh; }
}
/* celular deitado (844 × 390): no cap. 1, pagina.css põe o palco preso à direita com 100 svh e as fichas numa coluna
   estreita, com 48 svh entre fichas; o ritmo em volta do corte é o de 1440 (o mesmo vão antes do corte, 16 svh depois).
   A cartela usa a composição de 390, com o romano no piso de 132 px (34svh) */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 500px) {
  .ia-cena-cab--corte { margin-bottom: 16vh; margin-bottom: 16svh; }
  .cena + .cena { margin-top: 48vh; margin-top: 48svh; }
  .passo + .passo { margin-top: 48vh; margin-top: 48svh; }
  .cena { scroll-margin-top: 40vh; scroll-margin-top: 40svh; }
  .cena--sem-corte { scroll-margin-top: 24px; }
}

/* --- movimento reduzido: esta folha não anima nada; o fio da régua é guiado pela rolagem, não pelo tempo --- */