/*
 * 08 How we work — the scroll journey from Figma 894:6470 (1440 × 2278 artboard).
 * Everything sits in design px × --u, which shrinks with the viewport below
 * 1440 and caps at 1:1 above it. js/journey.js drives the reveals and parallax.
 */

/* ---------- Section ---------- */

.journey {
  position: relative;
  overflow: clip; /* the pinned dot field must not paint over the next section */
}

/* The dot field only exists under the cursor, so it stays one screen tall */
.journey__dots {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  pointer-events: none;
}

.journey__stage {
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(2278 * var(--u));
  margin: 0 auto;
}

.journey__head {
  position: absolute;
  z-index: 3;
  top: calc(88 * var(--u));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
  text-align: center;
}
.journey__title {
  font: 400 40px/48px var(--f-alpino);
  color: var(--c-ink);
  text-box: trim-both cap alphabetic;
}
.journey__title .hl { color: var(--c-sage); }

/* ---------- Line layer: blade + route + nodes move as one ---------- */

.journey__track {
  position: absolute;
  z-index: 1;
  left: calc(470 * var(--u));
  top: calc(225 * var(--u));
  width: calc(500 * var(--u));
  height: calc(2020 * var(--u));
  pointer-events: none;
  will-change: transform;
}
.journey__lines { width: 100%; height: 100%; }

.journey__node {
  position: absolute;
  left: calc((var(--x) - 470) * var(--u));
  top: calc((var(--y) - 225) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border: 1px solid var(--c-light);
  border-radius: 999px;
  overflow: clip;
  background: var(--c-dim);
  font: 400 10px/1 var(--f-manrope);
  color: var(--c-light);
  translate: -50% -50%;
}
.journey__node::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-ink);
  opacity: var(--on, 0);
}
.journey__node { isolation: isolate; }

/* ---------- Steps ---------- */

.journey__steps { position: absolute; z-index: 2; inset: 0; pointer-events: none; }

.step__tile {
  position: absolute;
  left: calc(var(--tx) * var(--u));
  top: calc(var(--ty) * var(--u));
  width: calc(78 * var(--u));
  height: calc(78 * var(--u));
  pointer-events: auto;
}
.step__icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: scale .6s var(--ease);
}
.step__tile:hover .step__icon { scale: 1.06; }
.step__icon img { width: 100%; height: 100%; }
.step__icon .step__on {
  position: absolute;
  inset: 0;
  opacity: var(--on, 0);
}

.step__copy {
  position: absolute;
  top: calc(var(--cy) * var(--u));
  width: calc(var(--w) * 1px); /* the type keeps its size, so its measure does too */
}
.step--r .step__copy {
  left: calc(var(--cx) * var(--u));
  max-width: calc(100vw - var(--cx) * var(--u) - 16px);
}
.step--l .step__copy {
  right: calc((1440 - var(--cx)) * var(--u));
  max-width: calc(var(--cx) * var(--u) - 16px);
  text-align: right;
}

.step__title {
  font: 400 20px/1.2 var(--f-alpino);
  letter-spacing: -.2px;
  color: var(--c-ink);
  text-box: trim-both cap alphabetic;
}
.step__text {
  margin-top: calc(var(--gap) * 1px);
  font: 400 16px/1.23 var(--f-alpino);
  color: var(--c-dim);
  text-box: trim-both cap alphabetic;
}
.step__text--sm { font-size: 14px; line-height: 20px; }
.step__text--wide { line-height: 1.5; }

/* Words come in one after another as --c runs 0 → 1 */
.step__copy .w {
  --k: clamp(0, calc((var(--c, 1) * var(--n, 1) - var(--i, 0)) / 3), 1);
  display: inline-block;
  opacity: var(--k);
  translate: 0 calc((1 - var(--k)) * 10px);
}

@media (max-width: 1040px) {
  .step__text { font-size: 15px; }
  .step__text--sm { font-size: 14px; }
}

/* ---------- Phones: the blade fills the width, each step sits over it ---------- */

@media (max-width: 760px) {
  .journey { --u: calc((100vw - 32px) / 334); }

  .journey__stage { margin: 0 0 0 calc(16px - 553 * var(--u)); }
  .journey__head {
    left: calc(553 * var(--u) - 16px);
    right: auto;
    width: 100vw;
    padding: 0 24px;
    gap: 24px;
    top: calc(40 * var(--u));
  }
  .journey__title { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.2; }

  .step__tile {
    left: calc(720 * var(--u) - 34px);
    top: calc((var(--y) - 46) * var(--u));
    width: 68px;
    height: 68px;
  }
  .step:nth-child(1) { --y: 520; }
  .step:nth-child(2) { --y: 930; }
  .step:nth-child(3) { --y: 1490; }
  .step:nth-child(4) { --y: 1830; }

  .step--r .step__copy,
  .step--l .step__copy {
    left: calc(720 * var(--u) - 118px);
    right: auto;
    top: calc((var(--y) - 46) * var(--u) + 84px);
    width: 236px;
    max-width: none;
    padding: 10px 4px;
    background: rgb(223 228 221 / min(1, calc(var(--c, 1) * 4))); /* --c-light, in as the words arrive */
    text-align: center;
  }
  .step__title { font-size: 18px; }
  .step__text { margin-top: 14px; font-size: 14px; line-height: 1.35; }
}