/* Filter-free, feathered artwork; only opacity and transform animate. */
.scroll-mist {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  opacity: 0;
  visibility: hidden;
  transition: opacity .85s ease-out;
}
.scroll-mist.is-active { visibility: visible; will-change: opacity; }
.scroll-mist.is-scrolling { opacity: .56; transition-duration: .2s; }
.scroll-mist-wisp {
  position: absolute;
  inset: 0 -32px;
  background: url('assets/mist-feather.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
.scroll-mist-wisp-near { transform: translate3d(-16px, 20px, 0); }
.scroll-mist-wisp-far { opacity: .55; transform: translate3d(16px, -20px, 0) scaleX(-1); }
.scroll-mist.is-active .scroll-mist-wisp { will-change: transform; }
.scroll-mist.is-active .scroll-mist-wisp-near { animation: scroll-mist-near 4.8s ease-in-out infinite alternate; }
.scroll-mist.is-active .scroll-mist-wisp-far { animation: scroll-mist-far 6s ease-in-out infinite alternate; }
.scroll-mist.is-up .scroll-mist-wisp { animation-direction: alternate-reverse; }
@keyframes scroll-mist-near {
  from { transform: translate3d(-16px, 20px, 0); }
  to { transform: translate3d(16px, -20px, 0); }
}
@keyframes scroll-mist-far {
  from { transform: translate3d(16px, -20px, 0) scaleX(-1); }
  to { transform: translate3d(-16px, 20px, 0) scaleX(-1); }
}
html.intro-pending .scroll-mist,
html.intro-playing .scroll-mist,
body.menu-open .scroll-mist,
body.modal-open .scroll-mist { visibility: hidden; }
@media (max-width: 700px), (pointer: coarse) {
  .scroll-mist.is-scrolling { opacity: .46; }
  .scroll-mist-wisp-far { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-mist { display: none; }
}