/* The opening itself is the wall. No floating screen or rectangular frame. */
body.slide-projector-enabled #openingProjector{background:#100f14;isolation:isolate}
.wall-projection{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1.3s ease;z-index:1}
#openingProjector[data-state="on"] .wall-projection{opacity:1}
#openingProjector[data-state="starting"] .wall-projection{animation:wall-lamp-warmup 1.55s both}
.wall-photo{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;opacity:0;transition:opacity .22s ease;transform:perspective(2200px) rotateY(calc(var(--scene-x,0)*-1.3deg)) rotateX(calc(var(--scene-y,0)*.9deg)) translate(calc(var(--scene-x,0)*-10px),calc(var(--scene-y,0)*-8px)) scale(1.025);filter:saturate(1.15) brightness(.86);will-change:transform}
.wall-photo.is-current{opacity:1}
.wall-light-response{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(ellipse at calc(50% + var(--scene-x,0)*24%) calc(50% + var(--scene-y,0)*25%),#fff5dc9c,transparent 65%),linear-gradient(180deg,#08071150,transparent 28%,transparent 58%,#08071188)}
body.slide-projector-enabled #openingProjector .projection-room-light{z-index:2;opacity:.28;mix-blend-mode:screen}
body.slide-projector-enabled #openingProjector .projection-spill{z-index:0;opacity:.35}
body.slide-projector-enabled #openingProjector::before{z-index:5;opacity:.36;mix-blend-mode:soft-light;background-size:160px 160px;animation:wall-grain-drift .24s steps(2) infinite}
body.slide-projector-enabled #openingProjector::after{z-index:3;background:linear-gradient(180deg,#07060d44,transparent 24%,transparent 58%,#07060d66)}
body.slide-projector-enabled #openingProjector .projector-beam{z-index:4;clip-path:none;background:none;filter:blur(9px);mix-blend-mode:screen}
body.slide-projector-enabled #openingProjector[data-state="on"] .projector-beam{opacity:calc(.25 + var(--scene-x,0)*.07)}
body.slide-projector-enabled #home{min-height:calc(100svh - 130px);display:flex;flex-direction:column;justify-content:space-between;padding-bottom:44px}
body.slide-projector-enabled .hero-visual.circular-hero{flex:1;width:100%;min-height:160px}
body.slide-projector-enabled .projected-slide-stage{height:clamp(220px,40vh,480px);width:100%}
body.slide-projector-enabled .projected-slide-stage .projection-plane{width:100%;height:100%;aspect-ratio:auto;transform:translate(-50%,-50%)!important;will-change:auto}
body.slide-projector-enabled .projected-slide-stage .projection-sheet,body.slide-projector-enabled .projected-slide-stage .screen-surface,body.slide-projector-enabled .screen-corner{visibility:hidden}
body.slide-projector-enabled .slide-advance{cursor:e-resize}
body.slide-projector-enabled .projector-slide-controls{bottom:6px;z-index:5;opacity:.85}
body.slide-projector-enabled .hero-copy{position:relative;z-index:4;padding-top:20px}
body.slide-projector-enabled .hero-copy h1{color:#fff9ed!important;text-shadow:0 2px 18px #000a,0 0 45px #fff2!important;mix-blend-mode:normal}
body.slide-projector-enabled:has(#homeView:not([hidden]))>header a,body.slide-projector-enabled .hero-overline{color:#fff9ed!important;text-shadow:0 2px 12px #000d}
body.slide-projector-enabled:has(#homeView:not([hidden]))>header .brand-logo img{filter:brightness(0) invert(1) drop-shadow(0 2px 8px #0008)}
body.slide-projector-enabled .hero-bottom{position:relative;z-index:3}
.wall-flutter .wall-projection{animation:wall-slide-flutter .28s ease-out}
@keyframes wall-slide-flutter{0%{filter:brightness(.72);transform:translateY(1px)}22%{filter:brightness(.96);transform:translateY(-1px)}45%{filter:brightness(.82)}70%{filter:brightness(1.05)}100%{filter:none;transform:none}}
@keyframes wall-lamp-warmup{0%{opacity:0}18%{opacity:.12}31%{opacity:.06}49%{opacity:.5}60%{opacity:.3}100%{opacity:1}}
@keyframes wall-grain-drift{0%,100%{background-position:0 0}25%{background-position:24px -18px}50%{background-position:-17px 30px}75%{background-position:38px 12px}}
@media(max-width:700px){body.slide-projector-enabled #home{min-height:calc(100svh - 150px);padding-bottom:32px}body.slide-projector-enabled .projected-slide-stage{height:clamp(200px,38svh,380px)}.wall-photo{filter:saturate(1.1) brightness(.79)}body.slide-projector-enabled .hero-copy h1{font-size:clamp(64px,16vw,110px)}}
@media(prefers-reduced-motion:reduce){.wall-photo{transform:none;will-change:auto;transition:none}.wall-projection,body.slide-projector-enabled #openingProjector::before{animation:none!important;transition:none}.wall-flutter .wall-projection{animation:none!important}}
/* A stationary white wall; only an obstruction in the projected light responds. */
body.slide-projector-enabled #openingProjector{background:#f4f2ec;transition:background 1.2s ease}
body.slide-projector-enabled[data-projector="on"] #openingProjector,body.slide-projector-enabled[data-projector="starting"] #openingProjector{background:#17151b}
.wall-photo{transform:none!important;will-change:opacity}
.wall-light-response{background:linear-gradient(180deg,#08071145,transparent 28%,transparent 58%,#08071180)}
body.slide-projector-enabled #openingProjector .projection-room-light,body.slide-projector-enabled #openingProjector .projection-spill{transform:none!important}
body.slide-projector-enabled[data-projector="off"] #openingProjector .projection-room-light,body.slide-projector-enabled[data-projector="off"] #openingProjector .projection-spill{opacity:0!important}
body.slide-projector-enabled[data-projector="off"] #openingProjector::after{opacity:0}
body.slide-projector-enabled[data-projector="off"] #openingProjector::before{opacity:.07;animation:none}
body.slide-projector-enabled[data-projector="off"] .hero-copy h1,body.slide-projector-enabled[data-projector="off"] .hero-overline,body.slide-projector-enabled[data-projector="off"] .hero-bottom a{color:#302830!important;text-shadow:none!important;opacity:1}
body.slide-projector-enabled[data-projector="off"]:has(#homeView:not([hidden]))>header a{color:#302830!important;text-shadow:none}
body.slide-projector-enabled[data-projector="off"]:has(#homeView:not([hidden]))>header .brand-logo img{filter:none}
body.slide-projector-enabled[data-projector="off"]:has(#homeView:not([hidden]))>header .contact-link{border-color:#30283066}
.projector-cursor-shadow{position:absolute;width:var(--shadow-length,150px);height:94px;transform:translate(-50%,-50%) rotate(var(--shadow-angle,0deg));z-index:2;pointer-events:none;opacity:0;transition:opacity .22s ease;mix-blend-mode:multiply}
.cursor-shadow-core{position:absolute;inset:-28%;background:radial-gradient(ellipse at 42% 50%,#050307c9 0%,#09060db3 22%,#0c09126b 40%,#0a07151f 58%,transparent 73%);filter:blur(10px)}
body[data-projector="on"] .projector-cursor-shadow.is-active{opacity:1}
@media(hover:none),(prefers-reduced-motion:reduce){.projector-cursor-shadow{display:none}}
/* Grain and a localized soft ripple, without a beam, shadow, or moving wall. */
body.slide-projector-enabled #openingProjector .projector-beam,.projector-cursor-shadow{display:none!important}
.photo-ripple{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s ease;mask-image:radial-gradient(ellipse 180px 150px at var(--ripple-x,50%) var(--ripple-y,50%),#000 0%,#000b 32%,transparent 100%)}
.photo-ripple.is-active{opacity:.85;transition:opacity .25s ease}
.photo-ripple>img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;filter:url(#photoSoftRipple) saturate(1.15) brightness(.86)}
@media(max-width:700px){.photo-ripple>img{filter:url(#photoSoftRipple) saturate(1.1) brightness(.79)}}
@media(hover:none),(prefers-reduced-motion:reduce){.photo-ripple{display:none}}
/* A richer film stock: fine grain plus a quieter, larger paper-like tooth. */
body.slide-projector-enabled #openingProjector::before{opacity:.48;background-image:url('assets/projector-grain.svg'),url('assets/projector-grain.svg');background-size:145px 145px,390px 390px;background-blend-mode:soft-light;mix-blend-mode:soft-light}
.wall-photo{filter:saturate(1.12) contrast(1.09) brightness(.88)}
.photo-ripple{mask-image:radial-gradient(ellipse 225px 190px at var(--ripple-x,50%) var(--ripple-y,50%),#000 0%,#000c 35%,transparent 100%)}
.photo-ripple>img{filter:url(#photoSoftRipple) saturate(1.12) contrast(1.09) brightness(.88)}
.photo-ripple::after{content:"";position:absolute;inset:0;pointer-events:none;background:url('assets/projector-grain.svg') repeat;background-size:225px 225px;mix-blend-mode:soft-light;opacity:.24;animation:ripple-texture-drift 1.6s ease-in-out infinite alternate}
@keyframes ripple-texture-drift{from{transform:translate(-3px,-2px)}to{transform:translate(3px,2px)}}
@media(max-width:700px){.wall-photo{filter:saturate(1.08) contrast(1.08) brightness(.83)}.photo-ripple>img{filter:url(#photoSoftRipple) saturate(1.08) contrast(1.08) brightness(.83)}}
@media(prefers-reduced-motion:reduce){.photo-ripple::after{animation:none}}
/* One visual language: the very same grain compositor and fluid pointer trails
   used by the lower Grainient panels, rendered with a photograph as the field. */
#openingPhotoGrainient{position:absolute;inset:0;z-index:2;pointer-events:none}
#openingPhotoGrainient .grainient-container,#openingPhotoGrainient canvas{width:100%;height:100%;display:block}
#openingPhotoGrainient .grainient-container:not([data-photo-ready="true"]){opacity:0}
body.slide-projector-enabled #openingProjector::before{display:none}
body.slide-projector-enabled #openingProjector .photo-ripple,body.slide-projector-enabled #openingProjector .projection-room-light,body.slide-projector-enabled #openingProjector .projection-spill{display:none!important}
body.slide-projector-enabled #openingProjector::after{background:linear-gradient(180deg,#08071138,transparent 28%,transparent 60%,#08071155)}
.wall-light-response{display:none}
/* Album-cover motion: move the photograph as one plane, never ripple its pixels. */
#openingPhotoGrainient{inset:-3%;transform-origin:center;transform:perspective(1800px) rotateX(calc(var(--cover-y,0)*-1.2deg)) rotateY(calc(var(--cover-x,0)*1.6deg)) translate3d(calc(var(--cover-x,0)*-9px),calc(var(--cover-y,0)*-7px),0);transition:transform .65s cubic-bezier(.2,.65,.25,1);will-change:transform}
body.slide-projector-enabled[data-projector="on"] .wall-photo{transform:perspective(1800px) rotateX(calc(var(--cover-y,0)*-1.2deg)) rotateY(calc(var(--cover-x,0)*1.6deg)) translate3d(calc(var(--cover-x,0)*-9px),calc(var(--cover-y,0)*-7px),0)!important;transition:opacity .22s ease,transform .65s cubic-bezier(.2,.65,.25,1)}
@media(hover:none),(prefers-reduced-motion:reduce){#openingPhotoGrainient{transform:none;transition:none;will-change:auto}body.slide-projector-enabled[data-projector="on"] .wall-photo{transform:none!important}}
/* Keep the gallery controls directly beneath the tagline in normal flow. */
body.slide-projector-enabled .hero-copy > .projector-slide-controls{position:relative;inset:auto;transform:none;display:flex;justify-content:center;margin:20px auto 0;width:fit-content;z-index:5}
body.slide-projector-enabled .hero-copy > .letter-aligned-controls{width:100%;height:44px;display:block;flex-shrink:0}
body.slide-projector-enabled .letter-aligned-controls button{position:absolute;top:0;transform:translateX(-50%);margin:0}
@media(max-width:700px){body.slide-projector-enabled .letter-aligned-controls button{width:30px;min-width:0;height:44px;font-size:17px}}
/* A single mechanical shutter change, not a flutter or crossfade. */
#openingProjector::after{content:"";position:absolute;inset:0;z-index:20;background:#100f10;pointer-events:none;opacity:0;clip-path:inset(50% 0);transition:clip-path 75ms ease-in,opacity 50ms linear}
#openingProjector.slide-shutter-closed::after{opacity:1;clip-path:inset(0)}
#openingProjector .wall-photo{transition:transform .65s cubic-bezier(.2,.65,.25,1)!important}
.wall-flutter .wall-projection{animation:none!important}
@media(prefers-reduced-motion:reduce){#openingProjector::after{display:none}}
/* Dedicated opaque shutter avoids the existing atmospheric gradient layer. */
body.slide-projector-enabled #openingProjector .solid-slide-shutter{position:absolute;inset:0;z-index:40;background:#100f10;opacity:0;pointer-events:none;transition:none;mix-blend-mode:normal}
body.slide-projector-enabled #openingProjector.slide-shutter-closed .solid-slide-shutter{opacity:1}
body.slide-projector-enabled #openingProjector.slide-shutter-closed::after{opacity:0!important}
@media(prefers-reduced-motion:reduce){.solid-slide-shutter{display:none}}