.portal{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(120% 70% at 50% 34%,rgba(45,18,89,0.5),transparent 66%),var(--pd-void);--door-w: clamp(190px, 30vmin, 330px);--door-h: calc(var(--door-w) * 2.15);--door-thickness: 18px;--door-angle: 0deg;--tilt-x: 0;--tilt-y: 0;--zoom: 0px;--seep: 1;--ray-reach: 1}.scene{position:relative;z-index:2;width:100%;height:100svh;display:grid;place-items:center;perspective:1400px;perspective-origin:50% 44%}.stage{position:relative;transform-style:preserve-3d;transform:translateZ(var(--zoom)) rotateX(calc(var(--tilt-x) * 1deg)) rotateY(calc(var(--tilt-y) * 1deg));transition:transform var(--pd-dur-camera) var(--pd-ease-camera) var(--pd-delay-camera);will-change:transform}.stage.is-tracking{transition:none}.doorway{position:relative;width:var(--door-w);height:var(--door-h);transform-style:preserve-3d;border-radius:4px 4px 0 0;background:linear-gradient(90deg,#140a26,#1c0f33 55%,rgba(28,15,51,0)) 0 7.4% / 11px 5% no-repeat,linear-gradient(90deg,#140a26,#1c0f33 55%,rgba(28,15,51,0)) 0 87% / 11px 5% no-repeat,linear-gradient(180deg,rgba(var(--pd-light-300-rgb),0.85) 0% 20%,#b98fe0 34%,#7a54a8 58%,#472a6e 100%) 0 100% / 100% 9px no-repeat,radial-gradient(132% 84% at 50% 58%,var(--pd-light-300),var(--pd-light-400) 22%,var(--pd-light-500) 44%,var(--pd-light-mid) 80%,var(--pd-purple-500) 100%);box-shadow:inset 0 0 calc(22px * var(--seep)) 0 rgba(var(--pd-light-300-rgb),0.5),0 0 calc(46px * var(--seep)) 0 rgba(var(--pd-light-500-rgb),0.24),0 0 calc(150px * var(--seep)) calc(10px * var(--seep)) rgba(190,120,224,0.1);transition:box-shadow var(--pd-dur-door) var(--pd-ease-door)}.doorway__frame{position:absolute;inset:calc(var(--door-thickness) * -1) calc(var(--door-thickness) * -1) 0;border-radius:8px 8px 0 0;background:linear-gradient(155deg,var(--pd-purple-800),var(--pd-purple-900) 60%,#120726);box-shadow:inset 0 0 0 1px rgba(var(--pd-purple-400-rgb),0.22),inset 0 2px 0 rgba(var(--pd-purple-300-rgb),0.14),var(--pd-shadow-lg);transform:translateZ(calc(var(--door-thickness) * -0.5))}.doorway__depth{position:absolute;inset:0;transform:translateZ(-140px) scale(0.9);background:radial-gradient(100% 62% at 50% 72%,var(--pd-light-400),var(--pd-light-500) 40%,rgba(168,95,208,0.85) 76%,rgba(var(--pd-light-deep-rgb),0.92) 100%);transition:transform var(--pd-dur-camera) var(--pd-ease-camera) var(--pd-delay-camera)}.doorway__depth::after{content:"";position:absolute;inset:0;background:radial-gradient(100% 70% at 50% 60%,rgba(var(--pd-purple-900-rgb),0.72),rgba(8,6,15,0.92) 100%);opacity:0;transition:opacity var(--pd-dur-camera) var(--pd-ease-camera) var(--pd-delay-camera)}.doorway__seep{position:absolute;inset:0;transform:translateZ(-4px);pointer-events:none;opacity:calc(0.9 * var(--seep));transition:opacity var(--pd-dur-door) var(--pd-ease-door)}.doorway__seep::before,.doorway__seep::after{content:"";position:absolute;border-radius:5px 5px 0 0}.doorway__seep::before{inset:-3px;background:linear-gradient(to bottom,rgba(var(--pd-light-300-rgb),0.72) 0%,rgba(var(--pd-light-400-rgb),0.58) 48%,rgba(var(--pd-light-500-rgb),0.33) 78%,rgba(var(--pd-light-500-rgb),0.17) 100%);filter:blur(13px)}.doorway__seep::after{inset:-12px;background:linear-gradient(to bottom,rgba(var(--pd-light-400-rgb),0.35) 0%,rgba(var(--pd-light-500-rgb),0.26) 50%,rgba(var(--pd-light-500-rgb),0.12) 80%,rgba(var(--pd-light-500-rgb),0.05) 100%);filter:blur(44px)}.rays{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:calc(var(--door-w) * 6);height:calc(var(--door-w) * 6);margin-inline-start:calc(var(--door-w) * -3);margin-block-start:calc(var(--door-w) * -3);transform:translateZ(-30px) scale(var(--ray-reach));transition:transform var(--pd-dur-door) var(--pd-ease-door),opacity var(--pd-dur-door) var(--pd-ease-door);pointer-events:none;opacity:calc(0.6 * var(--seep));mask-image:radial-gradient(ellipse 10.32% 21.6% at 50% 50%,transparent 52%,#000 100%),radial-gradient(closest-side,#000 18%,rgba(0,0,0,0.55) 40.8%,rgba(0,0,0,0.24) 62.4%,rgba(0,0,0,0.08) 79.2%,transparent 91.2%);mask-composite:intersect;-webkit-mask-composite:source-in}.rays::before,.rays::after{content:"";position:absolute;inset:0}.rays::before{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(var(--pd-light-300-rgb),0.3) 0deg 1.2deg,transparent 1.2deg 3.6deg,rgba(var(--pd-light-500-rgb),0.2) 3.6deg 4.6deg,transparent 4.6deg 6.4deg,rgba(var(--pd-light-400-rgb),0.13) 6.4deg 7.2deg,transparent 7.2deg 10deg);filter:blur(7px);animation:rays-turn 120s linear infinite;will-change:transform}.rays::after{inset:15%;background:radial-gradient(closest-side,rgba(var(--pd-light-400-rgb),0.22),rgba(var(--pd-light-500-rgb),0.1) 54.3%,transparent 100%);animation:ray-breathe 9s ease-in-out infinite alternate;will-change:opacity}@keyframes rays-turn{to{transform:rotate(360deg)}}@keyframes ray-breathe{from{opacity:0.6}to{opacity:1}}.fog{position:absolute;inset-block-start:-40%;inset-inline-start:50%;width:calc(var(--door-w) * 5);height:calc(var(--door-h) * 2.2);margin-inline-start:calc(var(--door-w) * -2.5);transform:translateZ(-45px);pointer-events:none;opacity:calc(0.45 * var(--seep));transition:opacity var(--pd-dur-door) var(--pd-ease-door);background:radial-gradient(38% 30% at 34% 62%,rgba(var(--pd-light-500-rgb),0.09),transparent 72%),radial-gradient(46% 36% at 70% 44%,rgba(var(--pd-purple-300-rgb),0.07),transparent 74%),radial-gradient(60% 44% at 50% 74%,rgba(190,120,224,0.06),transparent 76%);animation:fog-roll-flat 24s ease-in-out infinite alternate}} @keyframes fog-roll-flat{from{transform:translateZ(-45px) translate3d(-2.5%,1.5%,0)}to{transform:translateZ(-45px) translate3d(3.5%,-2%,0)}}.door{position:absolute;inset:4px 5px 6px 6px;transform-origin:left center;transform:rotateY(var(--door-angle));transform-style:preserve-3d;transition:transform var(--pd-dur-door) var(--pd-ease-door);will-change:transform}.door__face{position:absolute;inset:0;backface-visibility:hidden;border-radius:3px 3px 0 0;overflow:hidden;background:linear-gradient(168deg,var(--pd-purple-600) 0%,var(--pd-purple-500) 34%,var(--pd-purple-700) 78%,var(--pd-purple-800) 100%);box-shadow:inset 0 0 0 1px rgba(var(--pd-purple-300-rgb),0.18),inset 0 1px 0 rgba(var(--pd-purple-200-rgb),0.22),inset -14px 0 32px -18px rgba(8,6,15,0.9),var(--pd-shadow-md)}.door__face::before{content:"";position:absolute;inset:-12%;background:linear-gradient(115deg,transparent 34%,rgba(var(--pd-purple-200-rgb),0.06) 45%,rgba(var(--pd-light-300-rgb),0.12) 50%,rgba(var(--pd-purple-200-rgb),0.06) 55%,transparent 66%);translate:calc(var(--tilt-y) * -2.6px) calc(var(--tilt-x) * 2px);will-change:translate;pointer-events:none}.portal.is-open .door__face::before{translate:130% 0;transition:translate var(--pd-dur-door) var(--pd-ease-door)}.door__face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(var(--pd-light-500-rgb),calc(0.16 * var(--seep))) 0%,transparent 20%,transparent 87%,rgba(var(--pd-light-500-rgb),calc(0.12 * var(--seep))) 100%);pointer-events:none}.door__back{position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg) translateZ(1px);border-radius:3px 3px 0 0;background:linear-gradient(100deg,#c98fe0 0%,var(--pd-purple-700) 26%,var(--pd-purple-800) 100%);box-shadow:inset 0 0 0 1px rgba(var(--pd-light-500-rgb),0.16)}.door__edge{position:absolute;inset-block:0;inset-inline-end:0;width:var(--door-thickness);transform-origin:right center;transform:rotateY(-90deg);background:linear-gradient(180deg,var(--pd-purple-700),var(--pd-purple-900));box-shadow:inset 0 0 0 1px rgba(var(--pd-purple-300-rgb),0.12)}.door__panel{position:absolute;inset-inline:12%;border-radius:2px;background:linear-gradient(160deg,rgba(8,6,15,0.26),rgba(var(--pd-purple-200-rgb),0.05));box-shadow:inset 0 0 0 1px rgba(8,6,15,0.35),inset 0 1px 0 rgba(var(--pd-purple-200-rgb),0.16),0 1px 0 rgba(var(--pd-purple-200-rgb),0.07)}.door__panel--top{inset-block:7% 46%}.door__panel--bottom{inset-block:58% 8%}.door__handle{position:absolute;inset-inline-end:11%;inset-block-start:50%;width:9%;min-width:13px;aspect-ratio:1 / 2.6;transform:translateY(-50%);border-radius:var(--pd-radius-pill);overflow:hidden;background:linear-gradient(150deg,var(--pd-light-300),var(--pd-light-500) 45%,#9a5fc4);box-shadow:0 0 12px rgba(var(--pd-light-500-rgb),0.45),inset 0 -1px 2px rgba(var(--pd-light-deep-rgb),0.6)}.door__handle::after{content:"";position:absolute;inset:6% 16%;border-radius:inherit;background:radial-gradient(60% 36% at 50% 20%,rgba(var(--pd-light-300-rgb),0.65),transparent 72%)}.door__plate{position:absolute;inset-inline:22%;inset-block-end:3%;height:3%;border-radius:1px;background:linear-gradient(90deg,transparent,rgba(var(--pd-light-500-rgb),0.4),transparent)}.floor{position:absolute;--floor-back: calc(var(--door-h) * 0.9);inset-block-start:calc(var(--door-h) - var(--floor-back));inset-inline-start:50%;width:calc(var(--door-w) * 9);height:calc(var(--floor-back) + var(--door-h) * 2.2);margin-inline-start:calc(var(--door-w) * -4.5);--hinge-x: 44.4%;transform-origin:50% var(--floor-back);transform:rotateX(79deg);pointer-events:none;overflow:hidden;mask-image:radial-gradient(ellipse 58% calc(var(--door-h) * 4.16) at 50% var(--floor-back),#000 42%,rgba(0,0,0,0.55) 66%,transparent 92%);background:radial-gradient(42% 34% at 50% var(--floor-back),rgba(var(--pd-light-500-rgb),calc(0.035 * var(--seep))),transparent 72%),radial-gradient(90% 42% at 50% 100%,rgba(var(--pd-purple-500-rgb),0.05),transparent 72%),radial-gradient(70% 50% at 50% var(--floor-back),#110c1b 0%,#0a0713 45%,#070510 78%,#05040c 100%);box-shadow:inset 0 calc(var(--floor-back) + 40px) 80px -40px rgba(var(--pd-light-500-rgb),calc(0.07 * var(--seep)));transition:box-shadow var(--pd-dur-door) var(--pd-ease-door)}.portal.is-open .floor{transition-duration:var(--pd-dur-camera);transition-timing-function:var(--pd-ease-camera);transition-delay:var(--pd-delay-camera)}.floor::before{content:"";position:absolute;inset:var(--floor-back) 0 0 0;transform-origin:var(--hinge-x) 0;transform:rotate(-26deg);opacity:0;background:conic-gradient(from 168deg at var(--hinge-x) 0%,transparent 0deg,rgba(var(--pd-light-400-rgb),0.16) 8deg,rgba(var(--pd-light-300-rgb),0.3) 14deg,rgba(var(--pd-light-400-rgb),0.16) 20deg,transparent 28deg);mask-image:linear-gradient(180deg,rgba(0,0,0,0.9),transparent calc(var(--door-h) * 1.976));transition:opacity var(--pd-dur-door) var(--pd-ease-door),transform var(--pd-dur-door) var(--pd-ease-door)}.floor::after{content:"";position:absolute;inset:var(--floor-back) 14% auto 14%;height:calc(var(--door-h) * 1.404);background:radial-gradient(50% 58% at 50% 12%,rgba(var(--pd-light-400-rgb),0.06),transparent 72%);translate:calc(var(--tilt-y) * -5px) 0;will-change:translate;z-index:2}.floor__veins{position:absolute;inset:0;opacity:0.56;z-index:3;transform:rotate(-5deg) scale(1.18);--marble: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='720'><filter id='c' x='0' y='0' width='720' height='720' filterUnits='userSpaceOnUse'><feTurbulence type='fractalNoise' baseFrequency='0.005 0.0035' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.016 0 0 0 0 0.012 0 0 0 0 0.027 0 0 0 0.4 -0.1'/></filter><filter id='v' x='0' y='0' width='720' height='720' filterUnits='userSpaceOnUse'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.006' numOctaves='5' seed='7' stitchTiles='stitch'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0 0 0 0 0 0 0 0 0 0 0'/></feComponentTransfer><feColorMatrix values='0 0 0 0 0.016 0 0 0 0 0.012 0 0 0 0 0.027 0 0 0 1 0'/></filter><rect width='720' height='720' filter='url(%23c)'/><rect width='720' height='720' filter='url(%23v)'/></svg>");background-image:var(--marble);background-size:720px 720px;mask-image:linear-gradient(180deg,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.55) 45%,rgba(0,0,0,0.3) 75%,rgba(0,0,0,0.18) 100%)}.floor__reflection{position:absolute;inset-block-start:var(--floor-back);inset-inline-start:50%;width:calc(var(--door-w) * 1.02);height:calc(var(--door-h) * 1.15);margin-inline-start:calc(var(--door-w) * -0.51);z-index:1;opacity:calc(0.3 * var(--seep));background:linear-gradient(180deg,rgba(var(--pd-light-300-rgb),0.55) 0%,rgba(var(--pd-light-500-rgb),0.3) 18%,rgba(var(--pd-purple-500-rgb),0.22) 46%,rgba(var(--pd-purple-700-rgb),0.1) 72%,transparent 100%),linear-gradient(90deg,transparent 0%,rgba(var(--pd-light-500-rgb),0.14) 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0.55) 38%,transparent 88%);transition:opacity var(--pd-dur-camera) var(--pd-ease-camera) var(--pd-delay-camera)}.door-trigger{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:8;display:block;width:min(var(--door-w),46vw);height:min(var(--door-h),62vh);transform:translate(-50%,-50%);padding:0;border:0;border-radius:6px;background:transparent;text-decoration:none;cursor:pointer;transition:opacity var(--pd-dur-base) var(--pd-ease-standard)}.door-trigger:focus-visible{outline:3px solid var(--pd-light-400);outline-offset:10px}.door-trigger::after{content:"";position:absolute;inset:5%;border-radius:5px;opacity:0;pointer-events:none;box-shadow:0 0 38px 6px rgba(var(--pd-light-400-rgb),0.18);transition:opacity var(--pd-dur-base) var(--pd-ease-standard)}@media(hover:hover){.door-trigger:hover::after{opacity:1}}.portal.is-open .rays::before,.portal.is-open .rays::after,.portal.is-open .fog,.portal.is-dormant .rays::before,.portal.is-dormant .rays::after,.portal.is-dormant .fog{animation-play-state:paused}.portal.is-instant,.portal.is-instant *,.portal.is-instant *::before,.portal.is-instant *::after{transition-duration:0.01ms!important;transition-delay:0s!important;animation-duration:0.01ms!important;animation-delay:0s!important}.portal.is-instant{--pd-dur-camera: 0.01ms;--pd-delay-camera: 0s;--pd-delay-reveal: 0s}.portal.is-open{--door-angle: -104deg;--zoom: 900px;--seep: 1.3;--ray-reach: 1.7}.portal.is-open .doorway__depth::after{opacity:1}.portal.is-open .doorway,.portal.is-open .doorway__seep,.portal.is-open .rays,.portal.is-open .fog{transition-duration:var(--pd-dur-camera);transition-timing-function:var(--pd-ease-camera);transition-delay:var(--pd-delay-camera)}.portal.is-open .floor::before{opacity:0.85;transform:rotate(0deg)}.portal.is-open .doorway__seep::before{animation:seep-flare 1100ms var(--pd-ease-entrance)}@keyframes seep-flare{0%{transform:scale(1)}28%{transform:scale(1.16)}100%{transform:scale(1)}}.portal.is-open .door-trigger{opacity:0;pointer-events:none;transition-duration:var(--pd-dur-fast)}.portal.is-open .doorway__depth{transform:translateZ(-40px) scale(1.6)}.portal.is-open .floor__reflection{opacity:0.1}@media(max-width:40rem){.portal{--door-w: clamp(160px, 44vw, 240px);--door-thickness: 12px}.portal.is-open{--zoom: 620px}.scene{perspective:900px}.floor{width:calc(var(--door-w) * 7);margin-inline-start:calc(var(--door-w) * -3.5);--hinge-x: 42.9%;--floor-back: calc(var(--door-h) * 0.5)}.rays{width:calc(var(--door-w) * 3.9);height:calc(var(--door-w) * 3.9);margin-inline-start:calc(var(--door-w) * -1.95);margin-block-start:calc(var(--door-w) * -1.95);mask-image:radial-gradient(ellipse 15.92% 33.03% at 50% 50%,transparent 52%,#000 100%),radial-gradient(closest-side,#000 17.7%,rgba(0,0,0,0.55) 40.1%,rgba(0,0,0,0.24) 61.3%,rgba(0,0,0,0.08) 77.8%,transparent 89.6%)}.doorway__seep::before{filter:blur(9px)}.doorway__seep::after{filter:blur(28px)}.rays::before{filter:blur(5px)}}@media(max-height:34rem)and (orientation:landscape){.portal{--door-w: clamp(120px, 22vh, 180px)}}@media(prefers-reduced-motion:reduce){.rays::before,.rays::after,.fog{animation:none}.portal.is-open{--zoom: 0px}.portal.is-open .doorway__depth{transform:translateZ(-140px) scale(0.9)}.stage{transition:none}}.no-js .portal{min-height:auto;padding-block:var(--pd-space-8) var(--pd-space-9)}.no-js .scene{height:auto;padding-block:var(--pd-space-8) calc(var(--door-h) * 0.7)}@media(forced-colors:active){.rays,.fog,.floor,.doorway__depth{display:none}.door__face{border:2px solid ButtonBorder}.door-trigger{border:2px dashed ButtonBorder}}.door__handle{width:5.5%;min-width:10px;aspect-ratio:1;inset-inline-end:4.2%;inset-block-start:56%;border-radius:50%;overflow:visible;background:radial-gradient(circle at 38% 32%,var(--pd-light-300),var(--pd-light-500) 55%,#9a5fc4 100%);box-shadow:0 0 10px rgba(var(--pd-light-500-rgb),0.4),inset 0 -1px 2px rgba(var(--pd-light-deep-rgb),0.6)}.door__handle::after{inset:auto;inset-block-start:50%;inset-inline-end:30%;width:236%;height:31%;translate:0 -50%;border-radius:var(--pd-radius-pill);background:linear-gradient(180deg,var(--pd-light-300),var(--pd-light-500) 60%,#9a5fc4);box-shadow:0 1px 4px rgba(8,6,15,0.5),0 0 10px rgba(var(--pd-light-500-rgb),0.35);transform-origin:91% 50%;rotate:0deg;transition:rotate 320ms var(--pd-ease-standard) 1450ms}.portal.is-open .door__handle::after{rotate:-42deg;transition:rotate 340ms cubic-bezier(0.34,1.3,0.5,1)}.doorway::before{content:"";position:absolute;inset-inline-end:0;inset-block-start:56%;width:6px;height:3%;transform-origin:0% 50%;transform:translateY(-50%) scaleX(1);background:linear-gradient(270deg,#140a26,rgba(28,15,51,0));transition:transform 320ms var(--pd-ease-standard) 1450ms}.portal.is-open .doorway::before{transform:translateY(-50%) scaleX(0);transition:transform 340ms cubic-bezier(0.34,1.3,0.5,1)}.portal.is-open .door,.portal.is-open .floor::before,.portal.is-open .door__face::before{transition-delay:380ms}.portal.is-open .doorway__seep::before{animation-delay:380ms}.portal.is-open{--pd-delay-camera: 700ms;--pd-delay-reveal: 1880ms}@media(prefers-reduced-motion:reduce){.portal.is-open{--pd-delay-camera: 0ms;--pd-delay-reveal: 0ms}}