.entrance-intro{display:none}
.intro-active,.intro-active body{overflow:hidden;overscroll-behavior:none}
.intro-active .entrance-intro{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#26303c 0%,#0a1426 43%,#020712 85%);color:#e9c589;isolation:isolate;outline:none}
.entrance-intro[hidden]{display:none}
.entrance-world{position:absolute;inset:-5%;pointer-events:none;opacity:0;animation:entrance-world 4.4s ease both}
.entrance-world img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.75)}
.entrance-world:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#03091788,#020713ee 75%),linear-gradient(0deg,#040b18,transparent 65%)}
.entrance-nebula{position:absolute;inset:-25%;pointer-events:none;opacity:0;background:conic-gradient(from 45deg at 50% 50%,transparent,#b67b2428,transparent 32%,#526ca523,transparent 65%,#d4ac6a18,transparent);animation:entrance-nebula 5s ease both;filter:blur(28px)}
.entrance-comet{position:absolute;top:10%;left:75%;width:240px;height:2px;background:linear-gradient(90deg,transparent,#dbb66d66,#fff0c9);transform:rotate(145deg);transform-origin:right;opacity:0;animation:entrance-comet 1.3s .25s ease-out both;pointer-events:none}
.entrance-comet:after{content:'';position:absolute;right:0;top:-2px;width:6px;height:6px;background:#fff3d6;box-shadow:0 0 14px #ffe0a2;border-radius:50%}
.entrance-gateway{position:absolute;top:50%;left:50%;width:min(76vw,620px);height:min(110vh,800px);transform:translate(-50%,-49%);pointer-events:none;overflow:visible;stroke:url(#gate-gold);stroke-width:1.5;filter:drop-shadow(0 0 6px #c8924c66);opacity:0;animation:entrance-gateway 4.4s both}
.gateway-outer,.gateway-inner{stroke-dasharray:2300;stroke-dashoffset:2300;animation:entrance-draw 2.2s .35s cubic-bezier(.25,.7,.3,1) forwards}
.gateway-inner{animation-delay:.55s;stroke-width:.7;opacity:.6}
.gateway-detail{stroke-width:1;fill:#e0b87520}
.entrance-orbit{position:absolute;top:50%;left:50%;width:min(70vw,580px);aspect-ratio:1;border:1px dashed #d6ae6e32;border-radius:50%;pointer-events:none;opacity:0;animation:entrance-orbit 4.4s ease both}
.entrance-orbit span{position:absolute;top:50%;left:-5px;color:#e4bf7c;text-shadow:0 0 12px #ecbc65;font:17px var(--serif)}
.entrance-orbit span:nth-child(2){left:auto;right:-5px;top:37%;font-size:12px}
.entrance-orbit span:nth-child(3){top:-12px;left:50%;font-size:20px}
.entrance-vortex{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.entrance-vortex i{position:absolute;top:46%;left:50%;width:var(--size);height:var(--size);border-radius:50%;background:#f0d49c;box-shadow:0 0 10px #d9a542cc;opacity:0;animation:entrance-vortex 3.8s var(--delay) cubic-bezier(.2,.55,.3,1) both}
.entrance-portal{position:absolute;top:48%;left:50%;width:26px;aspect-ratio:1;border-radius:50%;border:2px solid #ffe5a1;box-shadow:0 0 16px #f8d17a88,inset 0 0 16px #f8d17a66;pointer-events:none;opacity:0;transform:translate(-50%,-50%);z-index:4}
.is-leaving .entrance-portal{animation:entrance-portal .6s cubic-bezier(.25,.6,.3,1) both}
.is-leaving .entrance-mark{transition:transform .6s,opacity .6s;transform:scale(1.12);opacity:0}
.entrance-stars,.entrance-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.entrance-stars i{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#f5dfb3;box-shadow:0 0 8px #f5dfb366;opacity:0;animation:entrance-star 4.4s var(--delay) both}
.entrance-halo{position:absolute;width:min(74vw,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,#b98a4315 0%,#b98a4306 45%,transparent 69%);opacity:0;animation:entrance-halo 4.4s ease both;pointer-events:none}
.entrance-halo:after{content:'';position:absolute;inset:11%;border:1px solid #c29a5030;outline:1px solid #c29a5012;outline-offset:15px;border-radius:50%;mask-image:linear-gradient(transparent,#000 38%,#000 65%,transparent)}
.entrance-moons{position:absolute;inset:0;pointer-events:none;animation:entrance-sky 4.4s ease both}
.entrance-moon{position:absolute;display:block;border-radius:50%;aspect-ratio:1;box-shadow:0 0 45px #c3945430,inset -18px -12px 22px #010713b5}
.entrance-moon:after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:.6;background:radial-gradient(ellipse at 27% 35%,#6c47394a 0 5%,transparent 6%),radial-gradient(ellipse at 64% 22%,#fff1ce30 0 7%,transparent 8%),radial-gradient(ellipse at 58% 69%,#4b3b4059 0 13%,transparent 14%),radial-gradient(ellipse at 28% 72%,#ffe8b422 0 9%,transparent 10%)}
.entrance-moon-gold{width:clamp(90px,13vw,170px);top:14%;left:calc(50% + min(20vw,250px));background:radial-gradient(circle at 31% 33%,#f2d2a1,#be8353 48%,#654c47 75%,#151a2b);transform:rotate(-17deg);animation:entrance-moon-drift 5s ease both}
.entrance-moon-silver{width:clamp(48px,6.8vw,88px);top:33%;left:calc(50% - min(35vw,420px));background:radial-gradient(circle at 35% 33%,#e2deed,#9b98b7 45%,#5d6082 70%,#151a2b);box-shadow:0 0 30px #afa8d127,inset -12px -7px 15px #010713a0;transform:rotate(13deg);animation:entrance-moon-drift 5s ease reverse both}
.entrance-mark{position:relative;z-index:3;width:90%;text-align:center;transform:translateY(10px);pointer-events:none}
.entrance-overline{font:10px/1.5 var(--sans);letter-spacing:.35em;text-transform:uppercase;color:#c5ae87;margin:0 0 23px;animation:entrance-inscription 4.4s both}
.entrance-sigil{display:block;width:clamp(66px,9vw,102px);height:clamp(66px,9vw,102px);margin:0 auto 21px;color:#e2bb78;filter:drop-shadow(0 0 20px #b686334a);animation:entrance-emblem 4.4s both}
.entrance-mark h2{margin:0;font:400 clamp(38px,6.6vw,86px)/1.05 var(--serif);letter-spacing:.08em;color:#e9c589;text-shadow:0 0 28px #c69b4720;background:linear-gradient(110deg,#b57b36 5%,#e8c88e 30%,#fff0c7 46%,#e8c88e 52%,#b57b36 85%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:entrance-title 4.4s both,entrance-gild 3s 1.3s ease both}
.entrance-mark h2 span{display:block;font-size:.49em;letter-spacing:.28em;line-height:1.6;color:#f3ddb7}
.entrance-divider{display:flex;align-items:center;justify-content:center;gap:16px;width:min(65vw,300px);margin:25px auto 16px;color:#d7b274;font-size:13px;animation:entrance-inscription 4.4s both}
.entrance-divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#c19a5b80)}
.entrance-divider span:last-child{transform:rotate(180deg)}
.entrance-tagline{font:italic clamp(13px,1.4vw,17px)/1.6 var(--serif);letter-spacing:.02em;color:#bfae94;margin:0;animation:entrance-tagline 4.4s both}
.entrance-dust{z-index:4}
.entrance-dust i{position:absolute;bottom:12%;left:var(--origin);width:var(--size);height:var(--size);background:#e4be73;border-radius:50%;box-shadow:0 0 10px #e7bc6277;opacity:0;animation:entrance-grain 3.3s var(--delay) ease-out both}
.entrance-dune{position:absolute;pointer-events:none;width:150%;height:37%;bottom:-23%;left:-25%;border-radius:50% 48% 0 0;transform:rotate(-7deg);background:linear-gradient(#8b603428,#0d1420 65%);border-top:1px solid #e0ab5940;animation:entrance-dune 4.4s ease both}
.entrance-dune-front{bottom:-28%;left:-15%;transform:rotate(9deg);background:linear-gradient(#aa79322c,#080e1b 55%);border-top-color:#c99e5145}
.entrance-bottom{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:5%;right:5%;display:flex;align-items:center;gap:25px;z-index:5}
.entrance-caption,.entrance-skip{font:9px/1.5 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:#bda98a}
.entrance-caption{white-space:nowrap}
.entrance-progress{height:1px;width:90px;background:#d7b27424;position:relative;overflow:hidden}
.entrance-progress:after{content:'';display:block;height:100%;background:#d7b274;transform-origin:left;animation:entrance-progress 5s linear both}
.entrance-skip{margin-left:auto;display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:10px 15px;border:1px solid #d7b27445;background:#050d1c66;cursor:pointer;transition:background .2s,color .2s}
.entrance-skip span{font-size:17px;letter-spacing:0}
.entrance-skip:hover{background:#d7b27418;color:#f5dcaa}
.entrance-skip:focus-visible{outline:1px solid #e2c189;outline-offset:4px}
.entrance-intro.is-leaving{animation:entrance-reveal .6s ease-in-out forwards;pointer-events:none}
@keyframes entrance-world{0%,12%{opacity:0;transform:scale(1.12)}60%,100%{opacity:.6;transform:scale(1)}}
@keyframes entrance-nebula{0%{opacity:0;transform:rotate(-25deg) scale(.7)}35%{opacity:.65}100%{opacity:.4;transform:rotate(35deg) scale(1.1)}}
@keyframes entrance-comet{0%{opacity:0;translate:100px -120px;scale:.6}15%,60%{opacity:1}100%{opacity:0;translate:-400px 240px;scale:1.2}}
@keyframes entrance-gateway{0%,8%{opacity:0}22%,90%{opacity:1}100%{opacity:.7}}
@keyframes entrance-draw{to{stroke-dashoffset:0}}
@keyframes entrance-orbit{0%,15%{opacity:0;transform:translate(-50%,-50%) rotate(-65deg) scale(.7)}55%{opacity:.9}100%{opacity:.5;transform:translate(-50%,-50%) rotate(40deg) scale(1)}}
@keyframes entrance-vortex{0%{opacity:0;transform:translate3d(var(--from-x),var(--from-y),0) scale(.3)}18%{opacity:.9}64%{opacity:.8;transform:translate3d(var(--to-x),var(--to-y),0) scale(1)}100%{opacity:0;transform:translate3d(0,-40px,0) scale(.25)}}
@keyframes entrance-moon-drift{from{translate:12px 12px}to{translate:-10px -10px}}
@keyframes entrance-gild{from{background-position:120% 0}to{background-position:0% 0}}
@keyframes entrance-portal{0%{opacity:0;transform:translate(-50%,-50%) scale(1)}20%{opacity:.9}80%{opacity:.6}100%{opacity:0;transform:translate(-50%,-50%) scale(85)}}
@keyframes entrance-star{0%{opacity:0}20%,60%{opacity:.65}40%,85%,100%{opacity:.25}}
@keyframes entrance-halo{0%,8%{opacity:0;transform:scale(.83)}40%,100%{opacity:1;transform:scale(1)}}
@keyframes entrance-sky{0%{opacity:0;transform:translateY(15px) scale(1.03)}20%,100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes entrance-emblem{0%,16%{opacity:0;transform:scale(.7) rotate(-12deg);filter:blur(6px)}43%,100%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 0 20px #b686334a)}}
@keyframes entrance-title{0%,23%{opacity:0;transform:translateY(16px);filter:blur(10px)}57%,100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes entrance-inscription{0%,35%{opacity:0;transform:translateY(8px)}67%,100%{opacity:1;transform:translateY(0)}}
@keyframes entrance-tagline{0%,46%{opacity:0;transform:translateY(8px)}76%,100%{opacity:1;transform:translateY(0)}}
@keyframes entrance-grain{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}20%{opacity:.75}100%{opacity:0;transform:translate3d(var(--drift),calc(-1 * var(--rise)),0) scale(.3)}}
@keyframes entrance-dune{0%{opacity:0;translate:0 24px}32%,100%{opacity:1;translate:0 0}}
@keyframes entrance-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes entrance-reveal{0%,25%{opacity:1}100%{opacity:0;transform:scale(1.06)}}
@media(max-width:600px){.entrance-overline{font-size:8px;letter-spacing:.24em}.entrance-mark{transform:translateY(0)}.entrance-moon-gold{top:12%;left:auto;right:12%}.entrance-moon-silver{top:28%;left:9%}.entrance-tagline{max-width:260px;margin:auto}.entrance-bottom{left:6%;right:6%;gap:12px;bottom:max(22px,env(safe-area-inset-bottom))}.entrance-caption{font-size:7px;letter-spacing:.12em}.entrance-progress{width:35px}.entrance-skip{font-size:8px;gap:10px;padding-inline:10px}.entrance-halo{width:110vw}}
@media(max-height:520px){.entrance-mark{transform:scale(.73)}.entrance-moon-gold{top:8%;width:80px}.entrance-moon-silver{top:30%;width:45px}.entrance-bottom{bottom:12px}}
@media(prefers-reduced-motion:reduce){.intro-active .entrance-intro{display:none}.intro-active,.intro-active body{overflow:auto}}
