/* The persistent stage (sh-stage.ts, spec r3 3.1): one fixed street behind
   the whole page. Layers, bottom to top: sky, the renderer's host (canvas
   plus the thin model shell for map planes), the film's ray blur, spill and
   alarm edge, the scrim, the vignette, grain, and the projected labels.
   Content scrolls over it on --sh-z-content; nothing here takes a pointer.
   No JS: the stage stays empty and hidden and the body shows the night sky. */
html:not(.js) body { background: linear-gradient(180deg, var(--sh-sky-0), var(--sh-ink-0) 60%) fixed; }
.sh-stage {
  position: fixed; inset: 0 0 auto; z-index: var(--sh-z-stage); height: 100vh; height: 100lvh; overflow: hidden;
  pointer-events: none; background: var(--sh-ink-0); contain: strict; isolation: isolate;
}
.sh-stage:empty, html:not(.js) .sh-stage { display: none; }
html.sh-staged main, html.sh-staged body > footer { position: relative; z-index: var(--sh-z-content); }
.sh-stage__sky, .sh-stage__model, .sh-stage__fx, .sh-stage__vignette, .sh-stage__labels { position: absolute; inset: 0; pointer-events: none; }
.sh-stage__sky {
  background: radial-gradient(ellipse 70% 42% at 58% 70%, rgba(214, 150, 84, .13), transparent 70%),
    radial-gradient(ellipse 55% 50% at 80% 12%, #1a2230, transparent 72%),
    linear-gradient(180deg, #050608 0%, #0a0e15 38%, #111822 66%, #0b0f16 84%, #07080a 100%);
}
.sh-stage__model { z-index: 1; perspective: 1800px; perspective-origin: 50% 39%; }
.sh-stage__model .sh-model { top: 58%; }
.sh-stage .sh-model.is-off { visibility: hidden; }
.sh-stage .sh-film__rays, .sh-stage .sh-film__spill, .sh-stage .sh-film__alarm { z-index: 3; }
.sh-stage__fx { z-index: 4; }
.sh-stage__vignette {
  z-index: 5;
  background: radial-gradient(ellipse 84% 76% at 50% 52%, transparent 48%, rgb(3 4 6 / 55%) 100%),
    linear-gradient(180deg, rgb(7 8 10 / 62%) 0, rgb(7 8 10 / 0) 26%), linear-gradient(0deg, rgb(7 8 10 / 74%) 0, rgb(7 8 10 / 0) 32%);
}
.sh-stage .sh-film__grain { z-index: 6; }
.sh-stage__labels { z-index: 7; overflow: hidden; }

/* Rain on the compositor (full tier, sh-stage-rain.ts): three leaning sheets, one tile each. */
.sh-stage__rain { position: absolute; inset: 0; z-index: 2; display: none; overflow: hidden; pointer-events: none; opacity: 0; }
html.sh-rain-live .sh-stage__rain { display: block; }
.sh-rain__sheet {
  position: absolute; left: -40%; top: -70%; width: 180%; height: 240%; background-repeat: repeat; background-size: 256px 512px;
  will-change: transform; animation: sh-rain-fall .42s linear infinite;
}
.sh-rain__sheet.is-0 { opacity: .75; animation-duration: .95s; }
.sh-rain__sheet.is-1 { animation-duration: .62s; }
@keyframes sh-rain-fall { from { transform: rotate(14.6deg) translateY(-512px); } to { transform: rotate(14.6deg) translateY(0); } }
html.sh-paused .sh-rain__sheet { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sh-stage__rain { display: none !important; } }

/* The scrim: the darkest area sits behind the text column (spec 3.4). */
.sh-stage__scrims, .sh-stage__scrim { position: absolute; inset: 0; }
.sh-stage__scrim { opacity: 0; will-change: opacity; }
.sh-stage__scrim.is-left { background: linear-gradient(90deg, rgb(7 8 10 / 96%) 0, rgb(7 8 10 / 82%) 30%, rgb(7 8 10 / 34%) 58%, rgb(7 8 10 / 0) 78%); }
.sh-stage__scrim.is-right { background: linear-gradient(270deg, rgb(7 8 10 / 96%) 0, rgb(7 8 10 / 82%) 32%, rgb(7 8 10 / 34%) 60%, rgb(7 8 10 / 0) 80%); }
.sh-stage__scrim.is-center { background: radial-gradient(ellipse 58% 62% at 50% 48%, rgb(7 8 10 / 90%) 0, rgb(7 8 10 / 72%) 55%, rgb(7 8 10 / 40%) 100%); }
.sh-stage__scrim.is-bottom { background: linear-gradient(0deg, rgb(7 8 10 / 97%) 0, rgb(7 8 10 / 84%) 36%, rgb(7 8 10 / 30%) 64%, rgb(7 8 10 / 0) 82%); }
.sh-stage__scrim.is-top { background: linear-gradient(180deg, rgb(7 8 10 / 96%) 0, rgb(7 8 10 / 80%) 36%, rgb(7 8 10 / 26%) 62%, rgb(7 8 10 / 0) 80%); }
.sh-stage__scrim.is-full { background: rgb(7 8 10 / 84%); }

/* The v2 CSS 3D street, only under ?renderer=css3d (sh-night.ts). */
.sh-stage .sh-css3d { position: absolute; inset: 0; background: none; }
.sh-css3d .sh-model__face, .sh-css3d .sh-model__lamp > *, .sh-css3d .sh-night__lamp-shaft, .sh-css3d .sh-night__steam,
.sh-css3d .sh-heist-car__wheel, .sh-css3d .sh-heist-car__shadow, .sh-css3d .sh-heist-car__beam, .sh-css3d .sh-night__car-wake,
.sh-css3d .sh-night__balcony-rail { opacity: calc(1 - var(--map, 0)); transition: opacity 140ms linear; }

/* The film is beat 0: a tall track with a sticky copy frame over the stage. */
.sh-film { position: relative; color: var(--sh-fg); }
.sh-film__frame { position: relative; min-height: 320px; height: 100vh; height: 100svh; }
html.film-live .sh-film__frame { position: sticky; top: 0; overflow: hidden; }
html:not(.film-live) .sh-film__frame { height: auto; }

@media (max-width: 767px) and (orientation: portrait) { .sh-stage__model .sh-model { top: 56%; } }
@media (max-height: 500px) and (orientation: landscape) { .sh-stage__model .sh-model { top: 60%; } }
@media print { .sh-stage, .sh-hudbar { display: none !important; } }