/* A fashion theater with a different atmosphere for each part of the show. */
#app{isolation:isolate}
.fashion-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;--scene-glow:#efbd84;--scene-pink:#e7a1d6}
.fashion-scene[data-theme=beach],.fashion-scene[data-theme=sports]{--scene-glow:#a5e1dc}
.fashion-scene[data-theme=ballet],.fashion-scene[data-theme=pajamas]{--scene-glow:#f8beda}
.fashion-scene[data-theme=fairy]{--scene-glow:#cbe9b5}
.fashion-scene[data-theme=goth],.fashion-scene[data-theme=villain]{--scene-glow:#c2a4f0}
.scene-rig{position:absolute;top:0;left:9%;right:9%;height:22px;border-top:1px solid #f8d6eb23;display:flex;justify-content:space-around}
.scene-rig span{display:block;width:24px;height:10px;background:#95748e;border:1px solid #e9c2d84a;border-radius:0 0 6px 6px;opacity:.34;box-shadow:0 6px 14px var(--scene-glow)}
.scene-beam{position:absolute;top:-5%;left:12%;width:48%;height:110%;transform-origin:50% 0;clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);background:linear-gradient(var(--scene-glow),transparent 86%);opacity:.055;transform:rotate(14deg)}
.scene-beam-b{left:42%;transform:rotate(-15deg)}
.scene-orbit{position:absolute;left:calc(50% - 300px);top:16%;width:600px;height:600px;border:1px solid #f3c7e21a;border-radius:50%;box-shadow:0 0 0 28px #f3c7e204,0 0 0 29px #f3c7e209;opacity:.75}
.scene-edge-art{position:absolute;width:clamp(58px,9vw,130px);height:auto;opacity:.16;filter:saturate(.7)}
.edge-left{left:1.5%;top:19%;transform:rotate(-18deg)}
.edge-right{right:1.5%;bottom:7%;transform:rotate(17deg)}
.scene-spark{position:absolute;left:var(--sx);top:var(--sy);color:var(--scene-glow);font-style:normal;font-size:16px;opacity:.23}

/* Backstage tickets introduce the skills without adding another screen. */
.skill-screen .screen-header{position:relative;padding-bottom:18px;border-bottom:1px solid #eac4df2b}
.skill-screen .screen-header:after{content:'';position:absolute;bottom:-3px;left:0;width:54px;height:5px;border-radius:4px;background:linear-gradient(90deg,#e9c17e,#e788c2)}
.skill-card{position:relative;overflow:hidden;border-left:5px solid #d787b6}
.skill-group:last-child .skill-card{border-left-color:#b799d8}
.skill-card:after{content:'';position:absolute;right:55px;top:14px;bottom:14px;border-left:1px dashed #d9bad1;pointer-events:none}
.skill-icon{transform:rotate(-5deg);box-shadow:0 3px 0 #dfc6d545;transition:transform .2s}
.skill-card:hover .skill-icon{transform:rotate(4deg) scale(1.04)}

/* The learning area stays still. The show comes alive after the answer gate. */
.fashion-scene[data-phase=questions] .scene-rig,.fashion-scene[data-phase=questions] .scene-orbit,.fashion-scene[data-phase=questions] .scene-spark{display:none}
.fashion-scene[data-phase=questions] .scene-edge-art{opacity:.09}
.fashion-scene:is([data-phase=theme-roll],[data-phase=inspiration],[data-phase=countdown],[data-phase=runway]) .scene-beam{animation:scenerySweep 12s ease-in-out infinite alternate}
.fashion-scene .scene-beam-b{animation-delay:-6s!important}
.fashion-scene:is([data-phase=inspiration],[data-phase=result],[data-phase=final]) .scene-orbit{animation:sceneryHalo 9s ease-in-out infinite alternate}
.fashion-scene:not([data-phase=questions]) .scene-spark{animation:sceneryTwinkle 6s ease-in-out var(--delay) infinite}
.theme-reveal-icon{animation:revealEmblem .7s cubic-bezier(.2,.8,.2,1) both}
.inspiration-card{animation:photoArrive .6s cubic-bezier(.22,.8,.3,1) both;transform-origin:50% 85%}
.inspiration-card:nth-child(2){animation-delay:.12s}.inspiration-card:nth-child(3){animation-delay:.24s}
.inspiration-screen>.ready-theme{animation:photoArrive .6s .3s both}
.theme-slot:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 14px 20px #62446013,inset 0 -14px 20px #62446013;pointer-events:none}
.countdown-number{position:relative}
.countdown-number:before{content:'';position:absolute;inset:-18px;border-radius:50%;border:2px dashed #f5d6a688;animation:countdownOrbit 12s linear infinite;pointer-events:none}

/* Warm bulbs frame the original character, at every camera zoom. */
.dressing-mirror{position:absolute;inset:0;pointer-events:none;z-index:0;animation:mirrorWarmth 7s ease-in-out infinite alternate}
.dressing-mirror i{position:absolute;width:6px;height:6px;border:1px solid #fff9ef;background:#fff3c8;border-radius:50%;box-shadow:0 0 5px #fff6d8,0 0 12px #ffdb9677;transform:translate(-50%,-50%)}
.time-urgent .dressing-mirror{animation:none;opacity:.7}
.fashion-scene:is([data-phase=dress],[data-phase=studio]) .scene-orbit{display:none}
.fashion-scene:is([data-phase=dress],[data-phase=studio]) .scene-edge-art{opacity:.07}
.catwalk-scene:after{content:'';position:absolute;left:12%;right:12%;bottom:2px;height:4px;pointer-events:none;background:radial-gradient(circle,#fff6d7 1px,#f0bc7166 2px,transparent 3px) 0 0/22px 4px;box-shadow:0 0 14px #edce9133}

/* A short awards entrance, followed by a calm keepsake screen. */
.scene-confetti{position:absolute;left:var(--sx);top:-30px;width:6px;height:11px;border-radius:1px;background:var(--scene-glow);animation:awardsConfetti 4.3s ease-in var(--arrival) both;opacity:0}
.scene-confetti:nth-of-type(3n){background:var(--scene-pink);height:7px;width:7px}
.scene-confetti:nth-of-type(4n){background:#bca4e4;width:4px;height:14px}
.podium-contestant.place-4{animation-delay:0s}.podium-contestant.place-3{animation-delay:.12s}.podium-contestant.place-2{animation-delay:.25s}.podium-contestant.place-1{animation-delay:.42s}
.place-1 .podium-step{position:relative;overflow:hidden}
.place-1 .podium-step:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#fff8d975 45%,transparent 65%);transform:translateX(-120%);animation:awardShine 2s .9s ease-out both}
.winner-crown{animation:crownArrive .85s .7s cubic-bezier(.2,.8,.2,1) both}
.final-screen .story-look{animation:keepsakeArrive .7s cubic-bezier(.2,.8,.2,1) both}
.final-screen .story-look:nth-child(2){animation-delay:.14s}.final-screen .story-look:nth-child(3){animation-delay:.28s}

@keyframes scenerySweep{from{transform:rotate(-9deg)}to{transform:rotate(13deg)}}
@keyframes sceneryHalo{from{opacity:.38;transform:scale(.97)}to{opacity:.8;transform:scale(1.035)}}
@keyframes sceneryTwinkle{0%,100%{opacity:.12}50%{opacity:.38}}
@keyframes revealEmblem{from{opacity:0;transform:translateY(12px) rotate(-12deg) scale(.75)}to{opacity:1;transform:translateY(0) rotate(-4deg) scale(1)}}
@keyframes photoArrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes countdownOrbit{to{transform:rotate(360deg)}}
@keyframes mirrorWarmth{from{opacity:.72}to{opacity:1}}
@keyframes awardsConfetti{0%{opacity:0;transform:translateY(-20px) rotate(var(--turn))}12%{opacity:.7}80%{opacity:.5}100%{opacity:0;transform:translate(28px,105dvh) rotate(calc(var(--turn) + 240deg))}}
@keyframes awardShine{to{transform:translateX(120%)}}
@keyframes crownArrive{from{opacity:0;translate:0 -24px;scale:.5}to{opacity:1;translate:0 0;scale:1}}
@keyframes keepsakeArrive{from{opacity:0;translate:0 26px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:680px){.scene-edge-art{width:58px}.edge-left{left:-18px;top:13%}.edge-right{right:-15px}.scene-orbit{left:calc(50% - 215px);width:430px;height:430px}.scene-spark{font-size:12px}.skill-card:after{right:48px}.dressing-mirror i{width:4px;height:4px}}
@media(prefers-reduced-motion:reduce){.fashion-scene *,.dressing-mirror,.theme-reveal-icon,.inspiration-card,.inspiration-screen>.ready-theme,.countdown-number:before,.place-1 .podium-step:before,.winner-crown,.final-screen .story-look{animation:none!important}.scene-confetti{display:none}.skill-icon{transition:none}.place-1 .podium-step:before{display:none}}