.door-stage{position:relative;display:grid;place-items:center;width:100%;isolation:isolate;overflow:visible;padding:8px 0}
.door-dialogue{position:absolute;top:26%;left:50%;transform:translateX(-50%);z-index:5;width:max-content;max-width:calc(100% - 16px);margin:0;padding:14px 18px;border:1.5px solid var(--ink);border-radius:14px;background:white;font-size:clamp(15px,3.8vw,18px);line-height:1.7;text-align:center;pointer-events:none;animation:dialogue-in 180ms ease-out}
.door-dialogue::after{content:'';position:absolute;bottom:-9px;left:62%;width:16px;height:16px;background:white;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:skewY(-25deg)}
@keyframes dialogue-in{from{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}
@media(prefers-reduced-motion:reduce){.door-dialogue{animation:none}}
.door-frame{perspective:1000px}
.door-frame.open .door{transform:rotateY(-96deg)}
.peek-layer{position:absolute;inset:5px;overflow:hidden;background:#fff;pointer-events:none;z-index:1}
.peek-character{position:absolute;right:-62px;top:28px;width:210px;height:230px;object-fit:contain;filter:grayscale(1)}
.door-frame.peeking .door{animation:peek-door 3300ms ease-in-out both}
.door-frame.peeking .peek-character{animation:peek-person 3300ms ease-in-out both}
.reunion-layer{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.reunion-layer img{position:absolute;bottom:10px;width:180px;height:220px;object-fit:contain;filter:grayscale(1)}
.reunion-layer .grandpa{left:calc(50% - 125px);animation:meet-left 4200ms ease-in-out both}
.reunion-layer .grandma{right:calc(50% - 125px);animation:meet-right 4200ms ease-in-out both}
.rank-message{position:absolute;z-index:4;top:32%;margin:0;padding:15px 22px;border:1px solid var(--ink);background:white;font-size:clamp(16px,4vw,20px);font-weight:500;box-shadow:4px 4px 0 #e7e7e7;animation:rank-up 2800ms ease both;pointer-events:none}
@keyframes peek-door{0%,100%{transform:rotateY(0)}25%,76%{transform:rotateY(-34deg)}}
@keyframes peek-person{0%,10%,100%{transform:translateX(22px);opacity:0}28%,75%{transform:translateX(0);opacity:1}90%{transform:translateX(12px);opacity:0}}
@keyframes meet-left{0%{transform:translateX(-60vw);opacity:0}12%{opacity:1}42%,78%{transform:translateX(0);opacity:1}100%{transform:translateX(0);opacity:0}}
@keyframes meet-right{0%{transform:translateX(60vw);opacity:0}12%{opacity:1}42%,78%{transform:translateX(0);opacity:1}100%{transform:translateX(0);opacity:0}}
@keyframes rank-up{0%{transform:translateY(12px);opacity:0}15%,80%{transform:translateY(0);opacity:1}100%{transform:translateY(-10px);opacity:0}}
@media(max-width:430px){.peek-character{right:-62px;top:25px;width:198px;height:215px}}
@media(max-height:650px){.peek-character{top:15px;height:190px}.reunion-layer img{height:190px}}
.reply-message{position:absolute;right:8%;top:24%;z-index:5;background:white;border:2px solid var(--ink);border-radius:50% 45% 48% 35%;padding:18px 24px;font-size:22px;font-weight:700;margin:0;pointer-events:none;animation:reply 3000ms ease both}
.door-frame.protesting .door{animation:protest 400ms ease 2}
.reunion-layer.dismissal .grandpa{animation:leave-left 3400ms ease-in both}
.reunion-layer.dismissal .grandma{animation:leave-right 3400ms ease-in both}
.vet-layer,.coral-layer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;display:flex;justify-content:center;align-items:flex-end}
.vet-layer img{width:min(230px,100%);height:230px;object-fit:contain;filter:grayscale(1);animation:vet-visit 4600ms ease-in-out both}
.vet-result{position:absolute;top:12px;left:50%;transform:translateX(-50%);min-width:150px;padding:12px 20px;background:white;border:2px solid var(--ink);text-align:center;font-size:20px;font-weight:bold}
.vet-result span{display:block}.examining{animation:examining 4600ms step-end both}.healthy{position:absolute;inset:12px 0;animation:healthy 4600ms step-end both}
@keyframes examining{0%{visibility:visible}42%,100%{visibility:hidden}}
@keyframes healthy{0%{visibility:hidden}42%,100%{visibility:visible}}
.coral-layer img{width:230px;height:235px;object-fit:contain;filter:grayscale(1);transform-origin:center bottom;animation:coral-grow 3800ms ease both}
@keyframes reply{0%,100%{opacity:0;transform:scale(.8) rotate(-4deg)}12%,82%{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes protest{25%,75%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes leave-left{0%{opacity:0;transform:translateX(0)}15%,32%{opacity:1;transform:translateX(0)}90%,100%{opacity:0;transform:translateX(-60vw)}}
@keyframes leave-right{0%{opacity:0;transform:translateX(0)}15%,32%{opacity:1;transform:translateX(0)}90%,100%{opacity:0;transform:translateX(60vw)}}
@keyframes vet-visit{0%{opacity:0;transform:translateX(-40px)}15%,58%{opacity:1;transform:translateX(0)}65%,75%{opacity:1;transform:translateY(-8px)}70%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateX(60vw)}}
@keyframes coral-grow{0%{opacity:0;transform:scaleY(.05) translateY(50px)}30%{opacity:1;transform:scaleY(1.08)}42%,78%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.8) translateY(20px)}}
@media(prefers-reduced-motion:reduce){.door-frame.peeking .door{animation:none;transform:rotateY(-34deg)}.door-frame.peeking .peek-character,.reunion-layer img,.rank-message,.reply-message,.vet-layer img,.coral-layer img,.door-frame.protesting .door{animation:none!important}}