.entrance{--drift-x:0px;--drift-y:0px;position:relative;isolation:isolate;width:100%;height:100svh;height:100dvh;min-height:0;overflow:hidden;background:#061126;display:grid;place-items:center}
.entrance-world,.entrance-picture,.entrance-picture img,.entrance-shade,.entrance-aura,.entrance-transition{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.entrance-world{z-index:-3}
/* Aspect-specific artwork fills the viewport; no inset frame or blurred side panels. */
.entrance-picture{display:block;transform-origin:50% 50%}
.entrance-picture img{display:block;object-fit:cover;object-position:50% 50%;user-select:none}
.entrance-shade{z-index:-2;background:radial-gradient(ellipse at 50% 47%,#04102735 0%,#04102708 37%,#02071500 64%),linear-gradient(0deg,#030a2026,transparent 24%,transparent 82%,#030a201a)}
.entrance-aura{z-index:-1;transform:translate3d(var(--drift-x),var(--drift-y),0);transition:transform 1.8s ease;background:radial-gradient(ellipse 24% 32% at 50% 46%,#137ca319,transparent 90%);animation:entrance-light 9s ease-in-out infinite alternate}
.entrance-content{display:flex;flex-direction:column;align-items:center;gap:clamp(32px,5.5vh,64px);transform:translateY(-2vh);padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);animation:entrance-arrive 1.2s cubic-bezier(.16,1,.3,1) both}
.entrance-logo{width:clamp(180px,min(27vw,48dvh),440px);aspect-ratio:800/490;overflow:hidden;margin:0;filter:drop-shadow(0 8px 30px #01061080)}
.entrance-logo img{display:block;width:100%;height:auto;transform:translateY(-11%);user-select:none}
.entrance-start{--gloss-x:30%;--tilt-x:0deg;--tilt-y:0deg;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:30px;width:268px;min-height:80px;padding:15px 18px 15px 35px;border:1px solid transparent;border-radius:23px;background:linear-gradient(130deg,#192d52,#0c1533 52%,#312450) padding-box,linear-gradient(120deg,#b6ffff,#5ae8fc 20%,#4f709e 42%,#ab75ef 70%,#f6b7ec) border-box;color:#f0fbff;box-shadow:0 7px 0 #020b21,0 8px 0 #7780c04a,0 16px 26px #02081cd9,-10px 4px 35px #25cbf527,12px 4px 35px #ab52ef25,inset 0 1px 0 #ffffff26;transform:perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));font:600 18px Display,Arial,sans-serif;letter-spacing:4px;transition:transform .25s,box-shadow .3s;touch-action:manipulation;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.entrance-start::before{content:"";position:absolute;inset:-8px;border:1px solid #8dd8fa16;border-radius:30px;pointer-events:none;transition:border-color .3s}
.entrance-start::after{content:"";position:absolute;bottom:-2px;left:23%;width:54%;height:2px;border-radius:100%;background:linear-gradient(90deg,transparent,#88edff,#cf9eff,transparent);box-shadow:0 3px 13px #87dcff80;pointer-events:none}
.explore-face{position:absolute;inset:4px;overflow:hidden;border:1px solid #ffffff15;border-radius:18px;background:radial-gradient(ellipse at var(--gloss-x) 0%,#90eaff24,transparent 65%),linear-gradient(175deg,#a9cbff12,transparent 48%,#050b241f);pointer-events:none}
.explore-face::before{content:"";position:absolute;top:0;left:15%;width:70%;height:1px;background:linear-gradient(90deg,transparent,#d3f3ff77,transparent)}
.explore-sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#d4faff16 48%,#d4faff05 55%,transparent 70%);transform:translateX(-120%);animation:explore-sheen 7s ease-in-out infinite}
.explore-label{position:relative;text-shadow:0 0 22px #b0e9ff44}
.explore-icon{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #c0ecff70;background:linear-gradient(140deg,#8defff,#77baf0 58%,#b7a3ee);color:#102346;box-shadow:inset 0 1px 1px #fff9,0 2px 8px #010a2466,0 0 18px #8ecbff20;transition:box-shadow .3s,transform .3s}
.entrance-start svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
@media(hover:hover) and (pointer:fine){.entrance-start:hover{transform:perspective(600px) translateY(-3px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 10px 0 #020b21,0 11px 0 #7780c04a,0 20px 32px #02081cd9,-10px 5px 45px #25cbf542,12px 5px 45px #ab52ef42,inset 0 1px 0 #ffffff38}.entrance-start:hover::before{border-color:#8dd8fa38}.entrance-start:hover .explore-icon{box-shadow:inset 0 1px 1px #fffc,0 0 28px #8ecbff60}.entrance-start:hover svg{transform:translateX(3px)}}
.entrance-start:active{transform:translateY(5px) scale(.985);box-shadow:0 2px 0 #020b21,0 3px 0 #7780c04a,0 6px 15px #02081caa,0 0 38px #69c2f52a,inset 0 1px 0 #ffffff26}
.entrance-start:focus-visible{outline:2px solid #d4faff;outline-offset:13px}
.entrance-start:disabled{opacity:1}
@keyframes explore-sheen{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.entrance-transition{z-index:3;opacity:0;background:radial-gradient(ellipse at 50% 55%,#9bf5ff33,transparent 60%),#080d1a;transition:opacity .65s ease}
.entrance.is-entering .entrance-transition{opacity:1}
.entrance.is-entering .entrance-content{animation:entrance-depart .55s ease-in both}
.entrance.is-entering .entrance-picture{animation:entrance-zoom .7s ease-in both}
.library-arrival{animation:library-arrive .65s ease-out both}
@keyframes entrance-light{from{opacity:.35}to{opacity:1}}
@keyframes entrance-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(-2vh)}}
@keyframes entrance-depart{to{opacity:0;transform:translateY(-2vh) scale(1.08);filter:blur(5px)}}
@keyframes entrance-zoom{from{opacity:1}to{opacity:0}}
@keyframes library-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(orientation:portrait){.entrance-content{gap:36px}.entrance-logo{width:clamp(180px,min(57vw,32dvh),390px)}.entrance-start{width:242px;min-height:74px;padding:13px 16px 13px 29px;font-size:17px;gap:24px;border-radius:22px}.entrance-aura{background:radial-gradient(ellipse 43% 24% at 50% 47%,#137ca319,transparent 90%)}}
@media(orientation:landscape) and (max-height:600px){.entrance-content{gap:18px}.entrance-logo{width:clamp(180px,49vh,275px)}.entrance-start{width:220px;min-height:60px;padding:9px 12px 9px 26px;font-size:15px;letter-spacing:3px;border-radius:20px;gap:20px}.explore-icon{width:38px;height:38px}.explore-face{border-radius:15px}.entrance-start::before{inset:-6px;border-radius:26px}}
@media(prefers-reduced-motion:reduce){.entrance-picture,.entrance-aura,.entrance-content,.entrance.is-entering .entrance-picture,.entrance.is-entering .entrance-content,.library-arrival,.explore-sheen{animation:none}.entrance-aura,.entrance-start,.entrance-start svg,.entrance-transition{transition:none}.entrance-start,.entrance-start:hover,.entrance-start:hover svg{transform:none}.explore-icon,.entrance-start::before{transition:none}}