/* V7: semantic usage graphics, deliberate pacing and opaque costume changes. */
main[data-screen="1"] .option{min-height:86px;gap:17px}
.context-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:840px}.usage-icon{clip-path:inset(0 6%)}
.option.context{flex-direction:column;text-align:center;justify-content:center;gap:8px;min-height:220px;padding:16px 12px;background:#15583e;color:#fff7e5}
.option.context small{color:#d2e4d8}.option.context[aria-pressed=true]{background:#22694d;border-color:#ff82bf}.usage-icon{display:block;width:125px;height:125px;background-image:url(assets/lebkuchen-nutzung.webp);background-size:300% 200%;background-position:var(--ix) var(--iy);background-repeat:no-repeat;flex:none}.context[aria-pressed=true] .usage-icon{animation:cookie-hello .5s ease}
.other-claim{display:inline-block;opacity:0;transform:translateY(7px);transition:opacity .7s,transform .7s}.other-visible .other-claim{opacity:1;transform:none}
.outfit-scene:not(.settled) .avatar.outfits{opacity:0;transition:opacity .8s ease,transform .8s ease;transform:translateY(12px)}.outfit-scene:not(.settled) .avatar.outfits.arrived{opacity:1;transform:none}
.whirl{display:none;position:absolute;z-index:6;left:21%;right:21%;top:0;bottom:0;background:#f9d7e2;border-radius:47%;overflow:hidden;filter:blur(2px);pointer-events:none}
.whirl{clip-path:polygon(12% 2%,86% 0,100% 18%,92% 35%,100% 50%,82% 70%,66% 85%,56% 100%,42% 100%,27% 83%,15% 69%,0 50%,8% 32%,0 15%)}
.whirl:before,.whirl:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-12deg,transparent 0 18px,#ff78b5 20px 32px,#fff0d3 36px 50px,transparent 54px 70px);border-radius:50%}.whirl:after{inset:10% -30%;background:repeating-linear-gradient(8deg,transparent 0 30px,#ffd7a8 33px 46px,transparent 50px 70px)}
.whirl i{position:absolute;left:-25%;width:150%;height:18%;border:10px solid #fff0d3;border-top-color:#ff73b3;border-bottom-color:#f29bba;border-radius:50%;z-index:2}.whirl i:nth-child(1){top:12%}.whirl i:nth-child(2){top:41%}.whirl i:nth-child(3){top:68%}
.spinning .whirl{display:block;animation:opaque-whirl .95s ease-in-out both}.spinning .whirl:before{animation:whirl-bands .13s linear infinite}.spinning .whirl:after{animation:whirl-bands .11s linear infinite reverse}.spinning .pose.visible{animation:santa-fast-turn .95s ease-in-out both}
@keyframes opaque-whirl{0%{opacity:0;transform:scale(.4,.9)}18%{opacity:1;transform:scale(1.06,1)}35%,70%{opacity:1;transform:scale(1.08,1.02)}86%{opacity:1;transform:scale(.96,1)}100%{opacity:0;transform:scale(.2,.95)}}
@keyframes whirl-bands{to{transform:translateY(70px) rotate(2deg)}}
@keyframes santa-fast-turn{0%{transform:rotateY(0);filter:blur(0)}25%{transform:rotateY(600deg) scaleX(.65);filter:blur(7px)}50%{transform:rotateY(1200deg) scaleX(.5);filter:blur(13px)}75%{transform:rotateY(1800deg) scaleX(.75);filter:blur(7px)}100%{transform:rotateY(2160deg);filter:blur(0)}}
.result-actor{height:440px;position:relative;width:100%;margin:15px auto;overflow:hidden;isolation:isolate}
.result-transition .result-actor>.gaze{position:absolute;inset:0 auto auto 50%;width:420px;height:420px;aspect-ratio:1;margin:0;transform:translateX(-50%);opacity:0;transition:opacity .7s,transform .9s;max-width:none;min-height:0}
.result-transition .result-actor>.gaze.arrived{opacity:1}.gaze>.pose{background-image:url(assets/santa-blicke.webp)}
.result-transition .result-actor>.gaze>.pose{width:100%;height:100%;inset:0;margin:0}
.result-transition .result-actor>.stack{position:absolute;inset:0 auto auto 50%;width:660px;height:440px;aspect-ratio:3/2;margin:0;transform:translateX(-50%);opacity:0;transition:opacity .6s;max-width:none;min-height:0}
.result-transition .result-actor>.stack>.pose{width:100%;height:100%;inset:0;margin:0}
.result-transition .result-actor.gifts-falling>.gaze{transform:translateX(calc(-50% - 45px))}
.result-transition .result-actor.ready-stack>.gaze{opacity:0}.result-transition .result-actor.ready-stack>.stack{opacity:1}
.falling-gifts{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s}.gifts-falling .falling-gifts{opacity:1}.ready-stack .falling-gifts{opacity:0}
.fall-gift{position:absolute;display:block;width:70px;height:65px;border-radius:6px;background:linear-gradient(120deg,#f12a8d,#b80054);box-shadow:inset 5px 4px 10px #ffffff55,inset -5px -3px 8px #0002,0 8px 12px #00251955;top:0;opacity:0}
.fall-gift:before{content:'';position:absolute;left:44%;width:15%;height:100%;background:#fff1d6}.fall-gift:after{content:'';position:absolute;top:37%;left:0;width:100%;height:16%;background:#fff1d6}
.gift-pink{left:64%;--land:275px;--turn:-6deg;--delay:0s}.gift-cream{left:66%;width:78px;height:47px;background:linear-gradient(120deg,#fff7e4,#d5b89b);--land:220px;--turn:5deg;--delay:.25s}.gift-cream:before,.gift-cream:after{background:#15583e}.gift-green{left:69%;width:55px;height:52px;background:linear-gradient(120deg,#438c54,#145831);--land:160px;--turn:-8deg;--delay:.5s}.gift-green:before,.gift-green:after{background:#f56ba9}
.gifts-falling .fall-gift{animation:gift-drop .7s var(--delay) cubic-bezier(.2,.6,.5,1) both}
@keyframes gift-drop{0%{opacity:0;transform:translateY(-140px) rotate(-35deg)}15%{opacity:1}75%{transform:translateY(calc(var(--land) + 10px)) rotate(var(--turn))}100%{opacity:1;transform:translateY(var(--land)) rotate(0)}}
@media(max-width:700px){main[data-screen="1"] .option{min-height:78px}.context-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.option.context{min-height:208px;padding:12px 8px}.usage-icon{width:105px;height:105px}.option.context b{font-size:15px}.option.context small{font-size:12px;line-height:1.35}.option.context:last-child{grid-column:1/-1;flex-direction:row;min-height:120px;gap:18px}.option.context:last-child .usage-icon{width:90px;height:90px}.outfit-scene:not(.settled) .santa-claim{font-size:24px;line-height:1.4}.outfit-scene:not(.settled) .other-claim{display:block}.whirl{left:23%;right:23%}
.result-actor{height:380px;margin:12px auto;overflow:hidden}.result-transition .result-actor>.gaze{width:370px;height:370px}.result-transition .result-actor>.stack{width:570px;height:380px}.result-transition .result-actor>.gaze>.pose,.result-transition .result-actor>.stack>.pose{inset:0;margin:0;width:100%;height:100%}.result-transition .result-actor.gifts-falling>.gaze{transform:translateX(calc(-50% - 35px))}.gift-pink{left:65%;--land:240px;width:60px;height:60px}.gift-cream{left:66%;--land:190px;width:65px;height:42px}.gift-green{left:70%;--land:138px;width:47px;height:47px}}
@media(prefers-reduced-motion:reduce){.whirl{display:none!important}.other-claim{opacity:1;transform:none}.outfit-scene .avatar.outfits{opacity:1;transform:none}.gaze,.stack,.falling-gifts{transition:none!important}}