/* ═══════════════════════════════════════════════════════════
   SUMMIT TRIATHLON COACHING — Scroll Effects
   Restrained, documentary-grade animations.
   No bounce. No spring. No circus.
   
   Effects:
   1. scroll-reveal — fade-up on viewport entry
   2. scroll-reveal-left / scroll-reveal-right — slide reveals
   3. scroll-parallax — subtle depth shift on scroll
   4. scroll-counter — number count-up animation
   5. scroll-video — play/pause video on visibility
   6. scroll-progress — page progress indicator
   
   All animations honour prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */


/* ── Scroll motion tokens (extended from base --motion-* scale) ── */
:root {
  --motion-scroll:      600ms;   /* 2× --motion-slow for scroll reveals */
  --motion-scroll-slow: 800ms;   /* decorative line reveals */
  --motion-scroll-zoom: 1200ms;  /* image zoom — slow, cinematic */
  --motion-scroll-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base: Hidden state for all scroll-reveal elements ── */
[data-scroll] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-scroll) var(--motion-scroll-ease),
              transform var(--motion-scroll) var(--motion-scroll-ease);
  will-change: opacity, transform;
}

[data-scroll="left"] {
  transform: translateX(-32px);
}

[data-scroll="right"] {
  transform: translateX(32px);
}

[data-scroll="scale"] {
  transform: scale(0.95);
}

/* ── Revealed state (added by JS) ── */
[data-scroll].is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}


/* ── Stagger: Children reveal in sequence ── */
[data-scroll-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-slow) var(--motion-scroll-ease),
              transform var(--motion-slow) var(--motion-scroll-ease);
}

[data-scroll-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-scroll-stagger].is-visible > *:nth-child(2) { transition-delay: var(--motion-fast); }
[data-scroll-stagger].is-visible > *:nth-child(3) { transition-delay: var(--motion-fast); }
[data-scroll-stagger].is-visible > *:nth-child(4) { transition-delay: var(--motion-base); }
[data-scroll-stagger].is-visible > *:nth-child(5) { transition-delay: var(--motion-slow); }
[data-scroll-stagger].is-visible > *:nth-child(6) { transition-delay: var(--motion-slow); }

[data-scroll-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}


/* ── Parallax: Depth layers for hero backgrounds ── */
.scroll-parallax {
  will-change: transform;
  transition: none; /* JS drives this directly */
}


/* ── Progress bar: Top of viewport ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--summit-peak-orange, #F47A20);
  z-index: var(--z-toast);
  transform-origin: left;
  transform: scaleX(0);
  transition: none; /* JS drives this */
}


/* ── Video hero: Subtle background video ── */
.video-hero {
  position: relative;
  overflow: hidden;
}

.video-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: var(--opacity-muted);
  z-index: 0;
}

.video-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 43, 69, 0.4) 0%,
    rgba(8, 43, 69, 0.85) 100%
  );
  z-index: 1;
}


/* ── Stat counter: Placeholder for JS-driven count ── */
[data-count-to] {
  font-variant-numeric: tabular-nums;
}


/* ── Section transitions: Smooth colour shifts ── */
.section-transition {
  position: relative;
}

.section-transition::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--section-next-bg, var(--summit-alpine-white, #F8F8F6)) 100%
  );
  pointer-events: none;
}


/* ── Horizontal rule reveal ── */
.hr-reveal {
  height: 2px;
  background: var(--summit-peak-orange, #F47A20);
  border: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-scroll-slow) var(--motion-scroll-ease);
}

.hr-reveal.is-visible {
  transform: scaleX(1);
}


/* ── Image zoom on scroll ── */
[data-scroll-zoom] {
  overflow: hidden;
}

[data-scroll-zoom] img {
  transition: transform var(--motion-scroll-zoom) var(--motion-scroll-ease);
  transform: scale(1.1);
}

[data-scroll-zoom].is-visible img {
  transform: scale(1);
}



/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION: Respect user preferences
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  [data-scroll],
  [data-scroll-stagger] > *,
  .hr-reveal,
  [data-scroll-zoom] img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .scroll-progress { display: none; }
  .video-hero__video { display: none; }
}