/* "How a ... project runs" as a pinned scroll story (template-parts/steps-story.php,
   assets/js/steps.js, DESIGN.md "Steps story").

   By default (phones, tablets, short screens, reduced motion) the steps stand one under
   another: number, title, hint, text, then the step's scene in a Plinth card. On a big
   enough desktop the stage pins for a run of scroll: all steps sit in one grid cell,
   the current one is shown, the rest wait above or below it, and a rail on the left
   fills with the scroll. The layout is decided here by media queries, not by the script,
   so nothing moves when WP Rocket releases the script on the first interaction. The
   stage is position: sticky for native scrolling; under smooth-scrollbar (which scrolls
   with transforms, so sticky never engages) steps.js moves it instead. */

.steps-story .route-section-title {
  margin-bottom: 5.6rem;
}

.steps-story__list {
  display: grid;
  gap: 8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps-story__step {
  display: grid;
  gap: 3.2rem;
  min-width: 0;
}

.steps-story__rail,
.steps-story__next {
  display: none;
}

.steps-story__num {
  margin: 0 0 1.6rem;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: #e5b080;
}

.steps-story__num span {
  margin-left: 0.4rem;
  color: #555b64;
}

.steps-story__title {
  margin: 0 0 1.2rem;
  font-weight: 500;
  font-size: clamp(3.2rem, calc(1.6rem + 2.4vw), 6.4rem);
  line-height: 1.05;
  letter-spacing: -0.1rem;
  color: #fff;
}

.steps-story__hint {
  margin: 0 0 2.4rem;
  font-size: clamp(1.6rem, calc(1.2rem + 0.4vw), 1.8rem);
  line-height: 1.3;
  color: #989898;
}

.steps-story__text {
  max-width: 44rem;
  margin: 0;
  font-size: clamp(1.8rem, calc(1.5rem + 0.25vw), 2rem);
  line-height: 1.5;
  color: #989898;
}

/* The scene: a Plinth card like the bento's, the drawing melting into it at the edges
   over a faint dot grid. */
.steps-story__art {
  position: relative;
  aspect-ratio: 760 / 600;
  overflow: hidden;
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 1.6rem;
  background: #111318;
}

.steps-story__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.3px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  pointer-events: none;
}

.steps-story__art svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 768px) {
  .steps-story__step {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 0 4.8rem;
  }
}

/* ---------- Pinned story (desktop) ---------- */
@media (min-width: 1200px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .steps-story {
    --art-h: min(60rem, calc(100vh - 24rem));
    --run: 150vh;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* The track is the scroll the stage holds through: its own height plus the run. */
  .steps-story__track {
    height: calc(var(--art-h) + var(--run));
  }

  .steps-story__pin {
    position: sticky;
    top: max(11rem, calc((100vh - var(--art-h)) / 2 + 4rem));
    height: var(--art-h);
    padding-left: 5.6rem;
  }

  .steps-story__list {
    gap: 0;
    height: 100%;
  }

  .steps-story__step {
    grid-area: 1 / 1;
    height: 100%;
    gap: 0 6.4rem;
    pointer-events: none;
  }

  .steps-story__step.is-current {
    z-index: 2;
    pointer-events: auto;
  }

  .steps-story__art {
    justify-self: end;
    width: min(100%, calc(var(--art-h) * 760 / 600));
  }

  /* The next steps, one line each, under the current one. */
  .steps-story__next {
    display: block;
    margin: 4.8rem 0 0;
    padding: 2.4rem 0 0;
    border-top: 0.1rem solid rgba(255, 255, 255, 0.08);
    list-style: none;
  }

  .steps-story__next li {
    display: flex;
    align-items: baseline;
    gap: 1.6rem;
    font-size: 2rem;
    line-height: 1.3;
    color: #555b64;
  }

  .steps-story__next li + li {
    margin-top: 1.2rem;
  }

  .steps-story__next span {
    font-size: 1.3rem;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: #3a3f47;
  }

  /* The rail: a hairline with a tick per step, filled in peach as the run goes. A step
     takes over when the fill reaches its tick; the stretch after the last tick is the
     last step's stay, so the line fades out there instead of ending in a dot. */
  .steps-story__rail {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.4rem;
    width: 0.1rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.14) 70%, transparent);
  }

  .steps-story__rail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #e5b080 70%, rgba(229, 176, 128, 0));
    transform: scaleY(var(--p, 0));
    transform-origin: top;
  }

  .steps-story__tick {
    position: absolute;
    top: calc(var(--i) / var(--steps) * 100%);
    left: -0.4rem;
    z-index: 1;
    width: 0.9rem;
    height: 0.9rem;
    border: 0.1rem solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: #0b0d0f;
    transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
  }

  .steps-story__tick.is-lit {
    border-color: #e5b080;
    background: #e5b080;
    box-shadow: 0 0 0 0.4rem rgba(229, 176, 128, 0.16);
  }

  /* Changing steps. The leaving copy lifts away quickly; the new one rises in line by
     line. The new scene card fades in over the old one, which only goes once covered,
     so the card's frame never dims; inside it the drawing rises a little. */
  .steps-story__copy > * {
    transition: opacity 0.35s ease, transform 0.45s var(--ease);
  }

  .steps-story__step.is-after .steps-story__copy > * {
    opacity: 0;
    transform: translateY(3.2rem);
  }

  .steps-story__step.is-before .steps-story__copy > * {
    opacity: 0;
    transform: translateY(-3.2rem);
  }

  .steps-story__step.is-current .steps-story__copy > * {
    transition: opacity 0.6s ease, transform 0.8s var(--ease);
    transition-delay: 0.12s;
  }

  .steps-story__step.is-current .steps-story__title { transition-delay: 0.17s; }
  .steps-story__step.is-current .steps-story__hint { transition-delay: 0.22s; }
  .steps-story__step.is-current .steps-story__text { transition-delay: 0.27s; }
  .steps-story__step.is-current .steps-story__next { transition-delay: 0.34s; }

  .steps-story__art {
    transition: opacity 0.6s ease 0.6s;
  }

  .steps-story__step:not(.is-current) .steps-story__art {
    opacity: 0;
  }

  .steps-story__step.is-current .steps-story__art {
    transition: opacity 0.55s ease;
  }

  .steps-story__art svg {
    transition: transform 0.9s var(--ease);
  }

  .steps-story__step.is-after .steps-story__art svg {
    transform: translateY(2.4rem);
  }

  .steps-story__step.is-before .steps-story__art svg {
    transform: translateY(-2.4rem);
  }
}