.door-journey{height:340svh;position:relative;background:#e8e7e5}.door-screen{position:sticky;top:0;height:100svh;overflow:hidden;background:#e8e7e5}.door-film{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}.door-invite{position:absolute;top:15%;left:7%;width:35%;color:#35365f}.door-invite h2{font-size:clamp(35px,4.5vw,72px);line-height:1.15;letter-spacing:-.04em}.door-invite>span{display:block;font-size:10px;letter-spacing:.2em;margin-top:30px}.door-invite .hl-eyebrow{font-size:10px}.door-skip{position:absolute;left:7%;bottom:8%;font-size:12px;color:#35365f;z-index:3;text-underline-offset:6px}.door-about{position:absolute;inset:0;padding:120px 8% 65px 51%;background:linear-gradient(90deg,#fff0,#fffffff2 48%);display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateY(30px);color:#444}.door-about h2{font-size:clamp(34px,4vw,62px);line-height:1.12;margin:14px 0 25px}.door-about>p:not(.hl-eyebrow){font-size:15px;line-height:1.8;max-width:570px;margin:0 0 16px}.door-about .hl-button{align-self:flex-start;margin-top:15px}.door-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#4a4b8720}.door-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#4a4b87}@media(max-width:760px){.door-journey{height:300svh}.door-invite{top:13%;left:7%;width:85%}.door-invite h2{font-size:38px}.door-film{object-position:62% center}.door-about{padding:100px 7% 60px;background:#fffffff0}.door-about h2{font-size:38px}.door-about>p:not(.hl-eyebrow){font-size:13px;line-height:1.7}.door-skip{bottom:4%}}@media(prefers-reduced-motion:reduce){.door-journey{height:auto}.door-screen{height:auto;min-height:800px;position:relative}.door-invite,.door-progress,.door-skip{display:none}.door-about{position:relative;opacity:1;visibility:visible;transform:none;min-height:800px}.door-film{opacity:.35}}

/* Continuous grey surround for the hero and entrance sequence. */
.arrival-shell{background:#e8e7e5}.arrival-shell .door-journey,.arrival-shell .door-screen{background:#e8e7e5}

/* Native playback avoids repeated decoder seeks and never traps scrolling. */
.door-natural{height:auto}
.door-natural .door-screen{position:relative;height: min(850px,90svh);min-height:620px}
.door-natural .door-about{transition:opacity .8s ease,transform .8s ease,visibility .8s}
.door-natural .door-invite{transition:opacity .65s ease}
.door-natural.door-started .door-invite{opacity:0;pointer-events:none}
.door-natural.door-complete .door-about{opacity:1;visibility:visible;transform:none}
.door-natural.door-complete .door-invite,.door-natural.door-complete .door-skip{display:none}
@media(max-width:760px){.door-natural .door-screen{height:auto;min-height:0;padding-top:65%;}.door-natural .door-film{height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}.door-natural .door-about{position:relative;padding:36px 7% 45px;opacity:1;visibility:visible;transform:none;background:#f8f8fa;min-height:0}.door-natural .door-invite{display:none}.door-natural .door-skip{display:none}.door-natural .door-progress{top:0;bottom:auto}}
@media(prefers-reduced-motion:reduce){.door-natural .door-about{transition:none}}

/* Perspective geometry, composited with transforms instead of video seeking. */
.door-dimensional{height:240svh}
.door-dimensional .door-screen{height:100svh;min-height:0;position:sticky;top:0}
.door-dimensional .door-film{display:none}
.entry-scene{--opening:0;--insert:0;--zoom:0;position:absolute;inset:0;overflow:hidden;background:#e8e7e5;perspective:1500px}
.entry-wall{position:absolute;inset:0;background:linear-gradient(115deg,#faf9f5,#d9d8d5 75%,#bebec5);box-shadow:inset 0 -35px 70px #5c5b6820}
.entry-frame{position:absolute;left:56%;top:8%;height:84%;width:30%;padding:12px;background:linear-gradient(110deg,#fcfbf8,#cccbd0);box-shadow:12px 18px 45px #24243935,inset 2px 0 3px white;perspective:1200px;transform:scale(calc(1 + var(--zoom)*3.8));transform-origin:50% 50%}
.entry-room{position:absolute;inset:12px;background:url('assets/interieur.webp') center/cover;box-shadow:inset 0 0 30px #1115}
.entry-leaf{position:absolute;inset:12px;transform-origin:left center;transform:rotateY(calc(var(--opening)*-108deg));background:linear-gradient(100deg,#555778,#353754 70%,#272a44);box-shadow:inset 3px 0 3px #ffffff45,inset -5px 0 3px #17192f,12px 8px 22px #13142645;backface-visibility:hidden;will-change:transform}
.entry-panel{position:absolute;inset:6% 9% 35%;border:5px ridge #64668166;box-shadow:inset 5px 5px 15px #14162d35}
.entry-panel.lower{inset:70% 9% 6%}
.entry-handle{position:absolute;right:7%;top:56%;width:15%;height:9px;border-radius:4px;background:linear-gradient(#eee6d1,#a79b79 55%,#d9ceb4);box-shadow:0 4px 4px #1116;transform-origin:right;transform:rotate(calc(var(--opening)*18deg))}
.entry-lock{position:absolute;right:8%;top:61%;width:9px;height:14px;border-radius:50%;background:#161727;border:2px solid #bdaf8c}
.entry-key{position:absolute;right:8%;top:62%;width:65px;height:5px;background:linear-gradient(#f6e7c6,#8d7952);transform:translateX(calc((1 - var(--insert))*100px)) rotate(calc(var(--insert)*85deg));transform-origin:left center;opacity:calc(1 - var(--opening)*1.7);box-shadow:0 3px 4px #0004}
.entry-key:after{content:'';position:absolute;right:-17px;top:-10px;width:24px;height:24px;border:5px solid #c6b48c;border-radius:50%;box-sizing:border-box}
.entry-key i{position:absolute;left:8px;top:4px;width:11px;height:7px;border-left:4px solid #b6a079;border-right:4px solid #b6a079}
.door-dimensional .door-about{z-index:2}
@media(max-width:760px){.door-dimensional{height:210svh}.entry-frame{left:23%;top:25%;width:54%;height:65%}.door-dimensional .door-invite{top:9%;width:86%}.door-dimensional .door-invite h2{font-size:32px}.door-dimensional .door-invite>span{margin-top:15px}.door-dimensional .door-about{padding:85px 7% 35px;background:#fffffff2}.entry-key{width:40px}.door-dimensional .door-about h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.door-dimensional{height:auto}.door-dimensional .door-screen{position:relative;height:auto;min-height:650px}.door-dimensional .door-about{position:relative;min-height:650px}}

/* Scroll position maps directly to compositor transforms in either direction. */
.door-dimensional .entry-frame{will-change:transform;transform-style:preserve-3d}
.door-dimensional .entry-leaf{transform-style:preserve-3d}
.door-dimensional .entry-leaf:after{content:'';position:absolute;top:0;bottom:0;right:0;width:9px;background:#202238;transform:rotateY(90deg);transform-origin:right}
.door-dimensional .entry-key{width:100px;height:65px;top:57%;right:2%;background:none;box-shadow:none;transform-origin:15% 50%;will-change:transform,opacity}
.door-dimensional .entry-key:after{display:none}
.door-dimensional .entry-key img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 4px 2px #15152266)}
.door-dimensional .door-about,.door-dimensional .door-invite{transition:none!important;will-change:opacity,transform}
@media(max-width:760px){.door-dimensional .entry-key{width:72px;height:48px;right:0;top:57%}}

/* Short axial insertion followed by a separate quarter turn. */
.door-dimensional .entry-key{width:76px;height:76px;right:calc(8% - 33px);top:calc(61% - 30px);transform-origin:50% 50%;pointer-events:none}
.entry-key model-viewer{display:block;width:100%;height:100%;background:transparent;--poster-color:transparent}
.door-dimensional .entry-lock{box-shadow:0 0 0 5px #b6a17a,1px 2px 4px 6px #16172750}
@media(max-width:760px){.door-dimensional .entry-key{width:60px;height:60px;right:calc(8% - 25px);top:calc(61% - 22px)}}

/* Crossfade into the room without magnifying the door past the viewport. */
.entry-arrival{position:absolute;inset:0;background:url('assets/interieur.webp') center/cover;opacity:0;will-change:opacity}
.door-dimensional .entry-frame{will-change:opacity}
.door-dimensional .door-about{background:linear-gradient(90deg,#ffffff18,#fffffff5 48%)}
@media(max-width:760px){.door-dimensional .door-about{background:#fffffff2}.entry-arrival{background-position:40% center}}

/* Keep hardware on the door face and remove the empty edge-on interval. */
.door-dimensional .entry-leaf{transform-style:flat;overflow:hidden}
.door-dimensional .entry-leaf:after{display:none}
.door-dimensional .entry-handle,.door-dimensional .entry-lock{backface-visibility:hidden}
.door-dimensional .door-invite{z-index:1}

/* Anchor the key to the actual keyhole, including during door rotation. */
.door-dimensional .entry-lock{overflow:visible;transform-style:preserve-3d}
.door-dimensional .entry-lock .entry-key{left:50%;top:50%;right:auto;width:64px;height:64px;margin-left:-32px;margin-top:-32px;transform-origin:50% 50%}
@media(max-width:760px){.door-dimensional .entry-lock .entry-key{width:52px;height:52px;margin-left:-26px;margin-top:-26px}}

/* The inserted shaft is occluded; only the bow remains outside the cylinder. */
.door-dimensional .entry-lock .entry-key{margin-left:-22px;transform-origin:22px 50%}
.entry-key model-viewer{will-change:clip-path,transform}
@media(max-width:760px){.door-dimensional .entry-lock .entry-key{margin-left:-18px;transform-origin:18px 50%}}

/* Preserve the whole mesh; depth comes from its viewing angle, not a crop. */
.door-dimensional .entry-key model-viewer{clip-path:none!important;transform:none!important;will-change:auto}
.door-dimensional .entry-lock .entry-key{margin-left:-32px;transform-origin:center}
@media(max-width:760px){.door-dimensional .entry-lock .entry-key{margin-left:-26px}}

.door-dimensional .entry-lock{background:none;border:0;box-shadow:none}.door-dimensional .entry-lock .entry-key{width:72px;height:90px;margin-left:-36px;margin-top:-45px}

/* Keep a keyboard escape without displaying an extra caption. */
.door-skip:not(:focus-visible){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.door-skip:focus-visible{opacity:1!important;visibility:visible!important;z-index:10;background:white;padding:12px 18px;outline:2px solid #4a4b87}