/* ═══════════════════════════════════════════════════════════════════
   fio.css — o fio cose-se com o SCROLL, e não com um relógio.

   ═══ O QUE ESTAVA MAL ═══
   O fio de cada página é uma costura que atravessa a página inteira, e
   andava num relógio próprio: 22 a 44 segundos por volta, a começar
   quando a página carregava. Quem chegasse a meio da página apanhava-o
   num ponto qualquer — desenhado, meio desfeito, ou ainda por começar —
   e a costura não dizia nada sobre onde a pessoa estava. Um gesto que
   é sobre PERCORRER a página não pode ignorar quem a percorre.

   Agora o comprimento cosido é o SCROLL: o fio nasce no topo e fecha-se
   exactamente quando se chega ao fim. Rolar para trás desfá-lo. É o
   mesmo desenho e a mesma passada de 27px (20 na banda de 390) — só
   mudou quem lhe marca o compasso.

   ═══ SEM JAVASCRIPT ═══
   Faz-se com `animation-timeline: scroll()`, que corre no compositor:
   não há um `scroll` listener a pedir layout a cada roda do rato, e o
   fio acompanha mesmo com a página ocupada. Quem não o suportar fica
   com o relógio de antes, que continua declarado aqui em cima — não é
   degradação, é a versão anterior intacta.

   ═══ DE ONDE VÊM OS NÚMEROS ═══
   O `--len` é o comprimento real do percurso, medido no gerador (só há
   rectas, por isso é Pitágoras), e o `--pontos` é a passada. Os dois
   estavam ESCRITOS À MÃO no `style=` de cada `<path>`, com a animação
   colada — e um `style=` em linha ganha a qualquer folha, por isso
   nada aqui lhes pegava. O `gerar.mjs` passa-os agora a propriedades e
   deixa o comportamento para esta folha.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ A · O RELÓGIO, PARA QUEM NÃO TEM LINHA DE SCROLL ═══
   É o que o artboard trazia em linha, palavra por palavra. */
.drawPage {
  animation: drawPage var(--tempo, 22s) steps(var(--pontos, 100), end) infinite;
}

/* E o do rodapé: a folha do artboard animava-o com keyframes de números
   CLAVADOS (1345, 374, 368), um jogo por artboard. Bastava o percurso
   mudar de comprimento — e mudou, ao redesenhar os cinco móveis que
   traziam o fio de 1440 espremido num quadro de 366 por 15 — para a
   costura passar a coser um comprimento que já não era o dela. Aqui
   parte do `--len`, e deixa de haver números a manter. */
@keyframes coseEDescose {
  0%          { stroke-dashoffset: var(--len); }
  40%, 49.5%  { stroke-dashoffset: 0; }
  89.5%, 100% { stroke-dashoffset: calc(var(--len) * -1); }
}
.palco .quadro .draw2,
.palco .quadro .draw3,
.palco .quadro .draw4 {
  animation: coseEDescose 10.5s steps(var(--pontos, 50), end) infinite;
}

/* ═══ B · E A LINHA DE SCROLL, PARA QUEM TEM ═══ */
@keyframes coseAoRolar {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: 0; }
}

/* O medidor do fim acende quando a costura lá chega — e agora «lá
   chega» quer dizer «a pessoa chegou ao fim da página». */
@keyframes medidorAoRolar {
  0%, 88%   { opacity: 0; }
  89%, 100% { opacity: 0.75; }
}

@supports (animation-timeline: scroll()) {
  .drawPage {
    animation-name: coseAoRolar;
    animation-duration: auto;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-timing-function: steps(var(--pontos, 100), end);
    animation-timeline: scroll(root block);
    animation-range: 0% 100%;
  }

  /* Três símbolos: a folha do artboard traz o traje destes numa regra
     já prefixada com `:is(.palco--largo, .barra--largo)`, que são dois,
     e entra depois desta. */
  .palco .quadro .gaugePg,
  .palco .quadro .gaugePage {
    animation-name: medidorAoRolar;
    animation-duration: auto;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: steps(1, end);
    animation-timeline: scroll(root block);
    animation-range: 0% 100%;
  }
}

/* ═══ B2 · O FIO DOS PASSOS — JÁ NÃO HÁ ═══
   Viveu aqui a regra que atava o carril do M7 («Segue o fio» da home
   móvel) à janela 60,1%–65,2% do `scroll(root block)`. Existia por uma
   razão só: havia DOIS fios à vista naquela secção — um carril próprio
   pelo eixo dos cinco ícones (x=39) e o fio da PÁGINA a descer pela
   direita (x=382) — e dois fios à vista não podem andar em relógios
   diferentes. Os números saíam do percurso do grande, e mudavam com ele.

   O carril foi-se: o fio da página passou a vir ele próprio ao eixo dos
   ícones e a atravessá-los. Um fio, um relógio — o `.drawPage` — e nada
   para sincronizar. A `provas/fio-passos.test.mjs` mudou com ele e
   agora mede o atravessamento no `d=` do fio da página. */

/* ═══ C · O FIO DO RODAPÉ ═══
   Esse não atravessa a página: vive no rodapé, e o que faz sentido é
   cosê-lo à medida que o RODAPÉ entra em cena. `view()` mede o
   elemento contra a janela, e não a página contra si própria. */
@supports (animation-timeline: view()) {
  .palco .quadro .draw2,
  .palco .quadro .draw3,
  .palco .quadro .draw4 {
    animation-name: coseAoRolar;
    animation-duration: auto;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: steps(var(--pontos, 50), end);
    animation-timeline: view(block);
    /* `entry` e nao `cover`: o rodape esta no FIM da pagina e nunca
       chega a passar pela janela, por isso um alcance medido em `cover`
       nunca se completava — a costura ficava a meio para sempre. Medido
       na politica de cookies, com a pagina no fundo. Com `entry` fecha
       quando o rodape acaba de entrar, que e quando se olha para ele. */
    animation-range: entry 10% entry 100%;
  }
}

/* ═══ QUEM PEDIU PARA NÃO HAVER MOVIMENTO ═══
   Fica com o percurso inteiro desenhado e quieto. O fio não é
   decoração dispensável — é o gesto da marca — por isso não desaparece:
   deixa de se mexer. */
@media (prefers-reduced-motion: reduce) {
  .drawPage,
  .palco .quadro .draw2,
  .palco .quadro .draw3,
  .palco .quadro .draw4 {
    animation: none;
    stroke-dashoffset: 0;
  }
  .palco .quadro .gaugePg,
  .palco .quadro .gaugePage {
    animation: none;
    opacity: 0.75;
  }
}