:root{background:#241e22;color:#fff4da}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden}
.entrance{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100svh;min-height:100dvh;overflow:hidden;background:#241e22}
.entrance:before{content:'';position:absolute;inset:-4%;z-index:-2;background:url('/assets/faewild-entrance-fairy.png') center/cover no-repeat;animation:camera-focus 1.3s cubic-bezier(.22,1,.36,1) both}
.entrance:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,#2319238c 0%,#241b2580 32%,#160e1859 70%,#130b168c 100%)}
.entrance-effects,.entrance-effects span{position:absolute;inset:-8%;pointer-events:none}
.entrance-effects{z-index:0;overflow:hidden;opacity:0;animation:effects-arrive .85s .15s ease-out forwards}
.entrance-effects__weather{background:radial-gradient(ellipse at 14% 37%,#df65a280 0%,#8f4a9940 24%,transparent 49%),radial-gradient(ellipse at 82% 68%,#26b6b38c 0%,#429ba74d 26%,transparent 53%),radial-gradient(ellipse at 68% 16%,#ffd18b7a 0%,transparent 42%);filter:blur(36px) saturate(1.55);mix-blend-mode:screen;animation:weather-drift 4s ease-in-out infinite alternate}
.entrance-effects__prism{background:conic-gradient(from 20deg at 50% 52%,transparent 0deg,#d454a638 34deg,transparent 69deg,#59d6d63d 116deg,transparent 150deg,#e8ad6842 204deg,transparent 239deg,#a064d037 299deg,transparent 340deg);mix-blend-mode:screen;opacity:.5;filter:blur(45px);mask-image:radial-gradient(ellipse at center,transparent 12%,#000 66%,transparent 100%);animation:prism-turn 5s ease-in-out infinite alternate}
.entrance-effects__light{background:radial-gradient(circle at 76% 31%,#fff3c68c,transparent 15%),radial-gradient(circle at 26% 72%,#affff48a,transparent 12%),linear-gradient(116deg,transparent 34%,#d4ffff24 54%,transparent 68%);mix-blend-mode:screen;opacity:.48;filter:blur(16px);animation:light-breathe 2s ease-in-out infinite alternate}
.entrance-effects .entrance-effects__sunrays{inset:0;background:repeating-conic-gradient(from 195deg at 91% 17%,#ffe7b35c 0deg 2deg,transparent 4deg 15deg);mask-image:radial-gradient(ellipse 88% 95% at 91% 17%,#000 3%,#000b 49%,transparent 86%);mix-blend-mode:screen;filter:blur(4px);animation:sunrays-breathe 2.3s ease-in-out infinite alternate}
.entrance-glow{position:absolute;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fffaf1ec 0 2%,var(--color) 11%,transparent 66%);mix-blend-mode:screen;filter:blur(1px);animation:glow-pulse var(--period) ease-in-out infinite alternate}
.entrance-glow:after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff9de;box-shadow:0 0 15px 5px var(--color);transform:translate(-50%,-50%)}
.entrance-glow--lantern-left{--x:4%;--y:15%;--size:clamp(85px,15vw,190px);--color:#ffc06caa;--period:1.4s}
.entrance-glow--lantern-center{--x:30%;--y:32%;--size:clamp(70px,11vw,140px);--color:#ffcb76ad;--period:1.7s;animation-delay:-1.2s}
.entrance-glow--wing{--x:37%;--y:67%;--size:clamp(70px,10vw,135px);--color:#b6fff1a1;--period:1.5s;animation-delay:-2s}
.entrance-glow--sun{--x:82%;--y:26%;--size:clamp(160px,26vw,360px);--color:#ffe5ae82;--period:2s;animation-delay:-1.8s}
.entrance-glow--flowers{--x:89%;--y:68%;--size:clamp(70px,12vw,150px);--color:#e9a4e394;--period:1.8s;animation-delay:-3s}
.entrance-name{position:relative;z-index:1;display:block;width:min(94vw,1200px);text-align:center;filter:drop-shadow(0 3px 8px #160b1c) drop-shadow(0 8px 32px #140a1b);animation:wordmark-focus .85s .1s cubic-bezier(.22,1,.36,1) both}
.entrance-name img{display:block;width:100%;height:clamp(65px,13vw,165px);object-fit:cover;object-position:center}
.entrance-subtitle{display:block;width:max-content;max-width:90%;margin:-.2rem 8% 0 auto;color:#b8e8e5;font:700 clamp(1rem,2vw,1.35rem)/1.1 Arial,sans-serif;letter-spacing:.2em;text-shadow:0 2px 9px #160b1c;animation:subtitle-arrive .55s .4s cubic-bezier(.22,1,.36,1) both}
.entrance-credit{position:absolute;z-index:1;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 2rem);margin:0;padding:.35rem .55rem;border:1px solid #fff;background:#050505;color:#fff;font:900 clamp(.58rem,1.25vw,.72rem)/1.1 'Arial Black',Impact,Arial,sans-serif;letter-spacing:.12em;text-align:center;white-space:nowrap;box-shadow:0 2px 12px #0008}
.entrance-name:focus-visible{outline:3px solid #ffdfab;outline-offset:4px}
.entrance.departing{animation:scene-fade .72s ease-in-out forwards}
.entrance.departing:before{transform:scale(1);animation:camera-depart .72s cubic-bezier(.4,0,.8,1) forwards}
.entrance.departing .entrance-effects{animation:effects-depart .32s ease-out forwards}
@keyframes camera-focus{from{transform:scale(1.15);filter:blur(19px) saturate(1.45)}to{transform:scale(1);filter:blur(0) saturate(1.13)}}
@keyframes wordmark-focus{from{opacity:0;transform:scale(1.025);filter:blur(11px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes subtitle-arrive{from{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes effects-arrive{from{opacity:0}to{opacity:.95}}
@keyframes weather-drift{from{transform:translate3d(-2%,2%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.08)}}
@keyframes prism-turn{from{transform:rotate(-7deg) scale(1)}to{transform:rotate(9deg) scale(1.08)}}
@keyframes light-breathe{from{opacity:.26;transform:translateY(1.5%)}to{opacity:.65;transform:translateY(-1.5%)}}
@keyframes sunrays-breathe{from{opacity:.26;transform:scale(1)}to{opacity:.58;transform:scale(1.025)}}
@keyframes glow-pulse{from{opacity:.4;transform:translate(-50%,-50%) scale(.72)}to{opacity:1;transform:translate(-50%,-50%) scale(1.24)}}
@keyframes scene-fade{from{opacity:1}to{opacity:0}}
@keyframes camera-depart{from{filter:blur(0) saturate(1.13)}to{filter:blur(24px) saturate(.8) brightness(.55)}}
@keyframes effects-depart{from{opacity:.95}to{opacity:0}}
@media(max-width:600px){.entrance:before{background-position:60% center}.entrance-name{width:96vw}.entrance-name img{height:clamp(58px,18vw,90px)}.entrance-subtitle{margin:0 6% 0 auto;font-size:clamp(1rem,4.4vw,1.25rem)}.entrance-glow--lantern-left,.entrance-glow--lantern-center{display:none}.entrance-glow--wing{--x:12%;--y:59%}.entrance-glow--sun{--x:84%;--y:23%}.entrance-glow--flowers{--x:88%;--y:73%}.entrance-effects .entrance-effects__sunrays{background:repeating-conic-gradient(from 195deg at 82% 20%,#ffe7b342 0deg 1.6deg,transparent 3.5deg 13deg);mask-image:radial-gradient(ellipse 90% 80% at 82% 20%,#000 0%,#0008 45%,transparent 83%)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.entrance-effects{opacity:.6}.entrance-glow{opacity:.5;transform:translate(-50%,-50%)}.entrance-effects .entrance-effects__sunrays{opacity:.2}.entrance.departing{opacity:0}}