/* An isolated backdrop keeps light/grain below opaque cards, media, and text.
   The frame preserves the pane's flex sizing and remains still as it scrolls. */
.scene-frame{
  position:relative;isolation:isolate;display:flex;flex:1;min-width:0;min-height:0;
  background-color:var(--body-bg);
}
.scene-frame:has(.route-sounds){background-color:var(--slate)}
.scene-frame>.pane{position:relative;z-index:1;background-color:transparent;background-image:none}
.scene-frame>.scene-background{--scene-strength:var(--scene-inner-strength)}
.scene-background{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;
  --scene-strength:1;
}
.scene-lightfield{
  position:absolute;inset:0;z-index:0;
  opacity:calc(var(--scene-glow-opacity) * var(--scene-glow-intensity) * var(--scene-strength));
  mix-blend-mode:var(--scene-glow-blend);
}
.scene-glow{
  position:absolute;inset:-12%;
  background-repeat:no-repeat;filter:blur(var(--scene-glow-blur));
  --glow-enabled:clamp(0,calc(var(--scene-glow-count) - var(--glow-index) + 1),1);
  /* Explicit transforms and opacity retain the lit composition without a clock. */
  opacity:calc(var(--glow-enabled) * var(--glow-static-opacity));
  transform:translateY(var(--glow-static-y));
}
.scene-glow:nth-child(1){
  --glow-index:1;--glow-static-y:var(--scene-glow-1-y);--glow-static-opacity:var(--scene-glow-1-opacity);
  background-image:radial-gradient(ellipse 52% 60% at 21% 69%,var(--scene-light-cold),transparent 78%);
}
.scene-glow:nth-child(2){
  --glow-index:2;--glow-static-y:var(--scene-glow-2-y);--glow-static-opacity:var(--scene-glow-2-opacity);
  background-image:radial-gradient(ellipse 47% 67% at 83% 45%,var(--scene-light-steel),transparent 78%);
}
.scene-glow:nth-child(3){
  --glow-index:3;--glow-static-y:var(--scene-glow-3-y);--glow-static-opacity:var(--scene-glow-3-opacity);
  background-image:radial-gradient(ellipse 57% 43% at 53% 82%,var(--scene-light-soft),transparent 79%);
}
.scene-background::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--scene-grain);background-size:var(--scene-grain-size);
  opacity:calc(var(--scene-grain-opacity) * var(--scene-grain-intensity));mix-blend-mode:var(--scene-grain-blend);
  filter:var(--scene-grain-filter);
}
/* Home's opaque floor gets the same backdrop directly above it, below the UI. */
.coverflow-stage{z-index:1}
@media(min-width:720px){.scene-frame:has(.route-home)>.scene-background{display:none}}
@media(forced-colors:active){.scene-background{display:none}}