/* Live backgrounds (docs/backgrounds.md): the layer, the still version of each background, the
   CSS aurora, and the scrims that keep text readable. Shared by the app pages (app.css tokens)
   and the public home page (landing.css tokens). The layer is decorative: aria-hidden, no
   pointer events, never focusable, fixed size (no layout shift). */

.nn-bg {
  --bga: hsl(var(--primary, 221 83% 53%));
  --bgb: hsl(var(--background, 0 0% 100%));
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict;
  background: var(--bgb);
}
.lp .nn-bg { --bga: var(--brand); --bgb: var(--bg); }
.nn-bg[hidden], html[data-bg-pref="off"] .nn-bg { display: none; }
.nn-bg > * { position: absolute; inset: 0; }
.nn-bg__canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; }
.nn-bg--live .nn-bg__canvas { opacity: 1; }
.nn-bg__still { transition: opacity .7s ease; }
.nn-bg--live .nn-bg__still { opacity: 0; }

/* ---------------------------------------------------------------- stills (and the aurora) */

/* Aurora: three soft blobs of the theme colour; animated only in data-mode="animated". */
.nn-bg--aurora .nn-bg__still::before, .nn-bg--aurora .nn-bg__still::after {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(40% 45% at 20% 30%, color-mix(in srgb, var(--bga) 40%, transparent), transparent 75%),
    radial-gradient(35% 40% at 78% 22%, color-mix(in srgb, #38bdf8 30%, transparent), transparent 75%),
    radial-gradient(45% 45% at 60% 85%, color-mix(in srgb, #8b5cf6 24%, transparent), transparent 75%);
}
.nn-bg--aurora .nn-bg__still::after { opacity: .5; transform: rotate(180deg); }
.nn-bg--aurora[data-mode="animated"] .nn-bg__still::before { animation: nn-aurora-a 30s ease-in-out infinite alternate; }
.nn-bg--aurora[data-mode="animated"] .nn-bg__still::after { animation: nn-aurora-b 38s ease-in-out infinite alternate; }
.nn-bg--aurora .nn-bg__still { opacity: 1 !important; }
html[data-bg-paused] .nn-bg__still::before, html[data-bg-paused] .nn-bg__still::after { animation-play-state: paused !important; }
@keyframes nn-aurora-a { to { transform: translate3d(6%, 4%, 0) rotate(8deg) scale(1.08); } }
@keyframes nn-aurora-b { from { transform: rotate(180deg) translate3d(4%, -3%, 0); } to { transform: rotate(190deg) translate3d(-6%, 5%, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .nn-bg__still::before, .nn-bg__still::after { animation: none !important; } }

/* Film grain (an inline SVG noise tile, ~300 bytes). */
.nn-bg__grain { opacity: .07; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Voxel skyline: a daytime sky over blocky hills (stepped gradients, no image). */
.nn-bg--voxel .nn-bg__still {
  background:
    linear-gradient(to top, #4f8a3e 0 10%, transparent 10%) bottom / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, #5e9a48 0 48px, #6dab52 48px 96px) bottom / 100% 18% no-repeat,
    repeating-linear-gradient(90deg, #8fb3e8 0 64px, #9cbdee 64px 128px) bottom 18% left / 100% 10% no-repeat,
    linear-gradient(#6aa4f5, #cfe3ff);
}
html.dark .nn-bg--voxel .nn-bg__still, .lp-dark .nn-bg--voxel .nn-bg__still {
  background:
    linear-gradient(to top, #1d3320 0 10%, transparent 10%) bottom / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, #24402a 0 48px, #2a4a30 48px 96px) bottom / 100% 18% no-repeat,
    repeating-linear-gradient(90deg, #1e2b4d 0 64px, #22315a 64px 128px) bottom 18% left / 100% 10% no-repeat,
    radial-gradient(2px 2px at 20% 20%, #fff8, transparent), radial-gradient(2px 2px at 70% 12%, #fff8, transparent),
    linear-gradient(#0b1430, #1d2a55);
}

/* Particles: a soft glow. */
.nn-bg--particles .nn-bg__still { background: radial-gradient(50% 60% at 50% 40%, color-mix(in srgb, var(--bga) 16%, transparent), transparent); }

/* Server pulse: a calm night with a glow at the horizon. */
.nn-bg--pulse .nn-bg__still { background: radial-gradient(70% 50% at 50% 100%, color-mix(in srgb, var(--bga) 22%, transparent), transparent), linear-gradient(color-mix(in srgb, var(--bgb) 92%, #0b1430), var(--bgb)); }

/* Map shimmer: a blurred, faint patchwork. */
.nn-bg--map .nn-bg__still { opacity: .35; filter: blur(3px);
  background: repeating-conic-gradient(color-mix(in srgb, #5e9a48 30%, var(--bgb)) 0 25%, color-mix(in srgb, #8fb3e8 25%, var(--bgb)) 0 50%) 0 0 / 96px 96px; }

/* ---------------------------------------------------------------- scrims (readability) */

/* Behind content: the page colour over the scene, strong enough that text keeps its contrast
   over the brightest and darkest parts (tests/live-bg-contrast). */
.nn-bg__scrim { background: color-mix(in srgb, var(--bgb) 55%, transparent); }
.nn-bg[data-group="auth"] .nn-bg__scrim { background: color-mix(in srgb, var(--bgb) 40%, transparent); }
/* Member and data pages: subtle (low contrast) so content stays the focus. */
.nn-bg[data-group="member"], .nn-bg[data-group="market"], .nn-bg[data-group="map"], .nn-bg[data-group="tickets"], .nn-bg[data-group="chat"], .nn-bg[data-group="admin"] { --scrim: 72%; }
.nn-bg[data-group="member"] .nn-bg__scrim, .nn-bg[data-group="market"] .nn-bg__scrim, .nn-bg[data-group="map"] .nn-bg__scrim,
.nn-bg[data-group="tickets"] .nn-bg__scrim, .nn-bg[data-group="chat"] .nn-bg__scrim, .nn-bg[data-group="admin"] .nn-bg__scrim { background: color-mix(in srgb, var(--bgb) 72%, transparent); }

/* The public home page: the scene fills the first screen and fades into the page; the hero text
   sits on a soft scrim on its side. */
.nn-bg[data-group="public"] { position: absolute; bottom: auto; height: 100svh; min-height: 560px; }
.nn-bg[data-group="public"] .nn-bg__scrim {
  background:
    linear-gradient(to bottom, transparent 60%, var(--bgb) 100%),
    linear-gradient(to right, color-mix(in srgb, var(--bgb) 93%, transparent) 0, color-mix(in srgb, var(--bgb) 88%, transparent) 45%, color-mix(in srgb, var(--bgb) 30%, transparent) 100%);
}
@media (max-width: 768px) {
  /* Phones: the text runs the full width, so the whole scene sits under a strong scrim. */
  .nn-bg[data-group="public"] .nn-bg__scrim { background: linear-gradient(to bottom, color-mix(in srgb, var(--bgb) 88%, transparent), color-mix(in srgb, var(--bgb) 92%, transparent) 60%, var(--bgb)); }
}

/* ---------------------------------------------------------------- accents and debug */

.nn-bg-accent { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.nn-bg-accent--glow { background: radial-gradient(40% 35% at 50% 35%, color-mix(in srgb, var(--bga, #2563eb) 30%, transparent), transparent 70%); animation: nn-accent-glow 3s ease-out forwards; }
@keyframes nn-accent-glow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.nn-bg-debug { position: fixed; right: 12px; bottom: 80px; z-index: 90; width: 260px; padding: 10px; border-radius: 10px; background: #000c; color: #fff; font: 12px/1.4 ui-monospace, monospace; }
.nn-bg-debug label { display: block; margin-top: 6px; }
.nn-bg-debug pre { max-height: 120px; overflow: auto; white-space: pre-wrap; margin: 6px 0 0; }

/* The footer and account control. */
.nn-bg-control { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nn-bg-control select, .nn-bg-control button { font: inherit; }

/* Only a moving aurora gets its own compositor layers (a still one is painted once, cheaply). */
.nn-bg--aurora[data-mode="animated"] .nn-bg__still::before, .nn-bg--aurora[data-mode="animated"] .nn-bg__still::after { will-change: transform; }