/* Two quiet panels meet, then open onto the next room. */
.door-transition{display:none;position:fixed;inset:0;z-index:1000;overflow:hidden;isolation:isolate;perspective:1400px;pointer-events:none}
html[data-door-state] .door-transition{display:grid;place-items:center;pointer-events:auto}
.door-leaf{position:absolute;inset:0 auto 0 0;width:50.1%;height:100%;background:radial-gradient(ellipse at 100% 50%,#c6a0e51c,transparent 65%),linear-gradient(110deg,#1c1520,#302337);border-right:1px solid #f3d28399;box-shadow:inset -12px 0 50px #0003;transform-origin:left center;backface-visibility:hidden;will-change:transform}
.door-leaf-right{left:auto;right:0;background:radial-gradient(ellipse at 0 50%,#f3d28312,transparent 65%),linear-gradient(250deg,#1c1520,#302337);border-right:0;border-left:1px solid #f3d28399;box-shadow:inset 12px 0 50px #0003;transform-origin:right center}
.door-transition-mark{position:relative;z-index:1;display:grid;justify-items:center;gap:18px;text-align:center;color:#f3d283;font-size:14px;font-weight:650;letter-spacing:2px;text-shadow:0 2px 16px #1c1520;padding:26px 36px;border-radius:50%;background:radial-gradient(ellipse,#28202feb 22%,#28202f00 70%)}
.door-transition-mark img{display:block;width:74px;height:70px;object-fit:contain;filter:drop-shadow(0 0 18px #f3d28325)}
html[data-door-state=leaving] .door-leaf{animation:door-close-left .34s cubic-bezier(.3,.05,.4,1) both}
html[data-door-state=leaving] .door-leaf-right{animation-name:door-close-right}
html[data-door-state=leaving] .door-transition-mark{animation:door-mark-in .3s .08s both}
html[data-door-state=opening] .door-leaf{animation:door-open-left .7s cubic-bezier(.22,.7,.2,1) both}
html[data-door-state=opening] .door-leaf-right{animation-name:door-open-right}
html[data-door-state=opening] .door-transition-mark{animation:door-mark-out .25s ease both}
html[data-door-state=opening] .door-transition{pointer-events:none}
@keyframes door-close-left{from{transform:translateX(-102%)}to{transform:none}}
@keyframes door-close-right{from{transform:translateX(102%)}to{transform:none}}
@keyframes door-open-left{to{transform:translateX(-30%) rotateY(-100deg);opacity:.25}}
@keyframes door-open-right{to{transform:translateX(30%) rotateY(100deg);opacity:.25}}
@keyframes door-mark-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes door-mark-out{to{opacity:0;transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){html[data-door-state] .door-transition{display:none}.door-leaf,.door-transition-mark{animation:none!important}}