#motion-stage, #motion-stage * { pointer-events: none; }
#motion-toggle .motion-off,
#motion-toggle[aria-pressed="false"] .motion-on { display: none; }
#motion-toggle[aria-pressed="false"] .motion-off { display: block; }
#motion-toggle[aria-pressed="true"] { background: #e9d6a84d; }

.motion-weather-cloud { animation: cloud-weather 26s ease-in-out infinite alternate; }
@keyframes cloud-weather {
  from { opacity: .32; transform: translate(-6px, 1px); }
  to { opacity: .68; transform: translate(8px, -1.8px); }
}
.motion-paper-cloud { animation: cloud-on-string 5.8s ease-in-out infinite alternate; transform-origin: 0 0; }
@keyframes cloud-on-string {
  from { transform: rotate(-4deg); }
  to { transform: rotate(5.5deg); }
}
.motion-vapour { animation: vapour-curl 5.4s linear infinite; }
@keyframes vapour-curl {
  0% { opacity: 0; transform: translate(0, 0) scale(.55); }
  21% { opacity: .61; }
  66% { opacity: .37; transform: translate(2.7px, -8px) scale(1.1); }
  100% { opacity: 0; transform: translate(7px, -17px) scale(1.48); }
}
.motion-falls { opacity: .44; stroke-dasharray: 6 10 2 14; animation: waterfall 1.75s linear infinite; }
@keyframes waterfall { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
.motion-wave { stroke-dasharray: 8 22; animation: wave-run 3.9s linear infinite; }
@keyframes wave-run {
  0%, 100% { opacity: 0; }
  25%, 59% { opacity: .71; }
  from { stroke-dashoffset: 30; }
  to { stroke-dashoffset: 0; }
}
.motion-fish { transform-box: fill-box; transform-origin: 54% 45%; }
.motion-fish-1 { animation: brass-fish-one 8.3s ease-in-out -2.1s infinite; }
.motion-fish-2 { animation: brass-fish-two 7.1s ease-in-out -3.2s infinite; }
@keyframes brass-fish-one {
  0%, 100% { transform: translate(-4px, 1px) rotate(2deg); }
  36% { transform: translate(5px, -3px) rotate(-4deg); }
  72% { transform: translate(11px, -2px) rotate(2deg); }
}
@keyframes brass-fish-two {
  0%, 100% { transform: translate(-1px, 0) rotate(-1deg); }
  48% { transform: translate(8px, 3px) rotate(5deg); }
  70% { transform: translate(5px, 4px) rotate(-2deg); }
}
html[data-scene-motion="off"] #motion-stage,
html[data-scene-motion="off"] #world .puff,
html[data-scene-motion="off"] #world .bubble { display: none; }
html[data-motion-visibility="hidden"] #world *,
html[data-scene-motion="off"] #world * { animation-play-state: paused !important; }