/* ============================================================
   fade_scroll_view.css — mirrors library/lib/src/components/fade_scroll_view.dart
   ============================================================
   Edge fade overlays for scrollable content. The Flutter version
   listens to a ScrollController and toggles the fade based on
   `pixels > 0` / `pixels < maxScrollExtent`. On the web, the host
   page is responsible for toggling `.on` (typically via a scroll
   listener), so this file only defines the visuals.

     .fade-edge           — base overlay (full-width band, opacity-animated)
     .fade-edge--top      — top edge: bg → transparent
     .fade-edge--bottom   — bottom edge: transparent → bg
     .fade-edge.on        — visible state (opacity 1)

   The overlay is `position: fixed`; offset its top/bottom via
   the `--fade-edge-top` / `--fade-edge-bottom` custom properties
   when the page has a fixed/sticky header or footer that should
   sit above it.
   ============================================================ */

.fade-edge {
  position: fixed;
  left: 0;
  right: 0;
  height: var(--space-6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 9;
}

.fade-edge--top {
  top: var(--fade-edge-top, 0);
  background: linear-gradient(to bottom, var(--color-background), transparent);
}

.fade-edge--bottom {
  bottom: var(--fade-edge-bottom, 0);
  background: linear-gradient(to top, var(--color-background), transparent);
}

.fade-edge.on { opacity: 1; }