/*
  Think Differently Academy: the journey page's scroll-driven climb.

  Loaded after styles.css. Scrolling down the six steps moves a marker up a
  ladder: step 1 is the bottom rung, step 6 the top. journey.js only sets
  data-current="N" (on .climb-rail and on <html>); every visual here is
  chosen by CSS from that one attribute.

  Without JavaScript the rail rests at step 1 and the timeline reads top to
  bottom exactly as before. Below 961px the rail is hidden and nothing changes.
  Only transform and opacity are animated.
*/

/* ------------------------------------------------------------------
   Layout. One column by default; rail plus timeline from 961px.
   ------------------------------------------------------------------ */
.tl-layout{margin-top:48px}
.tl-layout>.timeline{margin-top:0}

.climb-rail{display:none}

/* ------------------------------------------------------------------
   The ladder, price readout and link (961px and up).
   ------------------------------------------------------------------ */
@media (min-width:961px){
  .tl-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:start}

  .climb-rail{
    --rung:88px;               /* height of one rung; the ladder is six of these */
    display:block;
    position:sticky;
    top:84px;                  /* clears the 52px sticky step bar */
  }

  /* The ladder: two rails and six rungs. DOM order is step 1 to 6; the list
     is reversed so step 1 sits at the bottom. */
  .climb-ladder{position:relative;height:calc(var(--rung) * 6)}

  .climb-side{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--line);pointer-events:none}
  .climb-side-r{left:54px}
  /* Blue fill rising from the bottom to the climber. */
  .climb-side::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleY(calc(.5 / 6));transform-origin:center bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}

  .climb-rungs{position:relative;display:flex;flex-direction:column-reverse;margin:0;padding:0;list-style:none}
  .climb-rung a{
    position:relative;display:flex;align-items:center;gap:16px;
    height:var(--rung);min-height:44px;
  }
  .climb-rung a:hover{text-decoration:none}
  .climb-rung a:focus-visible{outline-offset:-3px}

  /* The rung itself: a grey bar with a blue layer that scales in over it. */
  .rung-bar{position:relative;display:block;flex:none;width:56px;height:2px;background:var(--line);pointer-events:none}
  .rung-fill{position:absolute;inset:0;background:var(--blue);transform:scaleX(var(--lit,0));transform-origin:left center;transition:transform .4s ease-out;pointer-events:none}

  /* The label: a grey layer, with a navy copy stacked on top that fades in. */
  .rung-label{position:relative;display:block;flex:1 1 auto;min-width:0;font-family:var(--heading);font-size:11px;font-weight:800;line-height:1.45;letter-spacing:1.5px;text-transform:uppercase}
  .rung-label-base{display:block;color:#8a9195;transition:color .2s ease-out}
  .rung-label-lit{position:absolute;left:0;top:0;right:0;color:var(--navy);opacity:var(--lit,0);transition:opacity .4s ease-out;pointer-events:none}
  .rung-n{margin-right:4px}
  .climb-rung a:hover .rung-label-base{color:var(--navy)}

  /* The climber: a yellow dot with a navy ring, and a "You" pill above it.
     It sits at the top of the ladder and is moved down with translateY. */
  .climb-marker{position:absolute;left:17px;top:0;width:22px;height:22px;transform:translateY(calc(var(--rung) * 5.5 - 11px));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform;pointer-events:none}
  .climb-dot{display:block;width:22px;height:22px;border-radius:50%;background:var(--yellow);border:2px solid var(--navy);pointer-events:none}
  .climb-you{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:2px 9px;border-radius:99px;background:var(--yellow);color:var(--navy);font-family:var(--heading);font-size:10px;font-weight:800;line-height:14px;letter-spacing:.5px;white-space:nowrap;pointer-events:none}

  /* Price readout: six layers stacked in a fixed-height box, one visible. */
  .climb-price{position:relative;height:90px;margin-top:24px;border-top:1px solid var(--line);pointer-events:none}
  .rail-price{position:absolute;inset:0;padding-top:10px;opacity:0;transition:opacity .35s ease-out;pointer-events:none}
  .rp-name{display:block;font-family:var(--heading);font-size:11px;font-weight:800;line-height:1.4;letter-spacing:2px;text-transform:uppercase;color:var(--blue-dark)}
  .rp-price{display:block;font-family:var(--heading);font-size:34px;font-weight:800;line-height:1.1;color:var(--navy)}
  .rp-meta{display:block;font-size:13px;line-height:1.4;color:var(--body)}

  .climb-rail .text-link{margin-top:8px}

  /* ----------------------------------------------------------------
     Everything below is chosen by .climb-rail[data-current="N"].
     ---------------------------------------------------------------- */

  /* Lit rungs: the current one and every one below it. */
  .climb-rail[data-current="1"] .climb-rung:nth-child(-n+1),
  .climb-rail[data-current="2"] .climb-rung:nth-child(-n+2),
  .climb-rail[data-current="3"] .climb-rung:nth-child(-n+3),
  .climb-rail[data-current="4"] .climb-rung:nth-child(-n+4),
  .climb-rail[data-current="5"] .climb-rung:nth-child(-n+5),
  .climb-rail[data-current="6"] .climb-rung:nth-child(-n+6){--lit:1}

  /* The climber: one explicit position per step (88px rungs: 473, 385, 297,
     209, 121 and 33px). */
  .climb-rail[data-current="1"] .climb-marker{transform:translateY(calc(var(--rung) * 5.5 - 11px))}
  .climb-rail[data-current="2"] .climb-marker{transform:translateY(calc(var(--rung) * 4.5 - 11px))}
  .climb-rail[data-current="3"] .climb-marker{transform:translateY(calc(var(--rung) * 3.5 - 11px))}
  .climb-rail[data-current="4"] .climb-marker{transform:translateY(calc(var(--rung) * 2.5 - 11px))}
  .climb-rail[data-current="5"] .climb-marker{transform:translateY(calc(var(--rung) * 1.5 - 11px))}
  .climb-rail[data-current="6"] .climb-marker{transform:translateY(calc(var(--rung) * .5 - 11px))}

  /* The blue rails rise to the climber's rung. */
  .climb-rail[data-current="1"] .climb-side::after{transform:scaleY(calc(.5 / 6))}
  .climb-rail[data-current="2"] .climb-side::after{transform:scaleY(calc(1.5 / 6))}
  .climb-rail[data-current="3"] .climb-side::after{transform:scaleY(calc(2.5 / 6))}
  .climb-rail[data-current="4"] .climb-side::after{transform:scaleY(calc(3.5 / 6))}
  .climb-rail[data-current="5"] .climb-side::after{transform:scaleY(calc(4.5 / 6))}
  .climb-rail[data-current="6"] .climb-side::after{transform:scaleY(calc(5.5 / 6))}

  /* The price and name of the current step. */
  .climb-rail[data-current="1"] .rail-price[data-step="1"],
  .climb-rail[data-current="2"] .rail-price[data-step="2"],
  .climb-rail[data-current="3"] .rail-price[data-step="3"],
  .climb-rail[data-current="4"] .rail-price[data-step="4"],
  .climb-rail[data-current="5"] .rail-price[data-step="5"],
  .climb-rail[data-current="6"] .rail-price[data-step="6"]{opacity:1}

  /* ----------------------------------------------------------------
     Step rhythm. Each step is at least 62vh tall with its content
     centred, so the climb has pacing. The numeral column and the
     connector line give way to the rail, which now carries the numbers.
     ---------------------------------------------------------------- */
  .tl-step{min-height:62vh;align-content:center;grid-template-columns:minmax(0,1fr);gap:24px}
  .tl-num,.tl-step::before{display:none}
  .tl-card{max-width:360px}

  /* The step you are on has its card at full strength; the others rest back. */
  html[data-current] .tl-card{opacity:.55;transform:translateY(8px);transition:opacity .45s ease-out,transform .45s ease-out}
  html[data-current="1"] #step-1 .tl-card,
  html[data-current="2"] #step-2 .tl-card,
  html[data-current="3"] #step-3 .tl-card,
  html[data-current="4"] #step-4 .tl-card,
  html[data-current="5"] #step-5 .tl-card,
  html[data-current="6"] #step-6 .tl-card,
  html[data-current] .tl-card:hover,
  html[data-current] .tl-card:focus-within{opacity:1;transform:translateY(0)}
}

/* Wide enough for body and card side by side. */
@media (min-width:1180px){
  .tl-step{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
  .tl-card{max-width:none}
}

/* Shorter windows: smaller rungs so the whole rail stays on screen. */
@media (min-width:961px) and (max-height:800px){
  .climb-rail{--rung:68px}
}
@media (min-width:961px) and (max-height:680px){
  .climb-rail{--rung:56px}
}

/* ------------------------------------------------------------------
   Reduced motion: the marker jumps, layers swap, nothing tweens.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .climb-marker,
  .climb-side::after,
  .rung-fill,
  .rung-label-base,
  .rung-label-lit,
  .rail-price,
  html[data-current] .tl-card{transition:none}
  html[data-current] .tl-card{transform:none}
}