/* ███████████████████████████████████████████████████████████
   ██  PARALLAX.CSS: every line of the parallax lives here.   ██
   ██  Scroll down = the train moves = layers slide left.     ██
   ██  Far things slide slowly, near things fast.             ██
   ███████████████████████████████████████████████████████████ */

:root { --travel: 100vw; }   /* how far a speed-1 layer moves per scene */


/* ═══════════════════════════════════════════════════════════
   STEP 1 · THE SCROLL TIMELINE
   Each scene is a tall section. view-timeline turns
   "how far has this section scrolled past?" into 0% → 100%.
   ═══════════════════════════════════════════════════════════ */

.scene {
  height: 300vh;
  view-timeline: --scene block;
}


/* ═══════════════════════════════════════════════════════════
   STEP 2 · ONE ANIMATION FOR EVERY LAYER
   Slide left by speed × travel, driven by scroll, not by time.
   ═══════════════════════════════════════════════════════════ */

@keyframes travel {
  to { translate: calc(var(--speed) * var(--travel) * -1) 0; }
}

.layer {
  width: calc(100% + var(--speed) * var(--travel)); /* wide enough to never run out */
  animation: travel linear both;
  animation-timeline: --scene;   /* ← the scroll timeline from step 1 */
  animation-range: cover;        /* from the moment the scene enters until it leaves */
}


/* ═══════════════════════════════════════════════════════════
   STEP 3 · DEPTH = SPEED   ◀◀◀  THIS IS THE PARALLAX
   Same animation, different speed per layer. That's all it is.
   ═══════════════════════════════════════════════════════════ */

.layer--sky   { --speed: 0.04; } /* sky, horizon: almost still */
.layer--far   { --speed: 0.15; } /* skylines, hills, industry */
.layer--mid   { --speed: 0.4;  } /* tree lines, overhead wires, warehouses */
.layer--near  { --speed: 1;    } /* poles, masts, platforms */
.layer--front { --speed: 1.8;  } /* grass by the track: a blur */
.layer--flare { --speed: 2;    } /* streetlights sweeping past the glass */
.layer--glass { --speed: 0;    } /* rain on the window travels with you */


/* ═══════════════════════════════════════════════════════════
   STEP 4 · SCENES CROSSFADE
   Fade in as a scene enters, out as it leaves.
   Fully faded scenes are hidden, so the browser skips them.
   ═══════════════════════════════════════════════════════════ */

@keyframes scene-fade {
  entry 0%            { opacity: 0; visibility: hidden; }
  entry 100%, exit 0% { opacity: 1; visibility: visible; }
  exit 100%           { opacity: 0; visibility: hidden; }
}

.stage {
  animation: scene-fade linear both;
  animation-timeline: --scene;
}


/* ═══════════════════════════════════════════════════════════
   STEP 5 · HORIZONTAL SCROLL (the reel at the end)
   Scrolling down moves a pinned track sideways,
   with parallax inside it too.
   ═══════════════════════════════════════════════════════════ */

.reel {
  height: 700vh;
  view-timeline: --reel block;
  --travel: 330vw;               /* about the track's own trip, so speed 1 = the photos */
}

@keyframes slide { to { translate: calc(-100% + 100vw) 0; } }  /* until the track's end meets the screen's edge */
@keyframes drift { from { translate: -8% 0; } to { translate: 8% 0; } }

.reel__track     { animation: slide linear both; animation-timeline: --reel; animation-range: contain; }
.reel__frame img { animation: drift linear both; animation-timeline: --reel; animation-range: contain; } /* photos lag inside their frames */
.reel .layer     { animation-timeline: --reel; animation-range: contain; } /* the skyline behind moves slower */


/* ───────────────────────────────────────────────────────────
   EXTRAS
   ─────────────────────────────────────────────────────────── */

/* Route bar at the bottom: fills with the whole page's scroll() timeline. */
@keyframes fill { from { scale: 0 1; } }
.route__progress { animation: fill linear both; animation-timeline: scroll(root); }

/* Reduced motion: layers stand still, scenes still fade. */
@media (prefers-reduced-motion: reduce) {
  .layer, .reel__frame img { animation: none; }
}