// Sunrise that progresses with scroll on the Awakening page.
//
// A fixed-position backdrop (pre-dawn navy → dawn violet → rose horizon
// → gold sunrise) tied to how far the user has read. A round "sun" disc
// rises from below the viewport, fully clearing the horizon ~70% of the
// way through. Reading the page literally watches the sun come up.
//
// Performance: rAF-throttled scroll listener, single transform/opacity
// writes, paused when the Awakening view isn't on screen.

(function () {
  const backdrop = document.getElementById("sunrise");
  if (!backdrop) return;
  const sun = backdrop.querySelector(".sr-sun");
  const sky = backdrop.querySelector(".sr-sky");
  const view = document.querySelector('.view[data-view="awakening"]');
  if (!view) return;

  // The 5 color stops in the sky gradient at progress = 0 → 1.
  // Each stop is rgba; we interpolate top + bottom of the gradient
  // independently to get a horizon glow.
  const STOPS = [
    // [topRGB, bottomRGB]
    [[ 6,  4, 22],  [ 12, 10, 38]],   // 0   — deep pre-dawn
    [[12,  8, 36],  [ 36, 16, 68]],   // 0.25 — first violet
    [[28, 14, 56],  [110, 48, 84]],   // 0.50 — false dawn
    [[60, 28, 70],  [220,116, 96]],   // 0.75 — rose horizon
    [[80, 50, 80],  [255,196,120]],   // 1    — gold sunrise
  ];

  function lerp(a, b, t) { return a + (b - a) * t; }
  function lerpRGB(a, b, t) {
    return [
      Math.round(lerp(a[0], b[0], t)),
      Math.round(lerp(a[1], b[1], t)),
      Math.round(lerp(a[2], b[2], t)),
    ];
  }
  function colorAt(progress, idx) {
    // idx: 0 = top color, 1 = bottom color.
    const p = Math.max(0, Math.min(1, progress)) * (STOPS.length - 1);
    const lo = Math.floor(p);
    const hi = Math.min(STOPS.length - 1, lo + 1);
    const f = p - lo;
    const c = lerpRGB(STOPS[lo][idx], STOPS[hi][idx], f);
    return "rgb(" + c[0] + "," + c[1] + "," + c[2] + ")";
  }

  function computeProgress() {
    // 0 when the view's top is at the top of the viewport, 1 when the
    // bottom of the view reaches the bottom of the viewport.
    const rect = view.getBoundingClientRect();
    const total = Math.max(1, rect.height - window.innerHeight);
    // -rect.top is how far we've scrolled INTO the view.
    return Math.max(0, Math.min(1, -rect.top / total));
  }

  let rafQueued = false;
  let lastProgress = -1;

  function applyProgress(progress) {
    if (Math.abs(progress - lastProgress) < 0.003) return;
    lastProgress = progress;
    // Sky gradient — top color → bottom color.
    sky.style.background = "linear-gradient(180deg, "
      + colorAt(progress, 0) + " 0%, "
      + colorAt(progress, 1) + " 100%)";
    // Sun rises from below the viewport: at p=0 it's hidden (translateY(140%)),
    // at p=0.7 it touches the horizon, by p=1 it has fully cleared.
    const sunY = 140 - progress * 180;       // % of its own size
    const sunOpacity = Math.max(0, Math.min(1, (progress - 0.10) * 1.6));
    const sunGlow    = Math.max(0, Math.min(1, (progress - 0.20) * 1.4));
    sun.style.transform = "translate(-50%, " + sunY.toFixed(1) + "%)";
    sun.style.opacity = sunOpacity.toFixed(3);
    sun.style.boxShadow = "0 0 " + (60 + sunGlow * 220).toFixed(0) + "px "
      + (20 + sunGlow * 80).toFixed(0) + "px "
      + "rgba(255, 200, 120, " + (0.15 + sunGlow * 0.45).toFixed(3) + ")";
  }

  function onScroll() {
    if (rafQueued) return;
    rafQueued = true;
    requestAnimationFrame(() => {
      rafQueued = false;
      applyProgress(computeProgress());
    });
  }

  function start() {
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    onScroll();
  }
  function stop() {
    window.removeEventListener("scroll", onScroll);
    window.removeEventListener("resize", onScroll);
  }

  function isActive() { return view.classList.contains("active"); }
  if ("MutationObserver" in window) {
    new MutationObserver(() => { if (isActive()) start(); else stop(); })
      .observe(view, { attributes: true, attributeFilter: ["class"] });
    if (isActive()) start();
  } else {
    start();
  }
})();
