/**
 * Dorset Realty – Scroll Effects
 * 
 * CSS-driven scroll effects using --dr-scroll-progress variable (0-1)
 * JS sets the variable, CSS controls the visual effects
 */

/* ===========================================
   0. iOS / MOBILE: FIX HERO BACKGROUND
   background-attachment: fixed is broken on iOS Safari — image won't show.
   Use scroll on touch devices / small viewports.
   =========================================== */

@media (max-width: 991px) {
  .dr-scroll-fade[id^="brxe-"] {
    background-attachment: scroll !important;
  }
}

/* iOS Safari: fixed backgrounds are unreliable even on larger viewports */
@supports (-webkit-touch-callout: none) {
  .dr-scroll-fade[id^="brxe-"] {
    background-attachment: scroll !important;
  }
}

/* ===========================================
   1. SCROLL FADE OVERLAY
   Darkens video/image sections on scroll
   =========================================== */

.dr-scroll-fade {
  --dr-overlay-color: 0, 0, 0;           /* RGB values for overlay */
  --dr-max-overlay-opacity: 0.5;         /* Max darkness: 0-1 */
  --dr-scroll-progress: 0;               /* Set by JS */
}

.dr-scroll-fade .dr-scroll-overlay {
  position: absolute;
  inset: 0;
  background: rgb(var(--dr-overlay-color));
  opacity: calc(var(--dr-scroll-progress, 0) * var(--dr-max-overlay-opacity, 0.5));
  pointer-events: none;
  z-index: 1;
  will-change: opacity;
}

/* Content must be above overlay */
.dr-scroll-fade > .brxe-container,
.dr-scroll-fade > .brxe-div,
.dr-scroll-fade > .brxe-block {
  position: relative;
  z-index: 2;
}

/* ===========================================
   2. SCROLL FADE CONTENT
   Fades out content on scroll (like Salient)
   =========================================== */

.dr-scroll-fade-content {
  --dr-scroll-progress: 0;
}

.dr-scroll-fade-content > .brxe-container,
.dr-scroll-fade-content > .brxe-div {
  opacity: calc(1 - var(--dr-scroll-progress, 0));
  will-change: opacity;
}

/* ===========================================
   3. SCROLL PARALLAX + FADE
   Combined parallax movement with fade
   =========================================== */

.dr-scroll-parallax-fade {
  --dr-scroll-progress: 0;
  --dr-parallax-strength: 0.15;          /* How much to move */
}

.dr-scroll-parallax-fade > .brxe-container {
  opacity: calc(1 - var(--dr-scroll-progress, 0));
  transform: translateY(calc(var(--dr-scroll-progress, 0) * 100px * var(--dr-parallax-strength)));
  will-change: opacity, transform;
}

/* ===========================================
   4. PRESETS / MODIFIERS
   =========================================== */

/* Light overlay (for dark backgrounds) */
.dr-scroll-fade--light {
  --dr-overlay-color: 255, 255, 255;
}

/* Stronger fade */
.dr-scroll-fade--strong {
  --dr-max-overlay-opacity: 0.7;
}

/* Subtle fade */
.dr-scroll-fade--subtle {
  --dr-max-overlay-opacity: 0.3;
}

/* Gradient overlay instead of solid */
.dr-scroll-fade--gradient .dr-scroll-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--dr-overlay-color), 0.8) 100%
  );
}