/* Gentle ambient motion for picture-book scenes. Only applies inside .animated. */

.animated svg .a-cloud { animation: drift 14s ease-in-out infinite alternate; }
.animated svg .a-cloud:nth-of-type(2n) { animation-duration: 19s; animation-delay: -6s; }
.animated svg .a-cloud:nth-of-type(3n) { animation-duration: 23s; animation-delay: -11s; }
@keyframes drift { from { transform: translateX(-22px); } to { transform: translateX(26px); } }

.animated svg .a-wave { animation: lap 3.2s ease-in-out infinite alternate; }
.animated svg .a-wave:nth-of-type(2n) { animation-delay: -1.4s; animation-duration: 4s; }
@keyframes lap { from { transform: translateX(-9px); } to { transform: translateX(9px); } }

.animated svg .a-twinkle { animation: twinkle 3s ease-in-out infinite; }
.animated svg .a-twinkle:nth-of-type(3n) { animation-delay: -1s; animation-duration: 2.2s; }
.animated svg .a-twinkle:nth-of-type(4n+1) { animation-delay: -2s; animation-duration: 4s; }
@keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }

.animated svg .a-sun { transform-box: fill-box; transform-origin: center; animation: glow 5s ease-in-out infinite; }
@keyframes glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.animated svg .a-rain { animation: rain .9s linear infinite; }
.animated svg .a-rain:nth-of-type(2n) { animation-delay: -.45s; }
.animated svg .a-rain:nth-of-type(3n) { animation-delay: -.3s; animation-duration: 1.1s; }
@keyframes rain { from { transform: translate(0, -40px); opacity: 0; } 20% { opacity: .5; } to { transform: translate(-14px, 40px); opacity: 0; } }

.animated svg .a-flash { animation: flash 5s steps(1) infinite; }
@keyframes flash { 0%, 6%, 12%, 100% { opacity: 1; } 3%, 9% { opacity: .1; } 14%, 96% { opacity: 0; } }

.animated svg .a-beam { animation: beam 4s ease-in-out infinite; }
@keyframes beam { 0%, 100% { opacity: .1; } 50% { opacity: .4; } }

.animated svg .a-window { animation: twinkle 6s steps(1) infinite; }

/* Characters */
.animated svg .a-bob { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.animated svg .a-jump { animation: jump 1.3s cubic-bezier(.3, 0, .4, 1) infinite; }
@keyframes jump { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } }
.animated svg .a-sway { animation: sway 1.4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: translateX(-4px) rotate(-1deg); } to { transform: translateX(4px) rotate(1deg); } }
.animated svg .a-wave-hi { animation: bob 1.8s ease-in-out infinite; }
.animated svg .a-hop { animation: hop 3.4s ease-in-out infinite; }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-10px); } 86% { transform: translateY(0); } 92% { transform: translateY(-4px); } }
.animated svg .a-fly { animation: fly 3s ease-in-out infinite alternate; }
@keyframes fly { from { transform: translate(-6px, 4px); } to { transform: translate(8px, -8px); } }

@media (prefers-reduced-motion: reduce) {
  .animated svg * { animation: none !important; }
}