/* file: assets/css/theme_operator_cinematic.css
   Tokenized (no hardcoded accent rgba)
*/
body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(var(--accent-rgb),0.10), rgba(0,0,0,0) 60%),
    radial-gradient(1000px 700px at 80% 30%, rgba(var(--accent2-rgb),0.08), rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(var(--accent-rgb),0.06), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, var(--bg-base) 0%, #080B10 100%);
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--line-rgb),0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--line-rgb),0.14) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  opacity: var(--grid-opacity);
  mix-blend-mode: screen;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 2px, transparent 10px);
  opacity: var(--noise-opacity);
}
.hero{ position:relative; }
.hero::before{
  content:"";
  position:absolute; inset:-40px -20px -20px -20px;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at calc(50% + var(--mx, 0px)) calc(20% + var(--my, 0px)),
      rgba(var(--accent-rgb),0.12), rgba(0,0,0,0) 55%),
    radial-gradient(700px 400px at 20% 40%,
      rgba(var(--accent2-rgb),0.08), rgba(0,0,0,0) 60%);
  opacity: 0.9;
}