/* ==========================================================================
   KB Brand System — Scrollytelling
   Scrollama-based sticky chart + scrolling text steps
   Dependencies: brand-tokens.css, layout.css (scrolly tokens, breakpoints)
   Used by: scrollytelling.njk layout
   Reference: Pudding.cool, The Washington Post interactives
   ========================================================================== */

/* --- Scrolly Container --- */
.scrolly {
  position: relative;
  display: flex;
  gap: var(--scrolly-gap);
}

/* --- Sticky Graphic (55% width) --- */
.scrolly__graphic {
  flex: 0 0 55%;
  position: sticky;
  top: var(--nav-height);
  height: 100vh; height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: flex-start;
  z-index: var(--z-base);
  padding: var(--space-lg) 0;
}

.scrolly__graphic .viz-container {
  width: 100%;
  max-width: 560px;
  min-height: 360px;
  margin: 0 auto;
}

/* --- Text Steps (40% width) --- */
.scrolly__steps {
  flex: 0 0 40%;
  padding-top: 30vh; padding-top: 30dvh;
}

.scrolly__step {
  min-height: 70vh; min-height: 70dvh;
  display: flex;
  align-items: center;
  padding: var(--space-lg) var(--space-md);
  opacity: 0.15;
  transition: opacity var(--duration-slow) var(--ease-out);
}

/* First step starts more visible */
.scrolly__step:first-child {
  opacity: 0.5;
}

.scrolly__step.is-active {
  opacity: 1;
}

.scrolly__step-content {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  max-width: 360px;
}

.scrolly__step-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  letter-spacing: var(--tracking-tight);
}

.scrolly__step-content p {
  margin-bottom: var(--space-sm);
}

.scrolly__step-content strong {
  color: var(--color-text-primary);
}

/* --- Step Indicator Dots --- */
.scrolly__progress {
  position: fixed;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  z-index: var(--z-sticky);
}

.scrolly__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.15);
  transition: all var(--duration-fast) var(--ease-out);
}

.scrolly__dot.is-active {
  background-color: var(--color-accent);
  transform: scale(1.4);
}

/* --- Mobile: Stacked Layout --- */
@media (max-width: 768px) {
  .scrolly {
    flex-direction: column;
  }

  .scrolly__graphic {
    flex: 1 1 100%;
    position: sticky;
    top: 0;
    height: auto;
    max-height: 45vh; max-height: 45dvh;
    z-index: var(--z-sticky);
    overflow: hidden;
    padding: var(--space-md) 0;
  }

  .scrolly__graphic .viz-container {
    min-height: 240px;
    max-width: 100%;
  }

  .scrolly__steps {
    flex: 1 1 100%;
    padding-top: var(--space-lg);
  }

  .scrolly__step {
    min-height: 50vh; min-height: 50dvh;
    padding: var(--space-md);
  }

  .scrolly__step-content {
    max-width: 100%;
  }

  .scrolly__progress {
    right: var(--space-sm);
  }
}

/* --- Scroll-Driven CSS Animations (Chrome 115+, Edge 115+) --- */
@supports (animation-timeline: view()) {
  .scrolly-fade-in {
    animation: scrollFadeIn linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 50%;
  }

  @keyframes scrollFadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .section .section-header,
  .section .project-header {
    animation: scrollFadeIn linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 35%;
  }

  .section-full .section-header {
    animation: scrollFadeIn linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 35%;
  }
}

/* --- Scroll progress bar (CSS-only, GPU-composited) --- */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent, #6FCDCD);
    z-index: calc(var(--z-nav, 500) + 1);
    pointer-events: none;
    transform-origin: left;
    transform: scaleX(0);
    animation: scrollProgress linear;
    animation-timeline: scroll();
  }

  @keyframes scrollProgress {
    to { transform: scaleX(1); }
  }
}

/* --- Dark section gradient transitions --- */
.section-full.theme-dark::before {
  content: '';
  display: block;
  height: 80px;
  background: linear-gradient(to bottom, var(--color-bg, #FFFFFF), #1A1A1A);
  margin-top: calc(-1 * var(--space-section));
}
.section-full.theme-dark::after {
  content: '';
  display: block;
  height: 80px;
  background: linear-gradient(to bottom, #1A1A1A, var(--color-bg, #FFFFFF));
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .scrolly-fade-in,
  .section .section-header,
  .section .project-header,
  .section-full .section-header {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .scroll-progress { display: none; }
  .scrolly__step { opacity: 1; transition: none; }
  .scrolly__dot { transition: none; }
}