/*
  ps2-background.css
  ─────────────────────────────────────────────────────────
  PS2 XMB / Menu Screen — Animated Background
  Floating 3D cubes in a deep blue void + colored light trails

  Usage:
    1. Link this CSS file in your <head>
    2. Add id="ps2-canvas" as the FIRST child of <body>:
       <canvas id="ps2-canvas"></canvas>
    3. Add class="ps2-bg" to <body>
    4. Add the inline <script> block from ps2-background-init.js
       OR copy the <script> from ps2-preview.html

  All content sits above the canvas via z-index: 1+
  ─────────────────────────────────────────────────────────
*/

:root {
  --ps2-void:   #00010f;
  --ps2-deep:   #020824;
  --ps2-mid:    #061550;
  --ps2-glow:   #1040c0;
  --ps2-bright: #2060ff;
  --ps2-haze:   #3070e8;
}

/* ── Body base ── */
.ps2-bg {
  background: var(--ps2-void);
  overflow: hidden;
  position: relative;
}

/* ── Full-screen canvas behind everything ── */
#ps2-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ── All direct children of ps2-bg float above canvas ── */
.ps2-bg > *:not(#ps2-canvas) {
  position: relative;
  z-index: 1;
}

/* ── Header / nav always on top ── */
.ps2-bg header,
.ps2-bg footer,
.ps2-bg main {
  position: relative;
  z-index: 10;
}
