/* Artwork stays fixed. Only the waterfall and layers of mist are animated. */
.scroll-hero-scenery { background-position:65% bottom; }
.scroll-scenery-canvas { display:block; width:100%; height:100%; pointer-events:none; }
.scroll-hero.has-scenery-motion .scroll-mist { display:none; }
/* Visible, irregular fallback for devices without WebGL. */
.scroll-mist {
  z-index:-2; inset:32% -12% auto; height:30%; filter:blur(18px);
  background:
    radial-gradient(ellipse at 28% 60%,#e9e5dc85,transparent 28%),
    radial-gradient(ellipse at 55% 38%,#f1e8d99c,transparent 34%),
    radial-gradient(ellipse at 77% 60%,#e0e4e77a,transparent 30%);
  animation:scenery-mist-drift 13s ease-in-out infinite alternate;
}
@keyframes scenery-mist-drift {
  from { transform:translate(-5%,3%) scale(1.04,.92); opacity:.55; }
  to { transform:translate(6%,-5%) scale(1.12,1.1); opacity:.9; }
}
.motion-paused .scroll-mist { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .scroll-mist { animation:none; } }