/**
 * StreamVerse — Global Animated Site Background
 * "Modern Topographic / Contour" mixed with "Neon Fiber Optics"
 *
 * A single, sitewide ambient background layer sitting behind every page's
 * content: smooth, organic, vertically-flowing contour/fiber-optic lines,
 * fading through the same pink -> warm orange -> purple -> cyan/turquoise
 * -> electric blue -> purple -> pink -> warm violet gradient from top to
 * bottom, on the site's own dark base. Purely decorative and purely
 * additive — no existing element, layout, spacing, typography, or
 * component is touched by this file.
 *
 * Implementation:
 *  - Two `body::before` / `body::after` generated-content layers, each a
 *    fixed, full-viewport background-image (a static SVG line-art asset —
 *    see assets/images/background/bg-lines-1.svg and bg-lines-2.svg).
 *    No new HTML elements anywhere in the document; every one of the
 *    site's real pages picks this up identically just by linking this one
 *    stylesheet, the same way every other shared component stylesheet
 *    already works here.
 *  - `position: fixed; inset: 0;` keeps it pinned to the viewport (not the
 *    scrolling document), so it reads as one continuous atmosphere behind
 *    the page rather than a graphic that scrolls past — the standard
 *    technique for a sitewide ambient backdrop.
 *  - `z-index: -1` keeps both layers behind literally every existing
 *    element (all of which are default `z-index: auto`/static or use
 *    their own higher stacking values already) without needing to touch
 *    any other file's z-index or add a wrapping stacking context.
 *  - Only `transform` and `opacity` are animated (GPU-compositable, no
 *    layout/paint cost per frame, same discipline as ambient-glow.css) —
 *    extremely long durations (100s+) and small amplitudes for slow,
 *    barely-perceptible organic drift rather than obvious motion. The two
 *    layers use different durations, directions, and phase offsets so
 *    they never drift in visible lockstep.
 *  - Kept deliberately faint (low base opacity via each layer's own
 *    `opacity`, plus low `stroke-opacity` already baked into the SVGs
 *    themselves) with a soft, modest `drop-shadow` glow rather than a
 *    wide blur — "luminous, not aggressive," and never bright enough to
 *    reduce contrast against existing text/cards, which all sit on their
 *    own solid, opaque surfaces already.
 *  - `pointer-events: none` so the layer never intercepts clicks/taps
 *    meant for real page content.
 *  - `prefers-reduced-motion` is already handled by the sitewide floor in
 *    base.css (`*, *::before, *::after { animation-duration: 0.001ms
 *    !important; ... }`), which applies to this generated content
 *    automatically — the artwork itself stays intact, only the motion
 *    stops.
 *  - Fully responsive with no separate breakpoint rules needed: each SVG
 *    is authored on a 1440x900 canvas (close to typical desktop aspect)
 *    with `background-size: cover`, so it scales fluidly to any viewport
 *    — tall narrow phones crop gently to the horizontal center (still
 *    showing the full vertical colour story top-to-bottom), wide desktop
 *    screens show it almost in full.
 */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  will-change: transform, opacity;
}

/* Layer 1 — primary contour/fiber lines, brighter, foreground. Glow is
   pink + violet (not cyan) so the brighter layer's own halo reinforces
   the requested pink presence instead of tinting everything blue. */
body::before {
  background-image: url("../images/background/bg-lines-1.svg");
  opacity: 0.55;
  filter:
    drop-shadow(0 0 10px rgba(244, 114, 182, 0.20))
    drop-shadow(0 0 16px rgba(139, 92, 246, 0.18));
  animation: site-bg-drift-1 130s ease-in-out infinite alternate;
}

/* Layer 2 — secondary contour/fiber lines, dimmer, background depth;
   phase-shifted gradient + independent timing/direction so it never
   drifts in visible sync with Layer 1. Carries the (subtle) cyan glow
   instead, so cyan contributes to the atmosphere without dominating it. */
body::after {
  background-image: url("../images/background/bg-lines-2.svg");
  opacity: 0.4;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.12));
  animation: site-bg-drift-2 165s ease-in-out infinite alternate;
  animation-delay: -45s;
}

@keyframes site-bg-drift-1 {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.035) translate(-1.2%, 1%);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.015) translate(1%, -0.8%);
    opacity: 0.5;
  }
}

@keyframes site-bg-drift-2 {
  0% {
    transform: scale(1.02) translate(0, 0);
    opacity: 0.3;
  }
  50% {
    transform: scale(1) translate(1.4%, -1.1%);
    opacity: 0.42;
  }
  100% {
    transform: scale(1.03) translate(-1%, 0.9%);
    opacity: 0.34;
  }
}

/* No local prefers-reduced-motion override needed here: the sitewide
   floor in base.css (`*, *::before, *::after { animation-duration:
   0.001ms !important; animation-iteration-count: 1 !important; ... }`)
   already applies to this generated content automatically, exactly as
   documented in ambient-glow.css — the artwork stays fully intact, only
   the motion stops. */