/* The Fantasy valley painting as a living band (directions B and C): its own proportions are kept so the
   waterfall streaks and mist stay on what they animate; petals are drawn by valley.js. */
.art { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 2048 / 640; min-width: 100%; }
.art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.fall { position: absolute; display: block; opacity: .55; mix-blend-mode: screen;
  background: url("assets/fall-streaks.png") 0 0 / 100% 192px repeat-y;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent);
  animation: fall 1600ms linear infinite; }
.fall-1 { left: 24.6%; top: 30%; width: 2.6%; height: 42%; }
.fall-2 { left: 16.2%; top: 34%; width: 1.6%; height: 27%; animation-duration: 1900ms; }
@keyframes fall { to { background-position: 0 192px; } }

.mist { position: absolute; display: block; width: 44%; height: 44%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); filter: blur(16px); animation: drift 38s ease-in-out infinite alternate; }
.mist-1 { left: 50%; top: 36%; }
.mist-2 { left: 66%; top: 52%; width: 36%; height: 36%; animation-duration: 46s; animation-delay: -18s; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(8%); } }

@media (prefers-reduced-motion: reduce) {
  .fall, .mist { animation: none; }
  .fall { opacity: 0; }
}