/* ONBO · background options (2026-11-01). One fixed layer behind the page; the purple bands and
   the cards sit on top of it. Nothing shows until <html> carries data-bg="aurora|grain|dots|route". */

.p-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
html[data-bg] .p-bg { display: block; }
.p-bg__route { display: none; }

/* ---------- 1 · Аврора: two soft lime lights drifting very slowly (purple until 2026-11-01) */
html[data-bg="aurora"] .p-bg::before, html[data-bg="aurora"] .p-bg::after { content: ""; position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; }
html[data-bg="aurora"] .p-bg::before { top: -38vmax; left: -22vmax; background: radial-gradient(circle, rgba(198, 244, 50, .13), rgba(198, 244, 50, 0) 62%); animation: bg-drift-a 42s ease-in-out infinite alternate; }
html[data-bg="aurora"] .p-bg::after { bottom: -44vmax; right: -26vmax; background: radial-gradient(circle, rgba(120, 214, 60, .10), rgba(120, 214, 60, 0) 62%); animation: bg-drift-b 54s ease-in-out infinite alternate; }
@keyframes bg-drift-a { to { transform: translate(22vw, 18vh) scale(1.12); } }
@keyframes bg-drift-b { to { transform: translate(-18vw, -24vh) scale(1.08); } }

/* ---------- 2 · Зърно: a lit room; lighter at the top centre, a fine film grain over everything */
html[data-bg="grain"] .p-bg { background: radial-gradient(110% 80% at 50% -10%, #20234A 0%, #0D0E1A 46%, #06070B 80%), radial-gradient(60% 50% at 100% 100%, rgba(91, 76, 255, .12), transparent 70%); }
html[data-bg="grain"] .p-bg::after { content: ""; position: absolute; inset: -50%; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- 3 · Точки: a faint grid of dots that fades at the edges and drifts against the scroll */
html[data-bg="dots"] .p-bg { background:
  radial-gradient(circle, rgba(237, 239, 246, .22) 1.2px, transparent 1.6px) 0 calc(var(--page-p, 0) * -320px) / 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 55% 40%, #000 35%, transparent 92%); mask-image: radial-gradient(ellipse 90% 85% at 55% 40%, #000 35%, transparent 92%); }
html[data-bg="dots"] .p-bg::before { content: ""; position: absolute; top: -20vmax; right: -20vmax; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(circle, rgba(91, 76, 255, .18), transparent 62%); }

/* ---------- 4 · Линии: the route from the logo, as faint curves that draw themselves as you scroll */
html[data-bg="route"] .p-bg__route { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.p-bg__route path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p-bg__route .r-base { stroke: rgba(124, 108, 255, .16); stroke-width: 1.2; }
.p-bg__route .r-live { stroke: rgba(164, 156, 255, .5); stroke-width: 1.4; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--page-p, 0)); }
.p-bg__route .r-stop { fill: #06070B; stroke: rgba(164, 156, 255, .45); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.p-bg__route .r-end { fill: rgba(91, 76, 255, .55); }

@media (prefers-reduced-motion: reduce) {
  html[data-bg="aurora"] .p-bg::before, html[data-bg="aurora"] .p-bg::after { animation: none; }
  html[data-bg="dots"] .p-bg { background-position: 0 0; }
}