/* Fundo Q: ondas com a forma do Q (js/fundo-q.js). Linhas de 1 px na cor do texto, cada vez mais ténues para fora.
   Ficam atrás do conteúdo e à frente do fundo da secção; cortam-se nas bordas da secção. */
:where([data-q]) { position: relative; isolation: isolate; }
.q-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; color: #1D1D1F; }
[data-q-tema="escuro"] > .q-fundo { color: #F5F5F7; }
.q-mov { position: absolute; transform-origin: 50% 50%; will-change: transform; }   /* uma camada: o scroll só compõe */
.q-onda { display: block; overflow: visible; }
.q-onda path {
  fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke;
  opacity: 0; transform: scale(.9); transform-box: fill-box; transform-origin: center;
  transition: opacity .9s ease-out calc(var(--q-b, 0ms) + var(--i) * 70ms), transform 1.4s cubic-bezier(.22, 1, .36, 1) calc(var(--q-b, 0ms) + var(--i) * 70ms);
}
.q-on .q-onda path { opacity: var(--a); transform: none; }

/* História: as ondas abrem e apagam-se quando a tira se desfaz (a página põe --q-onda de 0 a 1 no palco) */
.hist-stage .q-mov { transform: scale(calc(1 + .45 * var(--q-onda, 0))); opacity: calc(1 - .85 * var(--q-onda, 0)); }

@media (prefers-reduced-motion: reduce) {
  .q-onda path { transform: none; transition: opacity .3s ease-out; }
  .hist-stage .q-mov { transform: none; opacity: 1; }
}