/* One physical world from the first movement through the living desktop. */
.atlas-cinematic-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; background: #050b16; }
.cinema-field, .cinema-webgl, .cinema-lens, .cinema-grain { position: absolute; inset: 0; }
.cinema-field { background: radial-gradient(ellipse at 73% 34%, #24516b80, transparent 52%), radial-gradient(ellipse at 70% 85%, #21507765, transparent 40%), linear-gradient(140deg, #030914, #0b1725 75%, #101c2b); }
.cinema-field::after { content: ""; position: absolute; inset: 72% 0 0; background: linear-gradient(#65889b15, #060e1a66); border-top: 1px solid #89b5c318; }
.cinema-webgl { opacity: 0; transition: opacity 650ms ease; }
.atlas-cinematic-scene[data-renderer="webgl"] .cinema-webgl { opacity: 1; }
.cinema-webgl canvas { display: block; width: 100%; height: 100%; }
.cinema-lens { background: linear-gradient(90deg, #030a1488, transparent 45%), linear-gradient(0deg, #020812a3, transparent 24%, transparent 76%, #0208125c); box-shadow: inset 0 0 120px #01040a75; }
.cinema-grain { opacity: .08; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #9cb6dc0b 3px, transparent 4px); mix-blend-mode: screen; }
.atlas-cinematic-scene[data-subdued="true"] .cinema-lens { background-color: #030b164d; transition: background-color 600ms ease; }
@media (max-width: 760px) {
  .cinema-field { background: radial-gradient(ellipse at 50% 35%, #275f7b80, transparent 55%), linear-gradient(#050d18, #0d1b2a 65%, #06101c); }
  .cinema-lens { background: linear-gradient(0deg, #020812dd, transparent 43%, transparent 78%, #02081280); }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-webgl { display: none; }
  .cinema-webgl, .cinema-lens { transition: none; }
}

/* Loading, reduced motion, and renderer failure retain only the ambient field.
   There is no CSS sculpture or still image placeholder. */
.atlas-cinematic-scene[data-reduced-motion="true"] .cinema-webgl { display: none; }