@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=Outfit:wght@300;400;500&display=swap');
:root{color-scheme:dark;--progress:0%;font-family:'Outfit','Noto Sans KR',sans-serif;color:#e9eeed;background:#080f12}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #d1e5df;outline-offset:6px}
.experience{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;transition:opacity .85s}
.world,.scene{position:absolute;inset:0;overflow:hidden}.world{z-index:-1;background:#080f12}.room{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#477175 0%,#1b343d 25%,#0a171e 65%);opacity:0;animation:room-arrives 22s linear both}.room-glow{position:absolute;inset:10% 15%;background:radial-gradient(ellipse,#bfddd42b,transparent 60%)}
.room-grid{position:absolute;left:-100%;width:300%;height:180%;top:42%;background-image:linear-gradient(#badbd735 1px,transparent 1px),linear-gradient(90deg,#badbd730 1px,transparent 1px);background-size:110px 90px;transform:perspective(400px) rotateX(64deg);transform-origin:50% 0;mask-image:linear-gradient(transparent,#000 15%,#000 70%,transparent)}
.room-wall{position:absolute;width:30%;height:80%;top:0;border:1px solid #cce0d825;background:linear-gradient(90deg,transparent,#83acaa07);}.wall-left{left:0;clip-path:polygon(0 0,100% 26%,100% 66%,0 100%)}.wall-right{right:0;clip-path:polygon(0 26%,100% 0,100% 100%,0 66%)}.horizon{position:absolute;left:0;right:0;top:42%;height:1px;background:linear-gradient(90deg,transparent,#e1f0dc40,transparent)}
.paper-grid{position:absolute;inset:0;background-image:linear-gradient(#8193940d 1px,transparent 1px),linear-gradient(90deg,#8193940d 1px,transparent 1px);background-size:56px 56px;animation:paper-fades 22s linear both;z-index:3;pointer-events:none}
.journey{position:absolute;inset:0;transform-origin:50% 39%;animation:cross-door 22s cubic-bezier(.45,0,.25,1) both;z-index:2}
.doorway{position:absolute;width:200px;height:320px;left:50%;top:39%;transform:translate(-50%,-50%);perspective:850px;box-shadow:0 0 0 200vmax #080f12;}
.door-depth{position:absolute;inset:0;border:1px solid #e2eee276;box-shadow:inset 7px 0 13px #0008,0 0 40px #c2e8cd15;animation:depth-appears 22s linear both}
.door-leaf{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(110deg,#121f24,#0b151a 65%,#18272c);border:1px solid #c4d1cb33;backface-visibility:hidden;animation:open-door 22s cubic-bezier(.4,0,.2,1) both;box-shadow:inset -3px 0 5px #d5e6dc0d}.handle{position:absolute;right:16px;top:51%;width:17px;height:3px;background:#a7b8b2;box-shadow:0 1px 4px #000}
.door-outline{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#d0e2d5;stroke-width:1;stroke-dasharray:830;stroke-dashoffset:830;animation:draw-door 22s ease both;pointer-events:none}.threshold{position:absolute;left:0;right:0;bottom:0;height:2px;background:#e1ecd7;box-shadow:0 0 25px 3px #bfdfce55;animation:depth-appears 22s linear both}
.cast-light{position:absolute;left:50%;top:calc(39% + 160px);width:700px;height:50%;transform:translateX(-50%);clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);background:linear-gradient(#bad9bb28,transparent 85%);z-index:3;animation:spill 22s linear both;pointer-events:none}
.vignette{position:absolute;inset:0;background:linear-gradient(0deg,#050c11 0%,#050c1180 23%,transparent 53%,#050c1130);z-index:4;pointer-events:none}
header{padding:26px 38px;width:100%;display:flex;justify-content:space-between;align-items:center;min-height:96px}.wordmark{font-size:13px;font-weight:400;letter-spacing:3px;color:#c7d4d4}#motion{width:44px;height:44px;color:#9aacae;background:transparent;border:1px solid #b8cece20;border-radius:50%;font-size:13px}
.intro{text-align:center;margin:auto 24px 0;padding-top:340px}h1{font-size:clamp(26px,2.6vw,37px);font-weight:300;letter-spacing:-1.4px;margin:0}#status{font-size:12px;color:#8a9fa2;margin:16px 0 0;font-weight:300}
.loading{width:min(240px,calc(100% - 80px));margin:30px 0 clamp(26px,6vh,70px);text-align:center}.percentage{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-bottom:14px}.percentage strong{font-size:23px;font-weight:300;font-variant-numeric:tabular-nums}.percentage small{font-size:10px;color:#82999b}.progress-track{height:1px;background:#b1d0cb24}.progress-track>div{height:100%;width:var(--progress);background:#d1e3d7;transition:width .12s linear}.enter{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding:12px 17px;border:1px solid #bfd4d035;border-radius:3px;background:#c7e1d608;color:#d8e5df;font-size:12px;transition:opacity .4s,background .3s}.enter:disabled{visibility:hidden;opacity:0}.enter:hover{background:#c7e1d618}.enter span:last-child{font-size:18px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.paused *{animation-play-state:paused!important}.leaving{opacity:0}
.destination{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(ellipse at center,#213b40,#080f12 70%)}.destination[hidden]{display:none}.destination h2{font-size:clamp(25px,4vw,42px);font-weight:300;letter-spacing:-1.5px}.destination p{color:#8a9fa2;font-size:13px}.destination-link{margin-top:25px;border:1px solid #bfd4d035;padding:16px 24px;font-size:13px}.destination button{margin-top:20px;min-height:44px;padding:12px 20px;border:0;background:none;color:#a5babb;font-size:12px}
@keyframes draw-door{0%{stroke-dashoffset:830;opacity:0}5%{opacity:1}24%,68%{stroke-dashoffset:0;opacity:1}85%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes open-door{0%,24%{transform:rotateY(0);opacity:0}27%{transform:rotateY(0);opacity:1}58%,100%{transform:rotateY(-82deg);opacity:1}}
@keyframes depth-appears{0%,24%{opacity:0}37%,100%{opacity:1}}
@keyframes room-arrives{0%,23%{opacity:0;transform:scale(.96)}34%{opacity:1;transform:scale(.96)}100%{opacity:1;transform:scale(1.08)}}
@keyframes paper-fades{0%,22%{opacity:1}45%,100%{opacity:0}}
@keyframes cross-door{0%,53%{transform:scale(1);opacity:1}90%{transform:scale(12);opacity:1}100%{transform:scale(16);opacity:0}}
@keyframes spill{0%,28%{opacity:0}48%,60%{opacity:1}84%,100%{opacity:0}}
@media(max-width:700px){header{padding:18px 24px;min-height:80px}.wordmark{font-size:12px}.doorway{width:160px;height:260px;top:36%}.journey{transform-origin:50% 36%}.cast-light{top:calc(36% + 130px)}.intro{padding-top:300px}h1{font-size:27px}.loading{margin-top:25px;margin-bottom:30px}}
@media(max-height:650px){header{padding-top:10px;padding-bottom:10px;min-height:64px}.doorway{height:190px;width:120px;top:32%}.journey{transform-origin:50% 32%}.cast-light{top:calc(32% + 95px)}.intro{padding-top:160px}h1{font-size:23px}.loading{margin-top:15px;margin-bottom:16px}.enter{margin-top:12px}.percentage{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.journey,.paper-grid,.cast-light{display:none}.room{opacity:1}}