/* A fashion-show opening, with the same playable girls cast as the performers. */
@font-face{font-family:FashionDisplay;src:url('../../fonts/Poppins-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
.welcome-screen{background:#281736;padding:115px 20px 68px;min-height:100dvh;color:#fff;overflow:hidden}
.showtime-backdrop{background:radial-gradient(ellipse at 50% 25%,#79477888,transparent 56%),radial-gradient(ellipse at 15% 60%,#a051aa44,transparent 40%),radial-gradient(ellipse at 86% 65%,#c9418544,transparent 43%),linear-gradient(#251730,#3b2044 68%,#271932)}
.theater-halo{width:66%;height:110%;left:17%;top:-10%;background:radial-gradient(ellipse,#c9638b19,transparent 69%)}
.theater-arch{inset:7% 11% 1%;border-color:#f3b6d82b;box-shadow:0 0 0 9px #f7abcb05,0 0 0 10px #f4bfd414;z-index:0}
.welcome-curtain{width:16%;bottom:0;z-index:4;background:repeating-linear-gradient(90deg,#24102f,#613564 20%,#aa6a9d 35%,#69365f 48%,#311433 63%);filter:drop-shadow(8px 4px 8px #1c071e55);animation:curtainEntrance 1.5s cubic-bezier(.22,.7,.25,1) both,curtainBreathe 8s 1.5s ease-in-out infinite}
.curtain-right{animation-delay:0s,-2s}.welcome-curtain:after{background:linear-gradient(#f6d996,#b9773b,#f0c779);height:7px}
.welcome-valance{height:81px;inset:-48px -5% auto;background:repeating-linear-gradient(92deg,#3c1e43,#8b567f 10%,#532953 18%);border-bottom:2px solid #dca75a;z-index:5;box-shadow:0 7px 20px #160b2426}
.welcome-beam{height:120%;width:56%;top:-5%;background:linear-gradient(#fce5b933,#f6bdf422 80%,#f7c3df03);mix-blend-mode:screen;opacity:.8;animation-duration:8s}
.beam-left{left:16%;margin-left:0;--beam-from:-18deg;--beam-to:30deg}.beam-right{left:29%;margin-left:0;--beam-from:18deg;--beam-to:-26deg;animation-delay:-4s}
.welcome-runway{inset:72% -2% -13%;background:linear-gradient(#c571a533,#8d558766);border-top:1px solid #f4c4dd88;filter:drop-shadow(0 0 15px #fdafda33)}
.welcome-runway:after{background:repeating-linear-gradient(0deg,transparent 0,transparent 41px,#ffe4fa24 43px,transparent 45px);animation:runwayFlow 3s linear infinite}
.welcome-runway span{background:#f8bfdb55}
.welcome-copy{max-width:710px;padding:25px 8px 17px;z-index:8}
.welcome-kicker{color:#f2cf98;font-size:10px;letter-spacing:.22em;margin-bottom:20px;animation:titleArrive .9s .2s both}
.welcome-kicker:before,.welcome-kicker:after{color:#efc580}
.welcome-screen h1{font:800 clamp(64px,7vw,98px)/1.02 FashionDisplay,system-ui,sans-serif;letter-spacing:-.065em;color:#fff9f3;text-shadow:none;margin:0 0 20px;animation:titleArrive .9s .3s both}
.welcome-screen h1 .reading-word{display:block;font:600 21px/1.2 Fashion,sans-serif;letter-spacing:.22em;color:#e6c9e2;text-transform:uppercase;margin-bottom:13px}
.welcome-screen h1 em{display:block;font:inherit;color:#ffafd6;background:linear-gradient(115deg,#ffdfdf 0%,#ffb3dd 35%,#dfa7ff 52%,#fff0cb 65%,#ffb9dc 85%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 5px 0 #24133166);animation:titleShimmer 9s ease-in-out infinite}
.welcome-screen h1 em:after{width:64%;margin:13px auto 0;border-top:3px solid #e9b669;height:8px;opacity:.9;box-shadow:0 -2px 8px #f2b97622}
.welcome-tagline{font-size:14px;line-height:1.7;color:#e3c9de;margin:21px auto 23px;animation:titleArrive .9s .45s both}
.welcome-actions{animation:titleArrive .9s .6s both}.welcome-actions .play-button{min-width:250px;min-height:62px;background:linear-gradient(115deg,#f566a5,#c749a5);border:1px solid #ffb7da66;border-radius:17px;box-shadow:0 4px 0 #842859,0 0 32px #f663ae40;position:relative;overflow:hidden}
.welcome-actions .play-button:after{content:'';position:absolute;inset:-60px auto -60px -80px;width:45px;background:#fff3;transform:rotate(20deg);animation:buttonGleam 6s 2s infinite;pointer-events:none}
.welcome-actions .play-button:hover{background:linear-gradient(115deg,#f875b0,#dc57b6);box-shadow:0 5px 0 #842859,0 0 38px #f663ae66}
.welcome-secondary .btn{color:#ecd1e7;font-size:11px}.welcome-secondary .btn:hover{background:#ffffff14;color:#fff}
.welcome-facts{color:#c7a6c2;font-size:10px;margin-top:17px}.welcome-facts span+span{border-color:#986e963f}
.welcome-caption{color:#bd99b8;letter-spacing:.3em;bottom:20px;font-size:9px;z-index:9}
.theater-twinkle{color:#ffe2a7;text-shadow:0 0 15px #ffb5e3;font-size:20px;z-index:3}
.fashion-float{opacity:.5;filter:drop-shadow(0 0 14px #fdbcdf44);z-index:1}.float-dress,.float-shoe,.float-crown,.float-book{display:none}.float-bow{width:63px;right:14%;top:14%;opacity:.75}.float-bag{width:66px;left:14%;right:auto;top:13%;opacity:.75}
.mirror-ball{position:absolute;left:calc(50% - 38px);top:28px;width:76px;height:82px;z-index:6;filter:drop-shadow(0 0 22px #e7c2f466);animation:ballSway 9s ease-in-out infinite}
.mirror-ball:before{content:'';height:33px;width:1px;background:#f8e2ff7a;position:absolute;left:50%;bottom:100%}
.mirror-sphere{width:76px;height:76px;border-radius:50%;overflow:hidden;border:1px solid #ffe6f288;position:relative;background:radial-gradient(circle at 30% 22%,#fff9ed,#d9b2e0 38%,#654078 80%);box-shadow:inset -11px -9px 14px #2a153c99,0 0 20px #dba5d51c}
.mirror-sphere:before{content:'';position:absolute;inset:-10px -85px;background:repeating-linear-gradient(90deg,transparent 0 8px,#321e5059 8px 10px),repeating-linear-gradient(0deg,transparent 0 8px,#321e506b 8px 10px);transform:rotate(-12deg);animation:mirrorSpin 7s linear infinite}
.mirror-sphere:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 28% 24%,#fffdebba,transparent 37%)}
.mirror-ball i{position:absolute;right:-11px;top:2px;color:#fff3d0;text-shadow:0 0 12px #fff4be;font-style:normal;font-size:32px;animation:theaterTwinkle 2.5s infinite}
.opening-cast{position:absolute;inset:0;z-index:2}
.opening-model{position:absolute;bottom:14%;width:clamp(160px,19vw,260px);height:clamp(310px,53vh,440px);isolation:isolate}
.opening-model:before{content:'';position:absolute;inset:1% 9% 3%;border:1px solid #f6d6f62b;border-radius:48% 48% 8px 8px;background:radial-gradient(ellipse at 50% 20%,#fff1e328,#d796cf0c 65%,transparent);box-shadow:0 0 35px #eaa8e60b;z-index:-1}
.opening-model:after{content:'';position:absolute;bottom:0;left:4%;right:4%;height:20px;background:linear-gradient(#c98ab8,#6d3b70);border:1px solid #f2c3e27a;border-radius:50%;box-shadow:0 5px 0 #3b2043,0 0 25px #dd89c52b;z-index:-1}
.opening-left{left:2.5%;--entrance:-55px;--sway:-1}.opening-right{right:2.5%;--entrance:55px;--sway:1}
.opening-model .avatar-render{height:100%;width:100%;padding-bottom:7px;filter:drop-shadow(0 6px 6px #16051f55);transform-origin:50% 95%;animation:openingEntrance 12s ease-in-out infinite}
.opening-right .avatar-render{animation-delay:-5.4s}
.opening-model .avatar-hands{transform-box:fill-box;transform-origin:center;animation:openingWave 3s ease-in-out infinite}.opening-right .avatar-hands{animation-delay:-1.5s}
.light-orbit{position:absolute;width:65%;height:24%;border:1px solid #f7c4ec2b;border-radius:50%;left:17.5%;top:25%;transform:rotate(-18deg);box-shadow:0 0 10px #ffb6e90a;z-index:0;animation:orbitTilt 14s ease-in-out infinite}
.orbit-two{transform:rotate(18deg);top:31%;animation-delay:-7s;opacity:.5}
.runway-lights{position:absolute;inset:72% 0 0;z-index:2;pointer-events:none}
.runway-lights i{position:absolute;left:calc(50% + var(--side) * (13% + var(--light) * 3.6%));top:calc(var(--light) * 15%);width:calc(3px + var(--light) * .9px);height:calc(3px + var(--light) * .9px);border-radius:50%;background:#fce4c7;box-shadow:0 0 10px #ffb7d2,0 0 20px #fda1df;animation:runwayGlow 2.5s linear infinite;animation-delay:var(--light-delay)}
@keyframes openingEntrance{0%,100%{opacity:.3;transform:translateX(var(--entrance)) scale(.94)}12%,28%,84%{opacity:1;transform:none}40%{opacity:1;transform:rotate(calc(var(--sway) * 4deg)) translateY(-6px)}53%{transform:rotate(calc(var(--sway) * -3deg)) translateX(calc(var(--sway) * 8px));opacity:1}67%{transform:translateY(-8px) rotate(calc(var(--sway) * 2deg));opacity:1}93%{opacity:.8;transform:translateX(calc(var(--entrance) * .2))}}
@keyframes openingWave{0%,60%,100%{transform:rotate(0)}70%,90%{transform:rotate(3deg)}80%{transform:rotate(-3deg)}}
@keyframes curtainEntrance{from{translate:-25% 0}to{translate:0 0}}
@keyframes titleArrive{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:none}}
@keyframes titleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes mirrorSpin{from{translate:0 0}to{translate:40px 0}}
@keyframes ballSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes buttonGleam{0%,55%{left:-80px}80%,100%{left:calc(100% + 80px)}}
@keyframes runwayFlow{from{background-position:0 0}to{background-position:0 45px}}
@keyframes runwayGlow{0%,100%{opacity:.4}50%{opacity:1;scale:1.35}}
@keyframes orbitTilt{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@media(max-width:1000px){.welcome-copy{max-width:540px}.welcome-screen h1{font-size:70px}.opening-model{width:180px;height:340px;bottom:12%}.opening-left{left:0}.opening-right{right:0}.welcome-tagline{max-width:290px;font-size:13px}.welcome-screen h1 .reading-word{font-size:18px}}
@media(min-width:681px) and (max-height:650px){.welcome-screen{padding:94px 20px 45px}.mirror-ball{top:22px;scale:.8;transform-origin:top}.welcome-copy{padding:10px 0}.welcome-kicker{margin-bottom:12px;font-size:9px}.welcome-screen h1{font-size:clamp(62px,6.8vw,86px);margin-bottom:12px}.welcome-screen h1 .reading-word{font-size:17px;margin-bottom:10px}.welcome-tagline{margin:13px auto 18px}.opening-model{height:330px;bottom:10%;width:210px}.welcome-facts{margin-top:10px}.welcome-caption{bottom:11px}}
@media(max-width:680px){.welcome-screen{min-height:max(780px,100dvh);padding:120px 16px 300px;justify-content:flex-start}.welcome-copy{max-width:460px;padding:10px 0}.welcome-screen h1{font-size:clamp(47px,9.8vw,65px);letter-spacing:-.06em}.welcome-screen h1 .reading-word{font-size:16px;margin-bottom:11px}.welcome-kicker{font-size:8px;letter-spacing:.13em;margin-bottom:15px}.welcome-tagline{font-size:12px;margin:16px auto 18px}.welcome-tagline br{display:none}.welcome-actions .play-button{min-height:57px;min-width:225px;font-size:16px}.welcome-secondary{margin-top:13px}.welcome-secondary .btn{font-size:10px}.welcome-facts{font-size:9px;margin-top:11px}.welcome-curtain{width:17%;bottom:15%}.mirror-ball{top:22px;scale:.8;transform-origin:top}.float-bag,.float-bow{top:13%;width:43px;opacity:.7}.float-bag{left:5%}.float-bow{right:5%}.opening-model{width:150px;height:244px;bottom:6.5%}.opening-left{left:9%}.opening-right{right:9%}.opening-model:before{inset:8% 7% 3%}.welcome-caption{font-size:7px;letter-spacing:.2em;bottom:14px}.welcome-runway{inset:62% -23% -10%}.runway-lights{top:65%}.theater-arch{inset:9% 7% 3%}.light-orbit{width:90%;left:5%;top:24%;height:13%}.theater-twinkle{font-size:15px}}
@media(max-width:380px){.welcome-screen h1{font-size:43px}.opening-left{left:5%}.opening-right{right:5%}.opening-model{width:140px}.welcome-facts{font-size:8px}}
@media(prefers-reduced-motion:reduce){.welcome-curtain,.welcome-kicker,.welcome-screen h1,.welcome-screen h1 em,.welcome-tagline,.welcome-actions,.welcome-actions .play-button:after,.mirror-ball,.mirror-sphere:before,.mirror-ball i,.opening-model .avatar-render,.opening-model .avatar-hands,.light-orbit,.runway-lights i,.welcome-runway:after{animation:none!important}.welcome-actions .play-button:after{display:none}.opening-model .avatar-render{opacity:1;transform:none}}
