/* ═══════════════════════════════════════════════════════════════════
   fio-suave.css — o fio novo: um só por banda, nas margens, cosido à
   rolagem pelo `fio-suave.js`.

   Esta folha só decide o estado ANTES de o guião correr. O <svg> traz
   o fio desenhado inteiro; a guarda em linha no <head> marca `fio-js`
   no <html> e aqui esconde-se o que ainda não foi cosido, para o fio não
   aparecer inteiro e depois recolher. Se o guião não tiver corrido quando
   o HTML acaba de ser lido, a mesma guarda tira o `fio-js` e o fio fica
   inteiro: um enfeite que depende de JavaScript degrada para o desenho,
   não para um buraco.
   ═══════════════════════════════════════════════════════════════════ */
.fio-js .fio-suave .fio-mascara { stroke-dashoffset: var(--len); }

/* Movimento reduzido: inteiro e quieto. O fio não desaparece — deixa de
   se mexer. */
@media (prefers-reduced-motion: reduce) {
  .fio-js .fio-suave .fio-mascara { stroke-dashoffset: 0 !important; }
}