/* Escape the Kooky Manor of Fright — Developed by Slyness */
/* Studio splash between the loader and the menu: the logo is struck out of the dark by lightning,
   glows in a gilded frame, then the camera dives through its open doorway toward the WorldEscapeGames splash. */
.splash{z-index:9;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 48%,#2c1a3b 0%,#1a1228 55%,#140e20 100%)}
.splash[hidden]{display:none}
.splash.leaving{opacity:0;visibility:hidden;transition:opacity .8s ease-in,visibility .8s}
.splash-sparks{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:splash-fade-in 1.5s ease-out .6s forwards}
.splash-stage{position:relative;display:grid;justify-items:center;gap:calc(1.6*var(--u))}
.splash-halo{position:absolute;left:50%;top:44%;width:calc(70*var(--u));height:calc(50*var(--u));translate:-50% -50%;background:radial-gradient(ellipse,#e9aa6340 0%,#9b6bd02a 35%,transparent 70%);opacity:0;animation:splash-halo 4s ease-in-out .7s infinite alternate}
.splash-frame{position:relative;margin:0;width:calc(46*var(--u));aspect-ratio:791/590;padding:calc(.55*var(--u));background:linear-gradient(135deg,#f3cf8b,#9a6a34 30%,#f6dca0 50%,#7b5126 72%,#e6b76c);border-radius:calc(.4*var(--u));box-shadow:0 0 0 calc(.3*var(--u)) #1a1220,0 0 0 calc(.45*var(--u)) #b8854f88,0 calc(2*var(--u)) calc(5*var(--u)) #000c,0 0 calc(6*var(--u)) #e9aa6333;opacity:0;transform-origin:50.8% 57%;animation:splash-reveal 1.6s cubic-bezier(.2,.7,.2,1) .55s forwards}
.splash-frame img{display:block;width:100%;height:100%;border-radius:calc(.2*var(--u));box-shadow:inset 0 0 calc(3*var(--u)) #000;filter:contrast(1.05) saturate(1.05)}
/* Moonlit vignette laid over the picture so it belongs to the manor's palette. */
.splash-frame:after{content:'';position:absolute;inset:calc(.55*var(--u));border-radius:calc(.2*var(--u));background:radial-gradient(ellipse at 50% 45%,transparent 45%,#1a0f2a99 100%),linear-gradient(180deg,#5a3c8a22,transparent 40%);pointer-events:none}
.splash-shine{position:absolute;inset:calc(.55*var(--u));overflow:hidden;border-radius:calc(.2*var(--u));pointer-events:none}
.splash-shine:before{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:35%;background:linear-gradient(100deg,transparent,#fff6dd66 45%,#ffffffaa 50%,#fff6dd66 55%,transparent);transform:skewX(-18deg);animation:splash-shine 1.3s ease-in-out 2s forwards}
.splash-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#fffaf0,#d9ccff 40%,#8a74d0 100%);opacity:0;animation:splash-flash .9s ease-out .5s}
/* The dive: frame and doorway rush toward the viewer while everything else falls to black. */
.splash.diving .splash-frame{animation:splash-dive 1.25s cubic-bezier(.6,0,.85,.4) forwards}
.splash.diving .splash-halo,.splash.diving .splash-sparks{transition:opacity .5s;opacity:0;animation:none}
@keyframes splash-fade-in{to{opacity:1}}
@keyframes splash-halo{from{opacity:.55;scale:.95}to{opacity:1;scale:1.05}}
@keyframes splash-reveal{0%{opacity:0;transform:scale(1.18);filter:brightness(3)}25%{opacity:1}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes splash-shine{to{left:130%}}
@keyframes splash-flash{0%{opacity:0}12%{opacity:.85}22%{opacity:.15}32%{opacity:.6}100%{opacity:0}}
@keyframes splash-dive{0%{opacity:1;transform:scale(1);filter:none}60%{filter:brightness(.5)}100%{opacity:1;transform:scale(14);filter:brightness(0)}}
@media(prefers-reduced-motion:reduce){.splash *{animation-duration:.01s!important;animation-delay:0s!important}}

/* WorldEscapeGames: a starry night, a light burst, the logo rising inside a glowing orbit, then its address. */
.weg-splash{z-index:8;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 46%,#1d2856 0%,#161838 50%,#111230 100%)}
.weg-splash[hidden]{display:none}
.weg-splash.leaving{opacity:0;visibility:hidden;transition:opacity 1s ease-in,visibility 1s}
.weg-splash.leaving .weg-stage{transition:transform 1s ease-in;transform:scale(1.08)}
.weg-stars{position:absolute;inset:-5%;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 72%,#cfe3ff,transparent),radial-gradient(1.5px 1.5px at 44% 32%,#fff6e0,transparent),radial-gradient(1px 1px at 63% 12%,#fff,transparent),radial-gradient(2px 2px at 78% 64%,#d9e8ff,transparent),radial-gradient(1px 1px at 88% 28%,#fff,transparent),radial-gradient(1.5px 1.5px at 8% 84%,#ffe9c4,transparent),radial-gradient(1px 1px at 55% 88%,#fff,transparent);background-size:42% 46%;opacity:0;animation:weg-stars-in 2s ease-out .2s forwards,weg-twinkle 3.2s ease-in-out 2.2s infinite alternate}
.weg-stars-far{background-size:23% 27%;animation-delay:.5s,2.5s;animation-duration:2s,4.6s;filter:blur(.3px)}
.weg-stage{position:relative;display:grid;justify-items:center;gap:calc(2.2*var(--u))}
.weg-burst{position:absolute;left:50%;top:40%;width:calc(80*var(--u));height:calc(80*var(--u));translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#ffffffcc 0%,#9fd0ff66 12%,#5b7ce033 28%,transparent 60%);opacity:0;animation:weg-burst 1.6s ease-out .45s forwards}
.weg-orbit{position:absolute;left:50%;top:40%;width:calc(62*var(--u));height:calc(62*var(--u));translate:-50% -50%;transform:rotateX(74deg) rotateZ(-14deg);opacity:0;animation:weg-orbit-in 1.2s ease-out .9s forwards}
.weg-orbit i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,#4fa3ff55 80%,#bfe3ff 96%,#fff 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));filter:drop-shadow(0 0 6px #8cc8ff);animation:weg-spin 2.4s linear infinite}
.weg-logo{position:relative;width:calc(44*var(--u));aspect-ratio:299/107;opacity:0;animation:weg-logo-in 1.4s cubic-bezier(.2,.8,.2,1.05) .6s forwards}
.weg-logo img{display:block;width:100%;height:100%;filter:drop-shadow(0 0 calc(1.6*var(--u)) #6fb4ff66) drop-shadow(0 calc(.8*var(--u)) calc(1.2*var(--u)) #000a)}
/* The shine is masked by the logo itself so the light only travels across its letters. */
.weg-shine{position:absolute;inset:0;overflow:hidden;-webkit-mask:url(assets/worldescapegames.webp) center/100% 100% no-repeat;mask:url(assets/worldescapegames.webp) center/100% 100% no-repeat}
.weg-shine:before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,#ffffffd0 50%,transparent);transform:skewX(-20deg);animation:weg-shine 1.1s ease-in-out 2s forwards}
.weg-url{font-family:'Manrope',sans-serif;font-weight:600;font-size:calc(1.5*var(--u));letter-spacing:calc(.55*var(--u));color:#cfe3ff;text-shadow:0 0 calc(1.2*var(--u)) #4fa3ff88;opacity:0;animation:weg-url-in 1.2s ease-out 2.3s forwards}
@keyframes weg-stars-in{to{opacity:.85}}
@keyframes weg-twinkle{from{opacity:.85}to{opacity:.45}}
@keyframes weg-burst{0%{opacity:0;scale:.2}20%{opacity:1}100%{opacity:.35;scale:1}}
@keyframes weg-orbit-in{to{opacity:1}}
@keyframes weg-spin{to{rotate:360deg}}
@keyframes weg-logo-in{0%{opacity:0;transform:scale(.55) translateY(calc(3*var(--u)));filter:brightness(4) blur(6px)}60%{opacity:1;filter:brightness(1.4)}100%{opacity:1;transform:none;filter:none}}
@keyframes weg-shine{to{left:120%}}
@keyframes weg-url-in{from{opacity:0;letter-spacing:calc(1.4*var(--u));filter:blur(4px)}to{opacity:1;letter-spacing:calc(.55*var(--u));filter:none}}
@media(prefers-reduced-motion:reduce){.weg-splash *{animation-duration:.01s!important;animation-delay:0s!important}}

/* Clean hand-off: the dive ends on a full black screen, and the WorldEscapeGames splash rises out of that black. */
.splash:after{content:'';position:absolute;inset:0;z-index:5;background:#000;opacity:0;pointer-events:none}
.splash.diving:after{animation:splash-black 1.25s ease-in forwards}
.weg-splash:before{content:'';position:absolute;inset:0;z-index:5;background:#000;pointer-events:none;animation:weg-from-black .9s ease-out forwards}
@keyframes splash-black{0%,40%{opacity:0}100%{opacity:1}}
@keyframes weg-from-black{to{opacity:0}}
/* The game frame's inner dark vignette reads as a black gap on the bright splash backgrounds, so it is dropped there. */
.game:has(#splash:not([hidden]))::after,.game:has(#weg-splash:not([hidden]))::after{box-shadow:inset 0 0 0 calc(calc(.7*var(--u)) + 4px) #1a1220,inset 0 0 0 calc(calc(.7*var(--u)) + 5px) #b8854f66}