*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:var(--font-body);color:#C0C0C0;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.portal{position:fixed;inset:0;display:flex}
.portal::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,229,255,.02) 2px,rgba(0,229,255,.02) 4px),radial-gradient(ellipse 80% 70% at 50% 50%,transparent 40%,rgba(0,0,0,.75) 100%)}
.door{position:relative;flex:1 1 50%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(26px,5vw,78px);overflow:hidden;transition:flex-grow 1.1s var(--ease-glass),opacity .8s;opacity:0}
.revealed .door{opacity:1}
.portal:hover .door{opacity:.38}
.portal .door:hover,.portal .door:focus-visible{opacity:1;flex-grow:1.45;outline:none}
.door-bg{position:absolute;inset:-4%;transition:transform 8s linear,filter 1.1s}
.door:hover .door-bg{transform:scale(1.04)}
.d-studio .door-bg{background:radial-gradient(circle at 50% 42%,rgba(0,229,255,.10),transparent 45%),linear-gradient(90deg,rgba(0,229,255,.05) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(0deg,rgba(0,229,255,.04) 1px,transparent 1px) 0 0/26px 26px,#000}
.d-studio .ghost{position:absolute;left:50%;top:42%;width:min(46vh,72%);transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:.16;filter:grayscale(1) brightness(1.2);transition:opacity 1.1s,filter 1.1s}
.d-studio:hover .ghost{opacity:.6;filter:grayscale(0) drop-shadow(0 0 60px rgba(255,59,0,.4)) drop-shadow(0 0 24px rgba(63,232,224,.3))}
.d-game .door-bg{background:url('../img/hero-bg.jpg') 55% 35%/cover no-repeat;filter:grayscale(.85) brightness(.32) contrast(1.15)}
.d-game:hover .door-bg{filter:grayscale(0) brightness(.75) contrast(1.05)}
.d-game::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 35%,rgba(0,0,0,.9) 100%)}
.d-studio::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85) 100%)}
.door-copy{position:relative;z-index:3;max-width:460px;transform:translateY(13px);transition:transform 1.1s var(--ease-glass)}
.door:hover .door-copy{transform:none}
.d-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#555;margin-bottom:16px;display:block;transition:color .6s}
.d-studio:hover .d-tag{color:#00E5FF}.d-game:hover .d-tag{color:#FF6A2B}
.d-title{font-family:var(--font-display);font-weight:900;font-size:clamp(30px,4vw,58px);line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.d-line{font-family:var(--font-display);font-size:clamp(14px,1.3vw,17px);line-height:1.7;color:#8a8a8a;margin-bottom:26px;transition:color .6s}
.door:hover .d-line{color:#E0E0E0}
.d-go{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;display:inline-flex;align-items:center;gap:13px;padding:14px 26px;border:1px solid #333;color:#8a8a8a;transition:all .5s}
.d-studio:hover .d-go{border-color:#00E5FF;color:#00E5FF}
.d-game:hover .d-go{border-color:#FF3B00;color:#FF6A2B;box-shadow:0 0 24px rgba(255,59,0,.25)}
.seam{position:absolute;top:0;bottom:0;left:50%;width:1px;z-index:5;background:linear-gradient(180deg,transparent,rgba(0,229,255,.5) 30%,rgba(255,59,0,.6) 70%,transparent);opacity:0;transition:opacity 1.2s,left 1.1s var(--ease-glass)}
.revealed .seam{opacity:.7}
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,52px);font-family:var(--font-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#444;pointer-events:none}
.brand{display:flex;align-items:center;gap:13px;color:#fff;font-weight:700;letter-spacing:.32em;font-size:12px}
.brand img{width:30px;height:30px;mix-blend-mode:screen}
.bottom{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:center;padding:20px;font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#444;pointer-events:none;opacity:0;transition:opacity 1s 1s}
.revealed .bottom{opacity:1}
.boot{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:#000;transition:opacity 1s,visibility 1s}
.revealed .boot{opacity:0;visibility:hidden}
.boot img{width:84px;mix-blend-mode:screen;filter:drop-shadow(0 0 30px rgba(255,59,0,.45));animation:breathe 3s ease-in-out infinite}
.boot-lines{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;line-height:2.1;color:#00E5FF;min-height:76px;text-align:left}
.boot-lines p{opacity:0;transition:opacity .25s}.boot-lines p.on{opacity:1}
.boot-lines p.mute{color:#444}
.skip{font-family:var(--font-mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#333;background:none;border:0;cursor:pointer}
.skip:hover{color:#00E5FF}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
@media (max-width:760px){.portal{flex-direction:column}.seam{display:none}.portal .door:hover{flex-grow:1.2}.d-title{font-size:30px}}
@media (prefers-reduced-motion:reduce){.door,.door-copy,.door-bg,.seam,.boot,.bottom{transition:none}.boot img{animation:none}}