/*
 * Hyperion — background art system
 * Four CSS pseudo-element layers, no JS, no canvas.
 * Art is visible only in the left/right margins on desktop (≥900px).
 * On mobile the image is dropped and replaced with soft radial gradients.
 *
 * Layers:
 *   body::before  — main space image, slow drift + opacity pulse
 *   html::before  — deep blue nebula glow (CSS gradient), fades in
 *   html::after   — same glow, opposite phase (crossfade = breathing)
 *   body::after   — cold diagonal light sweep (CSS gradient)
 */

/* ── Shared layer base ─────────────────────────────────────────────────────── */
body::before,
body::after,
html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ── Content width token — adjust to match your widest content container ── */
:root { --cw: 1200px; }

/* ── Margin mask — art shows only outside the content column ─────────────── */
:root {
  --g: calc((100% - var(--cw)) / 2);
}

/* ── Layer 1: main space image (body::before) ────────────────────────────── */
body::before {
  background: url("/bg/space.png") center / cover no-repeat;
  mix-blend-mode: normal;
  -webkit-mask-image:
    linear-gradient(90deg,
      #000 0,
      #000 calc(var(--g) * .7),
      transparent calc(var(--g) + 140px),
      transparent calc(100% - var(--g) - 140px),
      #000 calc(100% - var(--g) * .7),
      #000 100%);
  mask-image:
    linear-gradient(90deg,
      #000 0,
      #000 calc(var(--g) * .7),
      transparent calc(var(--g) + 140px),
      transparent calc(100% - var(--g) - 140px),
      #000 calc(100% - var(--g) * .7),
      #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 1;
}

/* ── Layer 2: deep blue nebula glow — fades in (html::before) ───────────── */
html::before {
  background:
    radial-gradient(ellipse 30% 60% at 4% 40%, rgba(30,80,160,.55) 0%, transparent 70%),
    radial-gradient(ellipse 25% 50% at 96% 30%, rgba(10,40,120,.45) 0%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* ── Layer 3: opposite-phase glow (html::after) ──────────────────────────── */
html::after {
  background:
    radial-gradient(ellipse 28% 55% at 5% 55%, rgba(20,60,140,.5) 0%, transparent 70%),
    radial-gradient(ellipse 22% 45% at 95% 45%, rgba(15,50,130,.4) 0%, transparent 65%);
  mix-blend-mode: screen;
  opacity: .95;
}

/* ── Layer 4: diagonal cold-light sweep (body::after) ───────────────────── */
body::after {
  background: linear-gradient(
    108deg,
    transparent 30%,
    rgba(180,210,255,.07) 50%,
    transparent 68%
  );
  background-size: 280% 100%;
  background-position: -160% 0;
  mix-blend-mode: screen;
  /* Restrict sweep to margins only — same mask as the main image */
  -webkit-mask-image:
    linear-gradient(90deg,
      #000 0,
      #000 calc(var(--g) * .7),
      transparent calc(var(--g) + 140px),
      transparent calc(100% - var(--g) - 140px),
      #000 calc(100% - var(--g) * .7),
      #000 100%);
  mask-image:
    linear-gradient(90deg,
      #000 0,
      #000 calc(var(--g) * .7),
      transparent calc(var(--g) + 140px),
      transparent calc(100% - var(--g) - 140px),
      #000 calc(100% - var(--g) * .7),
      #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ── Mobile fallback (< 900px) — drop images, use gradients ─────────────── */
@media (max-width: 899px) {
  body::before {
    background:
      radial-gradient(ellipse 70% 50% at 0% 60%, rgba(10,30,80,.6) 0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 100% 30%, rgba(5,20,60,.5) 0%, transparent 70%);
    mix-blend-mode: normal;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
  }
  html::before,
  html::after,
  body::after {
    display: none;
  }
}

/* ── Animation (desktop only, motion allowed) ────────────────────────────── */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {

  /* Layer 1: slow drift across + opacity pulse */
  body::before {
    animation:
      bgdrift 40s ease-in-out infinite alternate,
      bgbase  24s ease-in-out infinite;
  }

  /* Layer 2: nebula fades in */
  html::before {
    animation: bgbreatheA 10s ease-in-out infinite;
  }

  /* Layer 3: nebula fades out (opposite) */
  html::after {
    animation: bgbreatheB 10s ease-in-out infinite;
  }

  /* Layer 4: sweep passes through, then pauses */
  body::after {
    animation: bgsweep 22s ease-in-out infinite;
  }

  /* Slow positional drift — the ship and asteroids gently float */
  @keyframes bgdrift {
    0%   { background-position: 49% 49%; }
    100% { background-position: 51% 51%; }
  }

  /* Opacity pulse — page breathes */
  @keyframes bgbase {
    0%, 100% { opacity: 1; }
    50%       { opacity: 1; }
  }

  /* Nebula crossfade A: starts invisible, blooms */
  @keyframes bgbreatheA {
    0%, 100% { opacity: 0;   }
    50%       { opacity: .95; }
  }

  /* Nebula crossfade B: starts visible, fades */
  @keyframes bgbreatheB {
    0%, 100% { opacity: .95; }
    50%       { opacity: 0;   }
  }

  /* Cold-light sweep: slides across then pauses */
  @keyframes bgsweep {
    0%        { background-position: -160% 0; }
    60%       { background-position:  260% 0; }
    60.001%,
    100%      { background-position: -160% 0; }
  }
}