/* All presence layers are pointer-transparent; the playable plane stays fixed. */
.reader-stage,.reader-actor{position:absolute;inset:0;overflow:clip;pointer-events:none}
.reader-video,.reader-frame{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.reader-frame{pointer-events:none}
.reader-frame[hidden],.reader-actor[hidden]{display:none!important}
@media(max-width:760px){.reader-video,.reader-frame{object-position:50% 0}}
html[data-motion=off] .reader-stage{display:none}
@media(prefers-reduced-motion:reduce){.reader-stage{display:none}}

:root{--wood:#382b1d;--wood-dark:#1d1911;--wood-edge:#786044;--warm-light:#e7b772;--candle-wash:#cd8b3538;--presence-fade:180ms}
.table-room{animation:none;--depth-x:0px;--depth-y:0px}
.table-scenery{animation:candle-breathe 5.7s ease-in-out infinite alternate}
.table-scenery>img{transform:translate(calc(var(--depth-x)*-.35),calc(var(--depth-y)*-.35)) scale(1.018)}
.reader-stage{inset:-7px;transform:translate(var(--depth-x),var(--depth-y));transition:transform var(--presence-fade) ease-out}
.room-shade{inset:-8px;transform:translate(calc(var(--depth-x)*-.65),calc(var(--depth-y)*-.65))}
.room-candlelight,.table-flip-light{position:absolute;inset:-8px;pointer-events:none;z-index:1}
.room-candlelight{background:radial-gradient(ellipse at 9% 86%,var(--candle-wash),transparent 40%),radial-gradient(ellipse at 92% 80%,var(--candle-wash),transparent 35%);transform:translate(calc(var(--depth-x)*-.8),calc(var(--depth-y)*-.8));animation:candle-wash 4.3s ease-in-out infinite alternate}
.table-flip-light{inset:35% 5% 4%;opacity:0;background:radial-gradient(ellipse,var(--candle-wash),transparent 68%)}
.table-room:has(.fresh-flip) .table-flip-light{animation:flip-wash 1.3s ease-out}
@keyframes candle-breathe{0%,42%,78%{filter:brightness(1)}25%,66%,100%{filter:brightness(1.025)}}
@keyframes candle-wash{0%,62%{opacity:.45}32%,100%{opacity:.7}}
@keyframes flip-wash{12%{opacity:1}100%{opacity:0}}

/* Two hinged slabs with raised panels, carved rosettes and visible inner edges. */
.west-door{perspective:850px;border-color:var(--wood-edge);background:var(--wood-dark)}
.door-room{background:url('./reading-room.jpg') 50% 40%/cover;filter:brightness(1.1)}
.door-leaf{position:absolute;top:0;bottom:0;width:50%;border:3px solid var(--wood-edge);background:repeating-linear-gradient(91deg,transparent 0 8px,#17150d30 9px 10px),linear-gradient(90deg,var(--wood-dark),var(--wood) 32%,var(--wood-dark));transform-style:preserve-3d;transition:transform 1.15s var(--ease-out);backface-visibility:visible}
.door-left{left:0;transform-origin:left center;transform:rotateY(3deg);border-radius:110px 0 0 0}
.door-right{right:0;transform-origin:right center;transform:rotateY(-3deg);border-radius:0 110px 0 0}
.door-leaf:before{content:'';position:absolute;inset:24% 14% 10%;border:4px ridge var(--wood-edge);border-radius:48% 48% 2px 2px;background:repeating-radial-gradient(ellipse at 50% 15%,transparent 0 7px,var(--room-edge) 8px 9px,transparent 10px 18px);box-shadow:inset 2px 3px 8px var(--wood-dark)}
.door-leaf:after{content:'';position:absolute;top:0;bottom:0;width:14px;background:var(--wood);border:2px solid var(--wood-edge)}
.door-left:after{right:-14px;transform-origin:left;transform:rotateY(90deg)}.door-right:after{left:-14px;transform-origin:right;transform:rotateY(-90deg)}
.door-leaf b{position:absolute;left:20%;right:20%;top:38%;aspect-ratio:1;border:3px double var(--wood-edge);transform:rotate(45deg);border-radius:35%}
.door-leaf i{position:absolute;top:60%;width:10px;height:25px;border:2px solid var(--brass);border-radius:50%;background:var(--wood-dark)}.door-left i{right:9px}.door-right i{left:9px}
.west-door:is(:hover,:focus-visible) .door-left{transform:rotateY(10deg)}.west-door:is(:hover,:focus-visible) .door-right{transform:rotateY(-10deg)}
.door-seam{position:absolute;left:calc(50% - 1px);top:12%;bottom:0;width:2px;background:var(--warm-light);opacity:.25;box-shadow:0 0 14px 4px var(--candle-wash);transition:opacity var(--presence-fade);pointer-events:none}
.west-door:is(:hover,:focus-visible) .door-seam{opacity:1}
.door-dust{position:absolute;inset:10% 15%;opacity:0;pointer-events:none;transition:opacity var(--presence-fade)}.west-door:is(:hover,:focus-visible) .door-dust{opacity:.5}
.door-dust i{position:absolute;left:40%;top:55%;width:2px;height:2px;border-radius:50%;background:var(--warm-light);animation:door-drift 4s linear infinite}
.door-dust i:nth-child(2){left:56%;top:38%;animation-delay:-1s}.door-dust i:nth-child(3){left:49%;top:72%;animation-delay:-2s}.door-dust i:nth-child(4){left:62%;top:64%;animation-delay:-3s}
@keyframes door-drift{to{transform:translate(7px,-35px);opacity:0}}
.door-opening .door-left,.door-opening:is(:hover,:focus-visible) .door-left{transform:rotateY(108deg)}.door-opening .door-right,.door-opening:is(:hover,:focus-visible) .door-right{transform:rotateY(-108deg)}
.door-opening :is(.door-caption,.door-seam){opacity:0;transition:opacity var(--presence-fade)}
.room-entry{position:fixed;inset:0;z-index:19;overflow:clip;pointer-events:none;background-color:var(--wood);background-size:cover;background-position:50% 40%}
.entry-hall{animation:none!important}.entry-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--presence-fade)}.entry-film.ready{opacity:1}
html[data-motion=off] :is(.table-scenery>img,.reader-stage,.room-shade,.room-candlelight){transform:none!important}
html[data-motion=off] :is(.room-candlelight,.table-flip-light,.door-dust,.room-entry){display:none}
html[data-motion=off] .door-leaf{transform:none!important}
@media(prefers-reduced-motion:reduce){
 .table-scenery>img,.reader-stage,.room-shade,.room-candlelight{transform:none!important}
 .room-candlelight,.table-flip-light,.door-dust,.room-entry{display:none}.door-leaf{transform:none!important}
}