/* Layer: Gradient Overlay */
/* Jetstream-style gradient overlay that can be used over banner or player layers */
/* Based on Jetstream's TrailerBackground.kt GradientOverlay implementation */
/* Uses scroll-snap for vertical positioning like banner layer */

[data-layer="gradient"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-gradient); /* 40 - above banner (30) */
  pointer-events: none;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;  /* Match banner layer - no offset for hero layers */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[data-layer="gradient"]::-webkit-scrollbar {
  display: none;
}

/* Track container for scroll-snap sections */
.gradient-track {
  display: flex;
  flex-direction: column;
}

/* Gradient sections - each section is a scroll target with offsetTop positioning */
/* Section 0 (hero): offsetTop = 0 - gradient fully visible */
/* Section 1 (under-nav): offsetTop = heroHeight - navbarHeight - gradient bottom aligned with navbar */
/* Section 2 (hidden): offsetTop = 100vh - gradient completely off-screen */

.gradient-section {
  scroll-snap-align: start;
  position: relative;
}

/* Hero section: Height set by JS at runtime via --hero-offset CSS variable.
   JS calculates: heroOffset = (100vh - navbarBottom) - navbarBottom.
   Hero bottom is positioned at navbarHeight from screen bottom.
   Fallback to 60vh if CSS variable not set. */
.gradient-section-hero {
  height: var(--hero-offset, 60vh);
  overflow: visible;
}

/* Under-nav section: spacer between hero and hidden positions */
.gradient-section-under-nav {
  min-height: 40vh;
}

/* Hidden section: scrolling here hides gradient completely */
.gradient-section-hidden {
  min-height: 100vh;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  /* Height matches the visible hero image height (not the section height) */
  /* This ensures gradient bottom aligns with banner image bottom */
  height: var(--hero-image-bottom, 72vh);
  pointer-events: none;
  
  /* Jetstream uses 3 layered gradients (first is topmost in CSS):
   * 1. Diagonal: (500,500) → (1000,0) = top-right direction
   * 2. Horizontal: left to right, 300px → 1000px
   * 3. Vertical: transparent → bg color fuzzy line at bottom to overlap banner edge
   * 
   * Converted to responsive percentages for 1920×1080 (16:9):
   * - Vertical: starts at 95%, fades to bg color at 100%
   * - Horizontal: 300px / 1920 = 15.6%, 1000px / 1920 = 52.1%
   * - Diagonal: ~32.7% to ~63.6% along the diagonal
   */
  background-image:
    linear-gradient(
      to top right,
      rgba(26, 28, 30, 1) 32.7%,
      rgba(26, 28, 30, 0) 53.6%
    ),
    linear-gradient(
      to right,
      rgba(26, 28, 30, 0.9) 30%,
      rgba(26, 28, 30, 0) 50%
    ),
    linear-gradient(
      to bottom,
      transparent 95%,
      var(--color-background) 100%
    );
}