/* A visual layer only. It occupies no flex/grid space and cannot consume input. */
.room-main.cinematic-active { isolation: isolate; }
.cinematic-layer { position: absolute; top: 0; left: 0; width: 100%; height: 49%; max-height: 460px; pointer-events: none; z-index: -1; overflow: hidden; opacity: 0; }
.cinematic-active > .cinematic-layer { opacity: 1; z-index: 0; }
.cinematic-active > :not(.cinematic-layer) { z-index: 1; }
.cinematic-active > :is(.chapter-bar, .scene-strip, .chronicle, .composer, .illustration-progress) { position: relative; }
.cinematic-layer img, .cinematic-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cinematic-layer img { object-fit: cover; object-position: center 46%; opacity: 0; transition: opacity 1100ms ease; filter: brightness(.9) saturate(.88); }
.cinematic-layer { --cinematic-image-alpha: .64; --cinematic-shade: #faf9f4; }
.cinematic-active[data-cinematic-intensity="weak"] > .cinematic-layer { --cinematic-image-alpha: .42; }
.cinematic-active[data-cinematic-intensity="expressive"] > .cinematic-layer { --cinematic-image-alpha: .79; }
.cinematic-layer img, .cinematic-layer canvas { -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,var(--cinematic-image-alpha)) 0%,rgba(0,0,0,var(--cinematic-image-alpha)) 12%,rgba(0,0,0,.36) 57%,transparent 100%); mask-image: linear-gradient(to bottom,rgba(0,0,0,var(--cinematic-image-alpha)) 0%,rgba(0,0,0,var(--cinematic-image-alpha)) 12%,rgba(0,0,0,.36) 57%,transparent 100%); }
.cinematic-layer canvas { z-index: 1; -webkit-mask-image: linear-gradient(to bottom,#000c 0%,#000a 57%,transparent 100%); mask-image: linear-gradient(to bottom,#000c 0%,#000a 57%,transparent 100%); }
.cinematic-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom,transparent,var(--cinematic-shade)), radial-gradient(ellipse at 50% 20%,#faf9f480,transparent 80%); }
.cinematic-active > .chapter-bar, .cinematic-active > .scene-strip { background: #faf9f466; }
.cinematic-active .chronicle { background: transparent; }
.cinematic-active .story { text-shadow: 0 1px 2px #faf9f4; }
.cinematic-toggle { min-height: 44px; white-space: nowrap; }
.cinematic-settings h3 { margin-top: 24px; }
html[data-theme="dark"] .cinematic-layer { --cinematic-shade: #141f1b; }
html[data-theme="dark"] .cinematic-layer::after { background: linear-gradient(to bottom,#141f1b30 0%,#141f1b66 50%,#141f1b 100%),radial-gradient(ellipse at 50% 15%,#141f1b80,transparent 85%); }
html[data-theme="dark"] .cinematic-active > .chapter-bar, html[data-theme="dark"] .cinematic-active > .scene-strip { background: #141f1b70; }
html[data-theme="dark"] .cinematic-active .story { text-shadow: 0 1px 3px #09100c; }
.cinematic-active[data-cinematic-time="night"] .cinematic-layer img { filter: brightness(.55) saturate(.65); }
@media (max-height: 800px) { .cinematic-layer { height: 43%; } }
@media (max-width: 750px) { .cinematic-layer { height: 44%; max-height: 300px; } }
@media (max-width: 1200px) { .room-top .cinematic-toggle span { display: none; } }
.mobile-typing .cinematic-layer { height: 36%; }
@media (prefers-reduced-motion: reduce) { .cinematic-layer img { transition: none; } }