/* Mountains and Snow worlds: animations and styles (js/worlds/mountains*.js, js/worlds/snow*.js, js/worlds/snow-kit.js) */

/* chimney smoke, lamp glow, flags and string lights */
.ms-smoke { transform-box: fill-box; transform-origin: center; animation: ms-smoke 3.4s ease-out infinite; opacity: 0; }
@keyframes ms-smoke { 0% { transform: translate(0, 10px) scale(.5); opacity: 0; } 25% { opacity: .85; } 100% { transform: translate(18px, -40px) scale(1.5); opacity: 0; } }
.ms-glow { transform-box: fill-box; transform-origin: center; animation: ms-glow 3s ease-in-out infinite; }
@keyframes ms-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.ms-flag { transform-box: fill-box; transform-origin: 0% 50%; animation: ms-flag 1.6s ease-in-out infinite; }
@keyframes ms-flag { 0%, 100% { transform: scaleX(1) skewY(0); } 50% { transform: scaleX(.86) skewY(6deg); } }
.ms-bulb { animation: ms-bulb 2s ease-in-out infinite; }
@keyframes ms-bulb { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* falling snow: each sheet moves exactly one tile across and two tiles down, so the loop is seamless */
.ms-fall { animation: ms-fall 20s linear infinite; }
@keyframes ms-fall { from { transform: translate(0, 0); } to { transform: translate(var(--fx, 0px), var(--fy, 520px)); } }

@media (prefers-reduced-motion: reduce) {
  .ms-smoke, .ms-glow, .ms-flag, .ms-bulb, .ms-fall { animation: none !important; }
  .ms-smoke { opacity: .5; }
}

/* Mountains: chairlift chairs, skiers on the run, cows, the cuckoo clock */
.ms-ride { animation: ms-ride 26s linear infinite; }
@keyframes ms-ride { 0% { transform: translate(0, 0); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
.ms-skier { animation: ms-skier 12s ease-in-out infinite; }
@keyframes ms-skier {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; }
  6% { opacity: 1; }
  25% { transform: translate(-50px, 160px) scale(.85) rotate(-8deg); }
  50% { transform: translate(10px, 330px) scale(1) rotate(8deg); }
  75% { transform: translate(-90px, 520px) scale(1.15) rotate(-8deg); }
  94% { opacity: 1; }
  100% { transform: translate(-60px, 650px) scale(1.25); opacity: 0; }
}
.ms-tail { transform-box: fill-box; transform-origin: 50% 0%; animation: wiggle 1.6s ease-in-out infinite; }
.ms-graze { transform-box: fill-box; transform-origin: 20% 20%; animation: ms-graze 6s ease-in-out infinite; }
@keyframes ms-graze { 0%, 55%, 100% { transform: rotate(0); } 65%, 90% { transform: rotate(14deg); } }
.ms-pendulum { transform-box: fill-box; transform-origin: 50% 0%; animation: ms-pendulum 1.2s ease-in-out infinite alternate; }
@keyframes ms-pendulum { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .ms-ride, .ms-skier, .ms-tail, .ms-graze, .ms-pendulum { animation: none !important; }
}

/* Snow: northern lights, the whale, penguins, skaters going round, toys */
.sn-aurora { animation: sn-aurora 9s ease-in-out infinite alternate; }
@keyframes sn-aurora { from { opacity: .55; } to { opacity: 1; } }
.sn-whale { animation: sn-whale 9s ease-in-out infinite; }
@keyframes sn-whale { 0%, 30%, 100% { transform: translateY(34px); opacity: 0; } 40%, 70% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(34px); opacity: 0; } }
.sn-spout { transform-box: fill-box; transform-origin: 50% 100%; animation: sn-spout 9s ease-out infinite; opacity: 0; }
@keyframes sn-spout { 0%, 44% { transform: scale(.2); opacity: 0; } 50% { opacity: .95; } 62% { transform: scale(1.2); opacity: 0; } 100% { opacity: 0; } }
.sn-waddle { transform-box: fill-box; transform-origin: 50% 100%; animation: sn-waddle 1s ease-in-out infinite alternate; }
@keyframes sn-waddle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.sn-rock { transform-box: fill-box; transform-origin: 50% 100%; animation: sn-rock 1.8s ease-in-out infinite alternate; }
@keyframes sn-rock { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.sn-fishjump { transform-box: fill-box; transform-origin: center; animation: sn-fishjump 1.6s ease-in-out infinite; }
@keyframes sn-fishjump { 0%, 100% { transform: translate(0, 10px) rotate(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(0, -60px) rotate(-30deg) scale(1); } 85% { opacity: 1; transform: translate(0, 0) rotate(-180deg) scale(.8); } }
.sn-ride { animation: sn-ride 6.4s linear infinite; }
@keyframes sn-ride { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(330px); opacity: 0; } }
.sn-orbit { animation: sn-orbit 18s linear infinite; }
.sn-orbit-s { animation: sn-orbit-s 10s linear infinite; }
.sn-orbit-t { animation: sn-orbit-t 6s linear infinite; transform: translate(170px, 0); }
@keyframes sn-orbit { 0.0% { transform: translate(380px, 0px); } 6.25% { transform: translate(351px, 57px); } 12.5% { transform: translate(269px, 106px); } 18.75% { transform: translate(145px, 139px); } 25.0% { transform: translate(0px, 150px); } 31.25% { transform: translate(-145px, 139px); } 37.5% { transform: translate(-269px, 106px); } 43.75% { transform: translate(-351px, 57px); } 50.0% { transform: translate(-380px, 0px); } 56.25% { transform: translate(-351px, -57px); } 62.5% { transform: translate(-269px, -106px); } 68.75% { transform: translate(-145px, -139px); } 75.0% { transform: translate(0px, -150px); } 81.25% { transform: translate(145px, -139px); } 87.5% { transform: translate(269px, -106px); } 93.75% { transform: translate(351px, -57px); } 100.0% { transform: translate(380px, 0px); } }
@keyframes sn-orbit-s { 0.0% { transform: translate(180px, 0px); } 6.25% { transform: translate(166px, 22px); } 12.5% { transform: translate(127px, 41px); } 18.75% { transform: translate(69px, 54px); } 25.0% { transform: translate(0px, 58px); } 31.25% { transform: translate(-69px, 54px); } 37.5% { transform: translate(-127px, 41px); } 43.75% { transform: translate(-166px, 22px); } 50.0% { transform: translate(-180px, 0px); } 56.25% { transform: translate(-166px, -22px); } 62.5% { transform: translate(-127px, -41px); } 68.75% { transform: translate(-69px, -54px); } 75.0% { transform: translate(0px, -58px); } 81.25% { transform: translate(69px, -54px); } 87.5% { transform: translate(127px, -41px); } 93.75% { transform: translate(166px, -22px); } 100.0% { transform: translate(180px, 0px); } }
@keyframes sn-orbit-t { 0.0% { transform: translate(170px, 0px); } 6.25% { transform: translate(157px, 37px); } 12.5% { transform: translate(120px, 68px); } 18.75% { transform: translate(65px, 89px); } 25.0% { transform: translate(0px, 96px); } 31.25% { transform: translate(-65px, 89px); } 37.5% { transform: translate(-120px, 68px); } 43.75% { transform: translate(-157px, 37px); } 50.0% { transform: translate(-170px, 0px); } 56.25% { transform: translate(-157px, -37px); } 62.5% { transform: translate(-120px, -68px); } 68.75% { transform: translate(-65px, -89px); } 75.0% { transform: translate(0px, -96px); } 81.25% { transform: translate(65px, -89px); } 87.5% { transform: translate(120px, -68px); } 93.75% { transform: translate(157px, -37px); } 100.0% { transform: translate(170px, 0px); } }
@media (prefers-reduced-motion: reduce) {
  .sn-aurora, .sn-whale, .sn-spout, .sn-waddle, .sn-rock, .sn-fishjump, .sn-ride, .sn-orbit, .sn-orbit-s, .sn-orbit-t { animation: none !important; }
  .sn-whale { opacity: 1; transform: none; }
}