/* A narrow, non-interactive dissolve where content meets the viewport. */
.scroll-edge {
  position: fixed;
  inset-inline: 0;
  height: clamp(32px, 5vh, 56px);
  z-index: 6;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  background: rgb(24 40 237 / 55%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.scroll-edge--top {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.scroll-edge--bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}
body:has(.mobile-menu.open) .scroll-edge {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), print {
  .scroll-edge { display: none; }
}