/* ============================================================
   THEME BACKGROUND SYSTEM (extracted from theme.html)
   - WebGL stage (Three.js scroll-driven 3D depth)
   - Particle network canvas (mouse/touch + ripples)
   - Grain film overlay
   - Scanline overlay
   - Vignette
   - Mobile-optimized: full coverage, no horizontal scroll, dvh units
============================================================ */

:root{
  --red-mist:#ff9999;
}

/* Hard-prevent horizontal scroll on every page */
html, body{
  overflow-x: hidden !important;
  max-width: 100vw;
}
body{
  /* dynamic viewport units improve fit on mobile address-bar resize */
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
}

/* ===== Stacked layer system =====
   0  : WebGL stage (3D depth)
   1  : Particle network canvas
   2  : Grain film overlay
   3  : Vignette + Scanline
   10 : Content
   50 : Header
   100: Mobile menu
   200: Scroll progress bar
*/

#webgl-stage{
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
  /* mobile fix: prevent any margin/letterboxing */
  margin: 0;
  padding: 0;
}

#network-canvas{
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.65;
  mix-blend-mode: screen;
  display: block;
  margin: 0;
  padding: 0;
}

.grain{
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.vignette{
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.92) 100%);
}

.scanline{
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(transparent 50%, rgba(0,0,0,0.15) 50%);
  background-size: 100% 3px;
  opacity: 0.18;
  mix-blend-mode: multiply;
}

/* Force content above background */
.content,
header,
footer,
main,
.admin-layout{
  position: relative;
  z-index: 10;
}

/* Scroll progress bar */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0;
  z-index: 200;
  background: linear-gradient(90deg, #ff0033, #ff9999, #ff0033);
  box-shadow: 0 0 10px #ff0033;
  transition: width .1s linear;
}

/* Reduce-motion fallback */
@media (prefers-reduced-motion: reduce){
  #webgl-stage{ display: none; }
}

/* Mobile: keep canvases pinned even with iOS rubber-band */
@media (max-width: 900px){
  #webgl-stage,
  #network-canvas,
  .grain,
  .vignette,
  .scanline{
    /* dvh prevents the 100vh-bigger-than-screen problem on iOS */
    height: 100dvh;
    width: 100dvw;
  }
  /* On mobile, slightly reduce opacity so content stays readable */
  #network-canvas{ opacity: 0.55; }
  .vignette{ background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.95) 100%); }
}

/* iOS Safari: ensure body reserves no white area */
@supports (-webkit-touch-callout: none){
  body{
    background-color: #000;
    -webkit-tap-highlight-color: transparent;
  }
}