.door{color:#eef0ea;background:#070908;display:flex;position:fixed;inset:0;overflow:hidden}.door-panel{min-width:0;color:inherit;transition:flex-grow .9s var(--ease-out-expo), filter .7s var(--ease-out-expo);flex:1 1 0;text-decoration:none;position:relative;overflow:hidden}.door-left{background:#0a0e0d;border-right:1px solid #1d2624}.door-right{background:#0d0807}:is(.door:has(.door-left:hover) .door-left,.door:has(.door-right:hover) .door-right,.door:has(.door-left:focus-visible) .door-left,.door:has(.door-right:focus-visible) .door-right){flex-grow:1.45}:is(.door:has(.door-left:hover) .door-right,.door:has(.door-right:hover) .door-left){filter:brightness(.5)saturate(.6)}.door[data-leaving=minimal] .door-left,.door[data-leaving=story] .door-right{filter:none;flex-grow:40}.door[data-leaving] .door-copy{opacity:0;transform:translateY(16px)}.door-canvas{position:absolute;inset:0}.door-right .door-canvas:after{content:"";pointer-events:none;background:linear-gradient(#0000 40%,#0d080759 66%,#0d0807eb 100%);position:absolute;inset:0}.door-left .door-canvas+.door-copy:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(60% 60% at 30% 100%,#0a0e0de6,#0000 70%);position:absolute;inset:-40vh -10vw -10vh}.door-copy{z-index:2;transition:opacity .4s, transform .6s var(--ease-out-expo);position:absolute;bottom:clamp(28px,8vh,80px);left:clamp(24px,4vw,56px);right:24px}.door-index{font:500 10px/1 var(--font-martian);letter-spacing:.24em;text-transform:uppercase;color:#7f8a85;margin-bottom:18px;display:block}.door-right .door-index{color:#c08a6c}.door-title{font:400 clamp(64px, 7.4vw, 112px) / .86 var(--font-vt323);letter-spacing:-.01em;margin:0}.door-left .door-title{color:#dfeee6}.door-right .door-title{color:#ffe2c2;text-shadow:-2px 0 #ff2d558c,2px 0 #00e5ff66}.door-sub{max-width:34ch;font:400 15px/1.5 var(--font-hanken);color:#9aa49f;margin:18px 0 0}.door-right .door-sub{color:#d1a58c}.door-enter{font:500 14px/1 var(--font-hanken);letter-spacing:.02em;align-items:center;gap:12px;margin-top:34px;display:inline-flex}.door-enter svg{transition:transform .6s var(--ease-out-expo)}.door-panel:hover .door-enter svg{transform:translate(10px)}.door-enter:after{content:"";transform-origin:0;height:1px;transition:transform .7s var(--ease-out-expo);background:currentColor;position:absolute;bottom:-6px;left:0;right:0;transform:scaleX(0)}.door-enter{position:relative}.door-panel:hover .door-enter:after{transform:scaleX(1)}.door-hud{z-index:5;font:500 10px/1 var(--font-martian);letter-spacing:.22em;text-transform:uppercase;color:#c9cfcb;mix-blend-mode:difference;pointer-events:none;justify-content:space-between;padding:20px clamp(24px,4vw,56px);display:flex;position:absolute;top:0;left:0;right:0}.door-hint{z-index:5;font:500 10px/1 var(--font-martian);letter-spacing:.2em;text-transform:uppercase;color:#8b938f;mix-blend-mode:difference;pointer-events:none;margin:0;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.door-hint kbd{font:inherit;border:1px solid;padding:3px 6px;display:inline-block}@media (max-width:767px){.door{flex-direction:column}.door-right .door-canvas:after{background:linear-gradient(#0000 22%,#0d0807cc 58%,#0d0807f5 100%)}.door-left{border-bottom:1px solid #1d2624;border-right:0}.door-hud-mid,.door-hint{display:none}.door-title{font-size:58px}.door-copy{bottom:22px}.door-sub{margin-top:10px;font-size:14px}.door-enter{margin-top:16px}.door-index{margin-bottom:10px}}@media (max-width:767px) and (max-height:700px){.door-sub{display:none}}
