/* Background trials behind the opening, chosen by <html data-bg="a|b|c|d">; none = plain.
   a engineering grid · b data network · c pulsar waves behind the product window · d dark technical. */

.backdrop {
  display: none;
  position: absolute; inset: 0 0 auto; height: 64rem;
  overflow: hidden; pointer-events: none;
}
:root[data-bg] .backdrop { display: block; }

/* ---- (earlier trials a–d stay reachable with ?bg= for comparison) ---- */

/* ---- a: engineering paper — a dot every 24px, a faint line every 120px, page frame with registration marks ---- */

:root[data-bg="a"] .backdrop {
  background-image:
    radial-gradient(circle, var(--grid-dot) 1px, transparent 1.5px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px, 120px 120px, 120px 120px;
  background-position: 50% 11px, 50% 71px, 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 28%, #000 35%, transparent 90%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 28%, #000 35%, transparent 90%);
}
.frame { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.frame::before, .frame::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); opacity: 0.6;
  inset-inline-start: max(var(--gutter), (100% - var(--page-max)) / 2 - var(--space-6));
}
.frame::after { inset-inline-start: auto; inset-inline-end: max(var(--gutter), (100% - var(--page-max)) / 2 - var(--space-6)); }
.mark { position: absolute; width: 15px; height: 15px; top: calc(4.5rem - 7px); color: var(--muted); }
.mark svg { width: 100%; height: 100%; stroke-width: 1.2; }
.mark-start { inset-inline-start: calc(max(var(--gutter), (100% - var(--page-max)) / 2 - var(--space-6)) - 7px); }
.mark-end { inset-inline-end: calc(max(var(--gutter), (100% - var(--page-max)) / 2 - var(--space-6)) - 7px); }

/* ---- b: data network — nodes and links, a light pulse travelling along some links ---- */

:root[data-bg="b"] .backdrop {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
}
.net { width: 100%; height: 100%; }
.net-link { stroke: var(--net-line); stroke-width: 1; }
.net-node { fill: var(--net-node); stroke: none; }
.net-hub { fill: var(--accent); stroke: none; }
.net-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.35; }
.net-pulse {
  stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 18 102; stroke-dashoffset: 120;
  animation: travel var(--pulse-dur, 4s) linear var(--pulse-delay, 0s) infinite;
}
@keyframes travel { to { stroke-dashoffset: 0; } }

/* ---- c: pulsar waves — stacked signal lines rising behind the product window ---- */

/* The window moves down to give the stack room between the buttons and the window, like the landscape in Folio. */
:root[data-bg="c"] .product-stage { margin-block-start: 15rem; }
/* live: less room, so the window's top still shows on a 900px-tall screen. */
:root[data-bg="live"] .product-stage { margin-block-start: 10rem; }
:root[data-bg="live"] .waves { top: -9rem; }

/* ---- live: the breathing shader layer (living-bg.js), fading out before the waves ---- */

:root[data-bg="live"] .backdrop {
  height: 52rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 25%, transparent 92%);
}
.backdrop canvas { display: block; }
.waves {
  position: absolute; z-index: -1;
  inset-inline: -14%; top: -15rem; height: 32.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 30%, #000 70%, transparent 96%);
  mask-image: linear-gradient(to right, transparent 4%, #000 30%, #000 70%, transparent 96%);
}
.waves svg { width: 100%; height: 100%; }
/* stroke: none — the page-wide icon rule would otherwise outline every fill in ink. */
.wave-fill { fill: var(--bg); stroke: none; }
.wave { fill: none; stroke: var(--wave); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---- d: dark technical — grid from the top, a soft light above the headline, film grain ---- */

:root[data-bg="d"] .backdrop {
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, var(--spot), transparent 72%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 50% 0 / 64px 64px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 50% 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 95%);
}
:root[data-bg="d"] .backdrop::after {
  content: ""; position: absolute; inset: 0; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-bg="d"] .product-stage::before {
  content: ""; position: absolute; z-index: -1; inset: -8% -10% 40%;
  background: radial-gradient(closest-side, var(--glow), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .net-pulse { animation: none; stroke-dashoffset: 60; }
}