/**
 * @fileoverview The fixed backdrop layer (round S2b, 02/11/2026). Drawn by scripts/backdrop.js;
 * this file holds its place, its opacities and the colours of the washes.
 *
 * @remarks
 * Recipe taken from YoSoySanas rework (paper.module.css there): the layer is fixed and paints the
 * ground itself, washes are big blurred circles at very low opacity, and the line drawing sits at
 * about a tenth of opacity so text over it keeps its contrast. Colours come only from tokens.css.
 */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); color: var(--fg); pointer-events: none; }
.backdrop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.backdrop .lines { opacity: .11; }
.backdrop .section { opacity: .2; }
.backdrop .accent-lines { opacity: .22; color: var(--accent); }
html[data-bg]:not([data-bg="none"]) body { background: transparent; }

.washes { position: absolute; inset: 0; }
.wash { position: absolute; width: 70vmax; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; filter: blur(40px); opacity: .14; }
/* Tuned by eye on 02/11: at .14 the violet wash read as a lavender disc, not as a tint. */
.wash.w1 { background: var(--l1); opacity: .07; }
.wash.w2 { background: var(--chalk); opacity: .7; }
.wash.w3 { background: var(--l1-pale); opacity: .2; }
[data-bg="network"] .lines { opacity: .17; }

/* Live (idea): one wash on each core, breathing 120 degrees apart, one cycle in 24 s. Tints of the
   accent only: grey washes read as stains. */
[data-bg="live"] .wash { width: 36vmax; }
[data-bg="live"] .wash.w1 { background: var(--l1); animation: breathe 24s ease-in-out infinite; }
[data-bg="live"] .wash.w2 { background: var(--l1-pale); animation: breathe 24s ease-in-out -8s infinite; }
[data-bg="live"] .wash.w3 { background: var(--l1-ink); animation: breathe 24s ease-in-out -16s infinite; }
@keyframes breathe { 0%, 100% { opacity: .02; } 50% { opacity: .11; } }

/* Control room: the washes go darker so they do not read as fog. */
[data-dir="control"] .wash.w2 { background: var(--carbon-raised); }

/* Flow direction (round S2c idea): the three phases inside the backdrop, entering the cable. */
.backdrop .flow { opacity: .6; }
.flow-drift { animation: flow-drift 8s linear infinite; }
@keyframes flow-drift { from { transform: translateX(-240px); } to { transform: translateX(0); } }
@supports (animation-timeline: scroll()) {
  .backdrop .flow { animation: flow-fade linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  @keyframes flow-fade { from { opacity: .6; } to { opacity: .18; } }
}

@media (prefers-reduced-motion: reduce) {
  [data-bg="live"] .wash, .flow-drift { animation: none; }
}