/* A progressive lens at each viewport edge, visible only during page movement. */
.scroll-blur {
  --scroll-blur-height: 28px;
  --scroll-blur-enter: 150ms;
  --scroll-blur-leave: 350ms;
  --scroll-blur-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset-inline: 0;
  z-index: 20;
  height: var(--scroll-blur-height);
  pointer-events: none;
  user-select: none;
  /* Opacity belongs on the filter layers: a translucent ancestor blocks their backdrop. */
  visibility: hidden;
  transition: visibility 0s linear var(--scroll-blur-leave);
}

.scroll-blur--top { top: 0; --scroll-blur-direction: to top; }
.scroll-blur--bottom { bottom: 0; --scroll-blur-direction: to bottom; }

.scroll-blur.is-active {
  visibility: visible;
  transition-delay: 0s;
}

.scroll-blur > span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--scroll-blur-leave) var(--scroll-blur-ease);
  -webkit-backdrop-filter: blur(var(--edge-blur));
  backdrop-filter: blur(var(--edge-blur));
  -webkit-mask-image: linear-gradient(var(--scroll-blur-direction),
    transparent var(--edge-start), #000 var(--edge-full));
  mask-image: linear-gradient(var(--scroll-blur-direction),
    transparent var(--edge-start), #000 var(--edge-full));
}

.scroll-blur.is-active > span {
  opacity: 1;
  transition-duration: var(--scroll-blur-enter);
}

.scroll-blur > span:nth-child(1) { --edge-blur: .5px; --edge-start: 0%; --edge-full: 20%; }
.scroll-blur > span:nth-child(2) { --edge-blur: 1px; --edge-start: 16%; --edge-full: 38%; }
.scroll-blur > span:nth-child(3) { --edge-blur: 2px; --edge-start: 34%; --edge-full: 56%; }
.scroll-blur > span:nth-child(4) { --edge-blur: 4px; --edge-start: 52%; --edge-full: 74%; }
.scroll-blur > span:nth-child(5) { --edge-blur: 8px; --edge-start: 70%; --edge-full: 92%; }

@media (max-width: 767px) {
  .scroll-blur { --scroll-blur-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-blur { display: none; transition: none; }
  .scroll-blur > span { transition: none; }
}