/* Every route uses the same material with a different depth, colour and light.
   The canvas carries movement; these bases also work without WebGL. */
.cinema-hero[data-atmosphere="webgl"] > .trace-atmosphere{z-index:0}
.cinema-hero[data-atmosphere="webgl"] > .cinema-art{opacity:.10}
.cinema-hero[data-atmosphere="webgl"] > .cinema-vignette{z-index:1;pointer-events:none}
.cinema-hero[data-atmosphere="webgl"] > .cinema-word{z-index:3}
.cinema-hero[data-atmosphere="webgl"] > .cinema-copy,
.cinema-hero[data-atmosphere="webgl"] > .hero-floor{z-index:5}

body[data-page="check"] .page-intro{background:
  radial-gradient(ellipse 30% 100% at 96% 60%,#15202dd6,transparent 96%),
  radial-gradient(ellipse 36% 90% at 3% 20%,#111923a9,transparent 95%),#080d13}
body[data-page="methodology"] .page-intro{background:
  radial-gradient(ellipse 50% 140% at 20% 90%,#142332b9,transparent 85%),
  radial-gradient(ellipse 43% 110% at 88% 5%,#101e2abc,transparent 90%),#090e15}
body[data-page="projects"] .page-intro{background:
  radial-gradient(ellipse 32% 110% at 83% 48%,#2c1b15a0,transparent 90%),
  radial-gradient(ellipse 35% 90% at 9% 85%,#171b25c9,transparent 90%),#0b0e14}
body[data-page="tools"] .page-intro{background:
  radial-gradient(ellipse 18% 125% at 43% 0%,#14303988,transparent 90%),
  radial-gradient(ellipse 35% 120% at 92% 96%,#101f2b9c,transparent 88%),#080e14}

/* The legal route has no title stage: its own quiet scene sits behind the
   first document rows without covering the reading column. */
body[data-page="legal"] .legal-layout{position:relative;isolation:isolate}
body[data-page="legal"] .legal-sidebar,
body[data-page="legal"] .legal-main{position:relative;z-index:2}
.trace-legal-scene{position:absolute;inset:0 0 auto;z-index:0;height:min(440px,42vw);overflow:hidden;pointer-events:none;
  background:radial-gradient(ellipse at 80% 30%,#15233184,transparent 55%)}
.trace-legal-scene>.trace-atmosphere{position:absolute;inset:0;width:100%;height:100%;opacity:.72}

/* Terminal modes carry different coloured rims while the volume morphs. */
body[data-page="check"][data-terminal-mode="powershell"] .page-intro{border-bottom-color:#719bd331}
body[data-page="check"][data-terminal-mode="cmd"] .page-intro{border-bottom-color:#5cbfc23c}
body[data-page="check"][data-terminal-mode="manual"] .page-intro{border-bottom-color:#bc90733b}
body[data-page="check"] .page-intro{transition:border-bottom-color .9s ease}

[data-atmosphere="fallback"]::before{opacity:.48}
body[data-page="check"] .page-intro[data-atmosphere="fallback"]::before{background:
  radial-gradient(ellipse 27% 64% at 12% 78%,#303b46a1,transparent 100%),
  radial-gradient(ellipse 27% 71% at 83% 50%,#26334095,transparent 100%),
  radial-gradient(ellipse 22% 44% at 48% 100%,#4a2b2082,transparent 100%)}
body[data-page="methodology"] .page-intro[data-atmosphere="fallback"]::before{background:
  radial-gradient(ellipse 35% 75% at 21% 72%,#23476693,transparent 100%),
  radial-gradient(ellipse 29% 55% at 87% 20%,#263f5591,transparent 100%)}
body[data-page="projects"] .page-intro[data-atmosphere="fallback"]::before{background:
  radial-gradient(ellipse 20% 70% at 7% 80%,#7650396e,transparent 100%),
  radial-gradient(ellipse 20% 62% at 52% 8%,#5f3e3061,transparent 100%),
  radial-gradient(ellipse 25% 75% at 95% 64%,#6e402e78,transparent 100%)}
body[data-page="tools"] .page-intro[data-atmosphere="fallback"]::before{background:
  radial-gradient(ellipse 18% 80% at 30% 80%,#24576673,transparent 100%),
  radial-gradient(ellipse 20% 78% at 77% 38%,#2c54656b,transparent 100%)}

@media(prefers-reduced-motion:reduce){
  .trace-legal-scene>.trace-atmosphere{display:none}
  body[data-page="check"] .page-intro{transition:none}
}