/* Physical planes: room, colored bounce, cast shadow, screen edge, image, haze. */
body.projector-enabled{--scene-x:0;--scene-y:0;--photo-shadow-drift:0px;--projection-color-0:#9bbbc8;--projection-color-1:#d8c4ae;--projection-color-2:#795a67}
#openingProjector{background:radial-gradient(ellipse at 50% 42%,#25212a,#141216 78%);perspective:1600px}
#openingProjector::after{z-index:8;background:linear-gradient(180deg,#141216bb,transparent 23%,transparent 75%,#14121688)}
.projection-room-light{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 25% 40%,var(--projection-color-0),transparent 62%),radial-gradient(ellipse at 85% 55%,var(--projection-color-1),transparent 55%);filter:blur(50px);transition:opacity 2s,background 2s;mix-blend-mode:screen}
.projection-spill{position:absolute;left:calc(var(--screen-left) - 9%);top:calc(var(--screen-top) - 100px);width:calc(var(--screen-width) + 18%);height:calc(var(--screen-height) + 240px);opacity:0;filter:blur(48px);transform:translate(calc(var(--scene-x)*-18px),calc(var(--scene-y)*-12px));transition:opacity 2s,transform 1.2s;overflow:hidden;border-radius:40%}
.spill-echo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(1.5) brightness(.85);transform:scale(1.12);transition:opacity 2.8s}
.spill-echo.is-current{opacity:.7}
.projection-floor{position:absolute;left:6%;right:6%;top:calc(var(--screen-top) + var(--screen-height) - 5px);height:190px;background:radial-gradient(ellipse at 50% 0%,#d7c8af2b,transparent 66%);transform:perspective(600px) rotateX(58deg);transform-origin:top;opacity:0;transition:opacity 2s}
.projection-cast-shadow{position:absolute;left:calc(var(--screen-left) + 10px);top:calc(var(--screen-top) + 32px);width:var(--screen-width);height:var(--screen-height);background:#030205;opacity:0;filter:blur(22px);border-radius:8px;transform:perspective(1600px) translate(calc(var(--scene-x)*-30px + var(--photo-shadow-drift)),calc(24px + var(--scene-y)*-16px)) rotateY(-3deg) rotateX(3deg) scale(.99);transition:opacity 2s,transform 2s}
.projection-plane{position:absolute;left:var(--screen-left);top:var(--screen-top);width:var(--screen-width);height:var(--screen-height);transform-style:preserve-3d;transform:perspective(1600px) rotateY(calc(-3deg + var(--scene-x)*1.2deg)) rotateX(calc(3deg + var(--scene-y)*-.8deg));opacity:0;transition:opacity 1.8s,transform 1.2s;will-change:transform}
#openingProjector .projection-plane .projection-sheet{inset:0;border-radius:5px;opacity:1;animation:none;background:linear-gradient(115deg,#fffef4,#e4e1d8 58%,#bdbbb6);box-shadow:inset 0 0 50px #fff9,inset 0 -5px 10px #37303230;transform:translateZ(3px)}
.projection-plane .projection-echo{inset:-15%;width:130%;height:130%;filter:blur(15px) saturate(.9) contrast(.8);mix-blend-mode:multiply;transform:scale(1.06) translate(calc(var(--scene-x)*-8px),calc(var(--scene-y)*-5px));transition:opacity 2.4s,transform 1.2s}
.projection-plane .projection-echo.is-current{opacity:.42}
.projection-plane .projection-sheet::after{background:radial-gradient(ellipse at 47% 38%,#fff3,transparent 48%,#423b4022 100%),repeating-linear-gradient(0deg,#00000002 0px,#00000002 1px,transparent 1px,transparent 3px);box-shadow:inset 0 0 35px #4c444325}
.screen-thickness{position:absolute;inset:0;border-radius:5px;background:#78746e;transform:translate3d(5px,7px,-6px);box-shadow:3px 5px 4px #0005}
.screen-edge{position:absolute;inset:0;border:2px solid #fff9;border-right-color:#a7a49d;border-bottom:4px solid #99958d;border-radius:5px;transform:translateZ(5px);box-shadow:0 1px 0 #fff9,inset 0 0 0 5px #f5f2e552}
.screen-surface{position:absolute;inset:0;transform:translateZ(5px);background:linear-gradient(110deg,#fff2,transparent 30%,#00000009 75%,#fff1);border-radius:5px;mix-blend-mode:soft-light}
#openingProjector .projector-beam{z-index:7;background:none;clip-path:none;filter:none;mix-blend-mode:screen;overflow:visible}
#openingProjector[data-state="on"] .projection-plane{opacity:.92}
#openingProjector[data-state="on"] .projection-room-light{opacity:.12}
#openingProjector[data-state="on"] .projection-spill{opacity:.57}
#openingProjector[data-state="on"] .projection-cast-shadow{opacity:.72}
#openingProjector[data-state="on"] .projection-floor{opacity:.7}
#openingProjector[data-state="on"] .projector-beam{opacity:.45}
#openingProjector[data-state="starting"] .projection-plane{animation:projector-warmup 1.5s ease both;--warm-max:.92}
#openingProjector[data-state="starting"] :is(.projection-spill,.projection-room-light){opacity:.12}
body.projector-enabled .opening-carousel-stage{transform:perspective(1600px) rotateY(calc(-3deg + var(--scene-x)*1.2deg)) rotateX(calc(3deg + var(--scene-y)*-.8deg));transform-origin:center;transition:opacity 1.5s,filter 1.6s,visibility 0s 1.5s,transform 1.2s}
body.projector-enabled[data-projector="off"] .opening-carousel-stage{visibility:hidden;transition:opacity 1.5s,filter 1.6s,visibility 0s,transform 1.2s}
body.projector-enabled[data-projector="on"] .opening-carousel-stage,body.projector-enabled[data-projector="starting"] .opening-carousel-stage{transition:opacity 1.7s ease .3s,filter 1.7s ease .3s,visibility 0s,transform 1.2s}
body.projector-enabled .photo-border-glow>.border-glow-card::before{opacity:.35}
@media(max-width:700px){.projection-plane{transform:perspective(1000px) rotateY(-3deg) rotateX(2deg)}.projection-plane .projection-echo{filter:blur(12px) saturate(.9) contrast(.8)}.projection-spill{filter:blur(32px)}.screen-edge{border-width:1px;border-bottom-width:3px}body.projector-enabled .opening-carousel-stage{transform:perspective(1000px) rotateY(-3deg) rotateX(2deg)}}
@media(prefers-reduced-motion:reduce){#openingProjector *,body.projector-enabled .opening-carousel-stage{animation:none!important;transition:none!important}.projection-plane,.projection-cast-shadow,.projection-spill{will-change:auto}}