/* Seasonal Hub animated scenes */
.sh-scene{--sh-sky1: #3f8fd8;--sh-sky2: #86c3ef;--sh-sky3: #d6eefa;--sh-sun: #ffe27a;--sh-cloud: #ffffff;--sh-dim: 0;position: relative;width: 100%;aspect-ratio: 3 / 1;min-height: 190px;max-height: 420px;overflow: hidden;border-radius: var(--sh-radius,18px);background: #27306a;isolation: isolate}
.sh-scene>svg{position: absolute;inset: 0;width: 100%;height: 100%;display: block}
.sh-scene[data-phase="sunrise"]{--sh-sky1: #46518f;--sh-sky2: #e79aa0;--sh-sky3: #ffd8a0;--sh-sun: #ffc56b;--sh-cloud: #ffd9d2;--sh-dim: .14}
.sh-scene[data-phase="sunset"]{--sh-sky1: #2f2560;--sh-sky2: #d65a78;--sh-sky3: #ffae5e;--sh-sun: #ff8a4c;--sh-cloud: #f7a8a8;--sh-dim: .22}
.sh-scene[data-phase="night"]{--sh-sky1: #070b24;--sh-sky2: #141c48;--sh-sky3: #2a3370;--sh-sun: #ff8a4c;--sh-cloud: #3a4378;--sh-dim: .56}
.sh-scene[data-scene="halloween"][data-phase="sunset"]{--sh-sky1: #2b1a4f;--sh-sky2: #b8436a;--sh-sky3: #ff9a4a}
.sh-scene[data-scene="halloween"][data-phase="night"]{--sh-sky1: #0c0820;--sh-sky2: #24164a;--sh-sky3: #3b2a68}
.sh-scene .sh-s1{stop-color: var(--sh-sky1)}
.sh-scene .sh-s2{stop-color: var(--sh-sky2)}
.sh-scene .sh-s3{stop-color: var(--sh-sky3)}
.sh-scene stop,.sh-scene .sh-sunbody,.sh-scene .sh-cloud,.sh-scene .sh-win{transition: stop-color 2.5s ease,fill 2.5s ease}
.sh-scene .sh-sunbody{fill: var(--sh-sun)}
.sh-scene .sh-cloud{fill: var(--sh-cloud)}
.sh-scene .sh-dim{fill: #0a1035;opacity: var(--sh-dim);transition: opacity 2.5s ease}
.sh-scene .sh-sun,.sh-scene .sh-moon,.sh-scene .sh-sunpath{transition: transform 2.5s ease,opacity 2.5s ease}
.sh-scene .sh-on-night,.sh-scene .sh-on-dusk,.sh-scene .sh-on-day,.sh-scene .sh-on-light,.sh-scene .sh-stars{transition: opacity 2.5s ease}
.sh-scene .sh-on-night,.sh-scene .sh-on-dusk,.sh-scene .sh-stars{opacity: 0}
.sh-scene[data-phase="night"] .sh-on-night,.sh-scene[data-phase="night"] .sh-on-dusk,.sh-scene[data-phase="sunset"] .sh-on-dusk{opacity: 1}
.sh-scene[data-phase="night"] .sh-on-day,.sh-scene[data-phase="night"] .sh-on-light,.sh-scene[data-phase="sunset"] .sh-on-day,.sh-scene[data-phase="sunrise"] .sh-on-day{opacity: 0}
.sh-scene[data-phase="night"] .sh-stars{opacity: 1}
.sh-scene[data-phase="sunrise"] .sh-stars,.sh-scene[data-phase="sunset"] .sh-stars{opacity: .3}
.sh-scene[data-phase="night"] .sh-on-light{visibility: hidden;transition: opacity 2.5s ease,visibility 0s 2.5s}
.sh-scene .sh-win{fill: #a9d8f2}
.sh-scene[data-phase="sunrise"] .sh-win{fill: #f3c9b0}
.sh-scene[data-phase="sunset"] .sh-win{fill: #f6b07e}
.sh-scene[data-phase="night"] .sh-win{fill: #141a33}
.sh-scene .sh-head{transition: transform .6s ease;transform-box: fill-box;transform-origin: 50% 100%}
.sh-scene .sh-look .sh-head{transform: rotate(16deg) translateX(3px)}
.sh-scene .sh-face{opacity: 0;transition: opacity .5s ease}
.sh-scene .sh-look .sh-face{opacity: 1}
.sh-scene .sh-fall{animation: sh-fall var(--d,12s) linear var(--dl,0s) infinite}
.sh-scene .sh-flutter{animation: sh-flutter var(--fd,3s) ease-in-out infinite alternate;transform-box: fill-box;transform-origin: center}
.sh-scene .sh-sway{animation: sh-sway var(--fd,3s) ease-in-out infinite alternate}
.sh-scene .sh-bob{animation: sh-bob 4.2s ease-in-out infinite}
.sh-scene .sh-bob2{animation: sh-bob 4.2s ease-in-out -2.1s infinite}
.sh-scene .sh-drift{animation: sh-drift var(--d,90s) linear var(--dl,0s) infinite}
.sh-scene .sh-twinkle{animation: sh-twinkle 3s ease-in-out infinite alternate}
.sh-scene .sh-flap{animation: sh-flap .35s ease-in-out infinite alternate;transform-box: fill-box;transform-origin: center}
.sh-scene .sh-flyby{animation: sh-flyby var(--d,26s) linear var(--dl,0s) infinite}
.sh-scene .sh-flicker{animation: sh-flicker .5s ease-in-out infinite alternate;transform-box: fill-box;transform-origin: 50% 100%}
.sh-scene .sh-wave{animation: sh-wave 5s ease-in-out infinite alternate}
.sh-scene .sh-flag{animation: sh-flagwave 1.6s ease-in-out infinite alternate;transform-box: fill-box;transform-origin: 0 50%}
.sh-scene .sh-smoke{animation: sh-smoke 6s ease-out infinite}
.sh-scene .sh-step{animation: sh-bob-step .45s ease-in-out infinite alternate}
.sh-scene .sh-limb-a,.sh-scene .sh-limb-b{animation: sh-swing .9s ease-in-out infinite alternate;transform-box: fill-box;transform-origin: 50% 0}
.sh-scene .sh-limb-b{animation-delay: -.9s}
.sh-scene .sh-run .sh-limb-a,.sh-scene .sh-run .sh-limb-b{animation-duration: .28s}
.sh-scene .sh-idle .sh-limb-a,.sh-scene .sh-idle .sh-limb-b,.sh-scene .sh-idle .sh-step{animation: none}
.sh-scene .sh-bird-flap .sh-wing{animation: sh-flap .22s ease-in-out infinite alternate;transform-box: fill-box;transform-origin: 50% 100%}
.sh-scene .sh-blow{animation: sh-blow var(--d,10s) linear var(--dl,0s) infinite}
.sh-scene .sh-zzz{animation: sh-zzz 3.9s ease-out infinite}
@keyframes sh-fall{from{transform: translate(var(--x),-30px)}
to{transform: translate(calc(var(--x) + var(--dr,0px)),430px)}}
@keyframes sh-flutter{from{transform: translateX(-14px) rotate(-40deg)}
to{transform: translateX(14px) rotate(160deg)}}
@keyframes sh-sway{from{transform: translateX(-8px)}
to{transform: translateX(8px)}}
@keyframes sh-bob{0%,100%{transform: translateY(0)}
50%{transform: translateY(-6px)}}
@keyframes sh-drift{from{transform: translateX(-260px)}
to{transform: translateX(1300px)}}
@keyframes sh-twinkle{from{opacity: 1}
to{opacity: .25}}
@keyframes sh-flap{from{transform: scaleY(1)}
to{transform: scaleY(-.4)}}
@keyframes sh-flyby{from{transform: translate(-80px,0)}
50%{transform: translate(600px,-30px)}
to{transform: translate(1300px,10px)}}
@keyframes sh-flicker{from{transform: scale(1,1) rotate(-3deg)}
to{transform: scale(.88,1.12) rotate(3deg)}}
@keyframes sh-wave{from{transform: translateX(-18px)}
to{transform: translateX(18px)}}
@keyframes sh-flagwave{from{transform: skewY(-6deg) scaleX(1)}
to{transform: skewY(5deg) scaleX(.9)}}
@keyframes sh-smoke{from{transform: translate(0,0) scale(.6);opacity: .7}
to{transform: translate(18px,-60px) scale(1.6);opacity: 0}}
@keyframes sh-blow{0%{transform: translate(var(--sx),var(--sy));opacity: 0}
8%{opacity: 1}
30%{transform: translate(calc(var(--sx) + var(--w) * .12),calc(var(--sy) + var(--h1)))}
100%{transform: translate(calc(var(--sx) + var(--w)),calc(var(--sy) + var(--h2)));opacity: 1}}
@keyframes sh-zzz{from{transform: translate(0,0);opacity: 0}
20%{opacity: 1}
to{transform: translate(26px,-50px);opacity: 0}}
@keyframes sh-bob-step{from{transform: translateY(0)}
to{transform: translateY(-3px)}}
@keyframes sh-swing{from{transform: rotate(24deg)}
to{transform: rotate(-24deg)}}
.sh-scene.sh-paused *{animation-play-state: paused !important}
@media (prefers-reduced-motion: reduce){.sh-scene *{animation: none !important}}