/* Parallax Scrolling - CSS Scroll-Driven Animations
 * 
 * Uses animation-timeline: scroll() for continuous scroll-to-motion mapping.
 * NOTE: This is different from scroll-animations.css which uses view() for
 * element visibility-based animations.
 * 
 * - scroll(): Animation progress tied to scroll position (0-100% of page/container)
 * - view(): Animation progress tied to element visibility in viewport
 */

/* Parallax keyframes */
@keyframes parallax-scroll-up {
  from {
    transform: translateY(var(--parallax-start, 20px));
  }

  to {
    transform: translateY(var(--parallax-end, -50px));
  }
}

@keyframes parallax-scroll-down {
  from {
    transform: translateY(var(--parallax-start, -20px));
  }

  to {
    transform: translateY(var(--parallax-end, 50px));
  }
}

/* Base parallax container - isolates scroll context */
.parallax-bg-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout style paint;
  z-index: 0;
}

/* Parallax image wrapper - extra height to prevent edge gaps during scroll */
.parallax-bg {
  position: absolute;
  inset: -15% 0;
  /* Extra height to prevent gaps during parallax movement */
  height: 130%;
  width: 100%;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.parallax-bg img,
.parallax-bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  display: block;
}

.parallax-bg picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   CSS Scroll-Driven Animations (experimental)
   Currently using JavaScript fallback (parallax.js)
   for better browser compatibility.
   ============================================ */
/* Disabled - using JavaScript implementation instead
@supports (animation-timeline: scroll()) {
  .parallax-bg {
    animation: parallax-scroll-up linear both;
    animation-timeline: scroll(nearest block);
  }

  .parallax-direction-down .parallax-bg {
    animation-name: parallax-scroll-down;
  }
}
*/

/* Speed variations via CSS custom properties
   Defined outside @supports for correct inheritance */
.parallax-speed-subtle {
  --parallax-start: 10px;
  --parallax-end: -30px;
}

.parallax-speed-medium {
  --parallax-start: 20px;
  --parallax-end: -60px;
}

.parallax-speed-fast {
  --parallax-start: 30px;
  --parallax-end: -100px;
}

/* ============================================
   FALLBACK: Static background for older browsers
   Shows image normally without parallax effect
   ============================================ */
@supports not (animation-timeline: scroll()) {
  .parallax-bg {
    /* Reset to normal positioning - no parallax, just static image */
    animation: none;
    inset: 0;
    height: 100%;
  }

  .parallax-bg-container {
    /* Keep container visible but without parallax */
    overflow: hidden;
  }
}

/* ============================================
   MOBILE: Disable parallax for performance
   Touch scrolling + parallax can feel jarring
   Mobile GPUs handle parallax poorly
   ============================================ */
@media (max-width: 768px) {
  .parallax-bg {
    animation: none !important;
    inset: 0;
    height: 100%;
    transform: none !important;
  }
}

/* ============================================
   ACCESSIBILITY: Respect reduced motion preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .parallax-bg {
    animation: none !important;
    inset: 0;
    height: 100%;
    transform: none !important;
  }
}