/* Decorative weather stays inside each landscape and never captures clicks. */
.weather-host{position:relative}
.character-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.shop-hero .character-motion{z-index:0}
.season-weather{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:0;contain:layout paint}
.weather-particle{position:absolute;top:-24px;left:var(--x);width:var(--size);height:var(--size);animation:weather-fall var(--duration) var(--delay) linear infinite;animation-play-state:paused}
.season-weather.is-running .weather-particle,.season-weather.is-running .weather-particle::before{animation-play-state:running}
.weather-particle::before{content:'';display:block;width:100%;height:100%;animation:weather-flutter var(--flutter) var(--delay) ease-in-out infinite alternate;animation-play-state:paused}
.weather-petal::before{background:linear-gradient(135deg,#ffe3f2,#ff91c5);border-radius:75% 15% 65% 35%;box-shadow:inset 1px 1px 0 #fff6}
.weather-leaf::before{background:linear-gradient(135deg,#ffdc63,#ee8b22 65%,#ca631b);clip-path:polygon(50% 0,65% 26%,95% 16%,83% 48%,100% 61%,62% 77%,53% 100%,44% 77%,6% 62%,20% 45%,7% 20%,37% 28%)}
.weather-snow::before{background:#fff;border-radius:50%;box-shadow:0 0 4px #d7f6ff;opacity:.8}
.shop-hero-logo{position:relative;z-index:1}
/* Join section: only decorative elements move; labels and controls stay still. */
.server-intro .bubble{animation:intro-bubble 7s ease-in-out infinite}
.server-intro .bubble-two{animation-duration:9s;animation-delay:-3s}
.server-intro .bubble-three{animation-duration:11s;animation-delay:-6s}
.server-intro .blossom{animation:intro-flower 15s ease-in-out infinite}
.server-intro .snowflake{animation:intro-snow 28s linear infinite}
.server-intro .card-leaf{animation:intro-leaf 6s ease-in-out infinite;transform-origin:50% 80%}
.season-token-icon{display:block;font-style:normal;animation:intro-token 5s ease-in-out infinite}
.four-season-tokens>span:nth-child(2) .season-token-icon{animation-duration:6s;animation-delay:-1.5s}
.four-season-tokens>span:nth-child(3) .season-token-icon{animation-duration:7s;animation-delay:-3s}
.four-season-tokens>span:nth-child(4) .season-token-icon{animation-duration:6s;animation-delay:-4.5s}
.server-intro .bubble,.server-intro .season-particle,.server-intro .card-leaf,.server-intro .season-token-icon{animation-play-state:paused;pointer-events:none}
.server-intro.intro-motion-active .bubble,.server-intro.intro-motion-active .season-particle,.server-intro.intro-motion-active .card-leaf,.server-intro.intro-motion-active .season-token-icon{animation-play-state:running}
@keyframes intro-bubble{0%,100%{translate:0 0}50%{translate:10px -28px}}
@keyframes intro-flower{0%,100%{rotate:-8deg;translate:0 0}50%{rotate:12deg;translate:4px -10px}}
@keyframes intro-snow{from{rotate:0deg}to{rotate:360deg}}
@keyframes intro-leaf{0%,100%{rotate:-6deg}50%{rotate:9deg}}
@keyframes intro-token{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -7px;rotate:5deg}}
@media(prefers-reduced-motion:reduce){.server-intro .bubble,.server-intro .season-particle,.server-intro .card-leaf,.server-intro .season-token-icon{animation:none}}
@keyframes weather-fall{0%{transform:translate3d(0,-20px,0);opacity:0}8%{opacity:.85}85%{opacity:.75}100%{transform:translate3d(var(--drift),var(--fall),0);opacity:0}}
@keyframes weather-flutter{from{transform:translateX(-9px) rotate(-35deg) rotateY(0)}to{transform:translateX(9px) rotate(100deg) rotateY(55deg)}}
@media(max-width:760px){.weather-particle:nth-child(even){display:none}}
@media(prefers-reduced-motion:reduce){.season-weather{display:none}.weather-particle,.weather-particle::before{animation:none}}