.story-background-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #eee8dc;
}

.story-background-section > :not(.scroll-story-background) {
  position: relative;
  z-index: 2;
}

.scroll-story-background {
  position: absolute;
  z-index: 0;
  inset: -10% 0;
  pointer-events: none;
  opacity: var(--story-bg-opacity, 0);
  transform: translate3d(0, var(--story-bg-y, 0px), 0) scale(var(--story-bg-scale, 1.055));
  transform-origin: center;
  will-change: transform, opacity;
  background:
    linear-gradient(180deg, #eee8dc 0%, #eee8dc1f 25%, #eee8dc0d 67%, #eee8dc 100%),
    linear-gradient(90deg, #eee8dce8 0%, #eee8dc75 34%, #eee8dc24 58%, #eee8dca8 100%),
    url('assets/bride-horse-background.webp') center 44% / cover no-repeat;
  filter: saturate(.8) contrast(.94) brightness(.98);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 19%, #000 77%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 19%, #000 77%, transparent 100%);
}

.scroll-story-background--dubai {
  background:
    linear-gradient(180deg, #eee8dc 0%, #eee8dc1f 25%, #eee8dc0d 67%, #eee8dc 100%),
    linear-gradient(90deg, #eee8dce8 0%, #eee8dc75 34%, #eee8dc24 58%, #eee8dca8 100%),
    url('assets/dubai-entry-background.webp') center 48% / cover no-repeat;
}

.story-background-section::before,
.story-background-section::after {
  z-index: 1;
  opacity: .58;
}

@media (max-width: 650px) {
  .scroll-story-background {
    inset: -6% -35%;
    background-position: 51% center;
    filter: saturate(.72) contrast(.9) brightness(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-story-background {
    opacity: .38;
    transform: none;
  }
}