/* scroll-progress.css — golden spiral progress rail (Task 20)
   + waveform scroll variables + mobile horizontal fallback (Task 22) */

/* Waveform scroll variables — defaults (engine overwrites at runtime) */
:root {
  --waveform-state: 1;
  --wave-progress: 0;
  --wave-spread: 1;
  --wave-temp: 0.12;
  --wave-scale: 0.5;
  --wave-depth: 1;
}

/* Scroll progress rail — right side, 200px tall, gold gradient, glowing dot */
.scroll-progress {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 200px;
  background: var(--phi-stroke);
  border-radius: 1px;
  z-index: 100;
}
.scroll-progress-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--phi-gold-dim), var(--phi-gold));
  border-radius: 1px;
  transition: height 0.1s linear;
}
.scroll-progress-dot {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--phi-gold);
  box-shadow: 0 0 12px var(--phi-gold-glow);
  transition: top 0.1s linear;
}

/* Waveform states warm the rail dot as coherence rises (1 → 9, never 0) */
.wave-1 .scroll-progress-dot { box-shadow: 0 0 6px var(--phi-gold-glow); }
.wave-5 .scroll-progress-dot { box-shadow: 0 0 16px var(--phi-gold-glow); }
.wave-9 .scroll-progress-dot { box-shadow: 0 0 26px var(--phi-gold-bright), 0 0 40px var(--phi-gold-glow); }

/* SplitText-fallback word spans (set by scroll-engine.js) */
.split-reveal .split-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Task 22 mobile fallback — no pinning, native horizontal overflow */
@media (max-width: 768px) {
  .scroll-progress { display: none; }
  .horizontal-section.horizontal-fallback {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .horizontal-section.horizontal-fallback::-webkit-scrollbar { display: none; }
  .horizontal-section.horizontal-fallback .horizontal-track {
    will-change: auto;
  }
}