/* =============================================================================
   SPG Leaders — scroll component structure (v2 only)

   Layout mechanics only: stickiness, stage sizing, media fitting, track
   geometry. Every colour, border and type decision stays in each direction's
   own stylesheet, so the four directions still look nothing like each other.
============================================================================= */

/* ------------------------------------------------------------------- media */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--media-placeholder, rgba(128, 128, 128, .09));
}
.media > img,
.media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--16x10 { aspect-ratio: 16 / 10; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--square { aspect-ratio: 1 / 1; }

/* Slow ken-burns drift, tied to scroll progress rather than a timer */
.media--drift > img { transform: scale(calc(1.04 + var(--p, 0) * 0.06)); transform-origin: 50% 50%; }

/* Parallax layers must not reveal their edges as they travel */
[data-parallax] { will-change: transform; }
.media--parallax { overflow: hidden; }
.media--parallax > img { height: 118%; margin-top: -9%; }

/* ------------------------------------------------------------ pinned stage */
/* Outer element is tall; the stage inside sticks while it scrolls past. */
.pin { position: relative; }
.pin--2 { height: 220vh; }
.pin--3 { height: 320vh; }
.pin--4 { height: 420vh; }
.pin--5 { height: 520vh; }

.pin__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Steps stack in one cell; only the active one is shown. */
.steps { display: grid; }
.step {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), visibility .5s;
  pointer-events: none;
}
.step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Layered visuals that cross-fade with the active step */
.layers { position: relative; }
.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1);
  transform: scale(1.03);
}
.layer.is-active { opacity: 1; transform: none; }

/* Progress rail — a thin readout of how far through the pinned story you are */
.pinbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: .14;
}
.pinbar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: currentColor;
  opacity: 1;
}

/* --------------------------------------------------------------- scrubber */
.scrub { position: relative; }
.scrub__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.scrub__stage > canvas,
.scrub__stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.scrub__over {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------- horizontal rail */
.railx { position: relative; }
.railx__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.railx__track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  will-change: transform;
  padding-inline: var(--gut, 2rem);
}
.railx__track > * { flex: 0 0 auto; }

/* ------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Unpin everything and let the content read as an ordinary stacked page. */
  .pin, .scrub, .railx { height: auto !important; }
  .pin__stage, .scrub__stage, .railx__stage {
    position: static;
    height: auto;
    display: block;
    padding-block: clamp(2rem, 5vw, 4rem);
  }
  .steps { gap: clamp(1.5rem, 4vw, 2.5rem); }
  .step {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .layers { display: none; }
  .railx__track { flex-wrap: wrap; transform: none !important; }
  .media--drift > img { transform: none; }
  [data-parallax] { transform: none !important; }
  .scrub__stage > canvas { position: static; height: auto; aspect-ratio: 16 / 9; }
  .scrub__over { height: auto; }
}