/* =====================================================================
   THE JOURNEY, V5: THE ROUTE, WITH PEOPLE (index.html #journey; built as Design/journey-premium/v5-route-people.html)

   The idea. Naveen's words, three steps on one straight line down the
   middle of the page: Discovery, Career Hypothesis, My Space. Kulpi walks
   the line and stops at each step's ring; the line inks behind him. Each
   step is its words beside the line and one picture on the outer side: a
   student rising out of a sky shape. At Career Hypothesis the picture is
   the girl from behind, facing a softly lit wall of the 12 career worlds.
   No product screens and no product cards; the only small things are text
   chapter stepper, the wall's world tags, one quote card and the
   four tabs, all carrying his content.

   The grid. Every row is  side 1fr | spine | side 1fr  inside .wrap, so the
   line is always at the exact centre of the .wrap and never moves.
     - the words sit against the spine (the same distance from it on every
       step), the picture fills its side out to the edge of the .wrap
     - pictures alternate: left, right, left
     - in each step the picture's shape starts on the step number's top line
       and ends on the words' last line; the person rises above the shape by
       the same amount (--over) every time and stands flush on its bottom
     - the ring is level with the step number
     - one vertical rhythm (--gap) between the start, the steps and the end

   The motion. Scroll-driven, reversible, restrained:
     - words rise in line by line, 24px and a 6px blur to sharp, staggered
     - the chapter line draws and its rings fill; the world tags light up
       one by one
     - each person settles from .96 to 1 and drifts a few px slower
     - easing cubic-bezier(.2, .7, .2, 1); nothing bounces
   No pin. Reduced motion, or no scroll timelines: everything stands
   finished. The section clips with overflow:clip, never hidden.
   ===================================================================== */

.route{--spine:clamp(120px, 10vw, 140px); --gap:clamp(96px, 9vw, 140px); --over:clamp(40px, 4vw, 56px);
  --blue-ink:#1F4E80; --hair:rgba(16,34,64,.12); --navy:#102240; --r-shape:28px; --out:cubic-bezier(.2, .7, .2, 1);
  --shape:linear-gradient(180deg, #E2F0F9 0%, #BFDDEF 100%);
  position:relative; overflow:clip; padding:calc(var(--gap) + 40px) 0 var(--gap);
  background:linear-gradient(rgba(157,202,227,.17), rgba(157,202,227,.17)), var(--surface); color:var(--text)}
.route::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(16,34,64,.07) 1px, transparent 1.4px); background-size:30px 30px; background-position:15px 15px}
/* My Space on the map: a quiet district of grid blocks behind step 03's row only */
.route .district{position:absolute; left:max(8px, calc(var(--gut) - 40px)); right:max(8px, calc(var(--gut) - 40px));
  border-radius:40px; border:1.5px dashed rgba(16,34,64,.14); pointer-events:none; overflow:hidden;
  background:linear-gradient(90deg, rgba(220,236,246,.75) 0%, rgba(220,236,246,.75) 46%, rgba(234,244,250,.97) 60%, rgba(234,244,250,.97) 100%)}
/* its grid of blocks shows on the picture's side and fades out before the words */
.route .district::before{content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(255,255,255,.7) 2px, transparent 2px) 0 0 / 120px 120px,
             linear-gradient(90deg, rgba(255,255,255,.7) 2px, transparent 2px) 0 0 / 120px 120px;
  -webkit-mask:linear-gradient(90deg, #000 0%, #000 40%, transparent 56%); mask:linear-gradient(90deg, #000 0%, #000 40%, transparent 56%)}
.route .map-deco{position:absolute; left:0; top:0; pointer-events:none; overflow:visible}
.route .map-roads{position:absolute; left:0; top:0; pointer-events:none; overflow:visible}
.route .map-body{position:relative}
.route .map-over{position:absolute; inset:0; z-index:3; pointer-events:none}
.route .r-edge path{stroke:rgba(16,34,64,.09)}
.route .r-pale path{stroke:var(--surface)}
.route .r-ink path{stroke:var(--primary)}

.route .mark{position:absolute; z-index:1; left:0; top:0; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 2px var(--primary-dark); transition:box-shadow .45s var(--out)}
.route .mark::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--primary); transform:scale(0); transition:transform .5s var(--out)}
.route .mark.on{box-shadow:inset 0 0 0 2px var(--primary)}
.route .mark.on::after{transform:scale(1)}
.route .mark-end{width:26px; height:26px; margin:-13px 0 0 -13px}
.route .mark-end::after{inset:6px}
.route .rider{position:absolute; z-index:2; left:0; top:0; will-change:transform}
.route .rider .kulpi-slot{--ks:clamp(92px, 7.4vw, 112px)}

/* ---------------------------------------------------------------- the grid: side | spine | side */
.route .row{display:grid; grid-template-columns:minmax(0, 1fr) var(--spine) minmax(0, 1fr); align-items:stretch}
.route .spine{position:relative}
.route .side{min-width:0; margin:0}
/* the words sit against the spine, the same width on every step */
.route .block{font-size:clamp(1rem, .96rem + .14vw, 1.08rem); width:min(100%, 46ch)}
.route .side-l .block{margin-left:auto}
.route .side-r .block{margin-right:auto}
.route .stop{margin-top:var(--gap)}

/* ---------------------------------------------------------------- words */
.route .kicker{margin:0 0 18px; color:var(--blue-ink)}
.route .num{color:var(--blue-ink); font-size:.72rem; font-weight:500; letter-spacing:.24em; line-height:1}
.route .t{margin-top:14px; font-size:clamp(2rem, 1.2rem + 1.8vw, 3rem); font-weight:600; letter-spacing:-.04em; line-height:1.02}
.route .t span{display:block; margin-top:8px; color:var(--text-muted); font-size:clamp(1.1rem, .95rem + .45vw, 1.4rem); font-weight:400; letter-spacing:-.02em; line-height:1.2}
.route .l{margin-top:18px; color:var(--text-body); font-size:1em; line-height:1.6; text-wrap:pretty}

/* the five chapters: a small stepper that echoes the route; five equal columns across the words */
.route .stepper{--ry:31px; list-style:none; position:relative; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); margin:26px 0 0; padding:0}
.route .stepper::before, .route .stepper::after{content:""; position:absolute; left:0; right:0; top:var(--ry); height:1.5px; margin-top:-.75px; border-radius:2px}
.route .stepper::before{background:rgba(16,34,64,.16)}
.route .stepper::after{background:var(--primary); transform-origin:0 50%}
.route .stepper li{position:relative; z-index:1; display:grid; grid-template-rows:12px 14px auto; row-gap:12px; justify-items:center; text-align:center}
.route .stepper .sn{color:var(--blue-ink); font-size:.62rem; font-weight:500; letter-spacing:.2em; line-height:12px; padding-left:.2em}
.route .stepper i{position:relative; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px rgba(16,34,64,.55)}
.route .stepper i::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--primary); transform:scale(0)}
.route .stepper li.on i{background:var(--primary); box-shadow:none}
.route .stepper li.on i::after{background:#fff; inset:5px; transform:none}
.route .stepper .sl{max-width:11ch; font-size:.8rem; font-weight:500; line-height:1.3; color:var(--navy); text-wrap:balance}

/* the example career: a compact quote card, as wide as the paragraph */
.route .quote{margin:20px 0 0; padding:16px 18px; border-radius:16px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--hair), 0 18px 36px -26px rgba(16,34,64,.3)}
.route .q-k{color:var(--blue-ink); font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase}
.route .q-t{margin-top:8px; font-size:1.15rem; font-weight:600; letter-spacing:-.025em; line-height:1.2; color:var(--navy)}
.route .q-l{margin-top:6px; color:var(--text-body); font-size:.84rem; line-height:1.5}

/* the four tabs: four tiles, an icon chip, the tab's name and his phrase */
.route .tabs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:1fr; gap:12px; margin:18px 0 0}
.route .tabs > div{padding:18px 20px 20px; border-radius:18px; background:rgba(255,255,255,.85); box-shadow:inset 0 0 0 1px var(--hair)}
.route .tabs dt{display:flex; align-items:center; gap:12px; font-size:.98rem; font-weight:600; letter-spacing:-.015em; color:var(--navy)}
.route .tabs .ic{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#DDEEF8}
.route .tabs svg{width:19px; height:19px; fill:none; stroke:var(--primary); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.route .tabs dd{margin:10px 0 0; color:var(--text-muted); font-size:.86rem; line-height:1.45; text-wrap:pretty}

/* ---------------------------------------------------------------- people on shapes */
/* the shape is the picture's whole cell: number's top line to the words' last line */
.route .vis{position:relative}
.route .shape{position:absolute; inset:0; border-radius:var(--r-shape); background:var(--shape); box-shadow:inset 0 0 0 1px rgba(16,34,64,.05)}
/* the cut-out is cut by the shape's bottom and sides (round corners), never at the top */
.route .clip{position:absolute; inset:0; clip-path:inset(-300% 0 0 0 round 0 0 var(--r-shape) var(--r-shape)); pointer-events:none}
/* every person rises the same --over above the shape and stands flush on its bottom */
.route .person{position:absolute; display:block; max-width:none; bottom:0; height:calc(100% + var(--over)); width:auto; left:50%; translate:-50% 0; transform-origin:50% 100%}
#st-myspace .person{left:0; translate:0 0;
  -webkit-mask:linear-gradient(90deg, #000 84%, transparent 100%); mask:linear-gradient(90deg, #000 84%, transparent 100%)}

/* 02: she stands below a softly lit wall of the 12 worlds, facing it */
.route .wall-vis{--wt:clamp(12px, 1.2vw, 24px); --tag:52px; --wg:clamp(8px, .7vw, 10px); --wall-h:calc(var(--tag) * 4 + var(--wg) * 3)}
.route .wall-vis .shape{background:radial-gradient(75% 50% at 50% 26%, rgba(255,255,255,.75), rgba(255,255,255,0) 72%), var(--shape)}
.route .wall{list-style:none; position:absolute; left:clamp(12px, 1.2vw, 24px); right:clamp(12px, 1.2vw, 24px); top:var(--wt); height:var(--wall-h); margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:var(--tag); gap:var(--wg)}
.route .wall li{display:flex; align-items:center; gap:clamp(6px, .6vw, 10px); min-width:0; padding:0 clamp(6px, .6vw, 10px) 0 clamp(7px, .6vw, 9px); border-radius:14px;
  background:rgba(255,255,255,.8); box-shadow:inset 0 0 0 1px var(--hair); color:var(--navy)}
.route .wa{flex:none; width:clamp(28px, 2.4vw, 36px); height:clamp(28px, 2.4vw, 36px); border-radius:9px; overflow:hidden; background:linear-gradient(160deg, #F4F9FC, #D9EAF5)}
.route .wa svg{display:block; width:100%; height:100%}
.route .wn{min-width:0; white-space:nowrap; font-size:clamp(.66rem, .47rem + .24vw, .8rem); font-weight:500; letter-spacing:-.018em; line-height:1}
/* the girl stands below the last row, her head 18px under it, her feet on the shape's bottom */
.route .wall-vis .person{bottom:0; height:calc(100% - var(--wt) - var(--wall-h) - 18px)}

/* ---------------------------------------------------------------- the start */
.route .open .side-l .block{text-align:right}
.route .open-t{font-size:clamp(3rem, 1.6rem + 3.8vw, 5.4rem); font-weight:600; line-height:.98; letter-spacing:-.045em; text-wrap:balance}
.route .open .side-r .block{align-self:end}
.route .open .side-r{display:flex; align-items:flex-end}
.route .lead{font-size:clamp(1.2rem, 1rem + .5vw, 1.45rem); font-weight:500; line-height:1.3; letter-spacing:-.02em; color:var(--navy); text-wrap:balance}
.route .open .l{margin-top:14px}
.route .here{position:absolute; top:0; left:50%; translate:-50% calc(-100% - 124px); padding:6px 13px; border-radius:999px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--line); font-size:.8rem; font-weight:500; white-space:nowrap}

/* ---------------------------------------------------------------- the finish */
.route .fin{margin-top:var(--gap); text-align:center}
.route .fin-mark{height:1px}
.route .fin-copy{display:flex; flex-direction:column; align-items:center; padding-top:32px}
.route .fin-l{max-width:22ch; font-size:clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem); line-height:1.1; letter-spacing:-.035em; font-weight:600; text-wrap:balance}
.route .fin .btn{margin-top:24px; padding:15px 28px; font-size:1rem}

/* ---------------------------------------------------------------- below 900px: one column, the line down the left edge */
@media (max-width:899px){
  .route{--padL:58px; --gap:88px; padding:88px 0}
  .route .wrap{width:auto; margin-inline:0; padding-left:var(--padL); padding-right:var(--gut)}
  .route .row{display:flex; flex-direction:column; align-items:stretch}
  .route .spine{display:none}
  .route .block{width:100%; margin:0 !important}
  .route .stop .side:not(.vis){order:-1}
  .route .vis{margin-top:calc(28px + var(--over)); aspect-ratio:16 / 11}
  .route .open .side-l .block{text-align:left}
  .route .open .side-r{margin-top:18px}
  .route .open-t{font-size:clamp(2.6rem, 1.6rem + 5vw, 3.6rem)}
  .route .t{font-size:clamp(1.9rem, 1.3rem + 3vw, 2.5rem)}
  .route .tabs{grid-template-columns:minmax(0, 1fr)}
  .route .vis.wall-vis{--wt:14px; --tag:34px; --wg:6px; aspect-ratio:auto; height:340px}
  .route .wall{left:10px; right:10px}
  .route .wall li{gap:5px; padding:0 5px; border-radius:10px}
  .route .wa{width:22px; height:22px; border-radius:6px}
  .route .wn{font-size:.58rem}
  .route .fin{text-align:left}
  .route .fin-copy{align-items:flex-start}
  .route .mark{width:14px; height:14px; margin:-7px 0 0 -7px}
  .route .mark::after{inset:3px}
  .route .mark-end{width:22px; height:22px; margin:-11px 0 0 -11px}
  .route .mark-end::after{inset:5px}
  .route .rider .kulpi-slot{--ks:64px}
  .route::before{background-size:24px 24px}
  .route .district{left:8px; right:8px; border-radius:28px; background-size:96px 96px, 96px 96px, auto}
}

/* ---------------------------------------------------------------- motion: restrained, scroll-driven */
.route.is-live .open-t .w{opacity:.14; transition:opacity .6s var(--out)}
.route.is-live .open-t .w.on{opacity:1}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .route :is(.kicker, .lead, .open .l, .copy > *, .fin-copy > *),
    .route .tabs > div{animation:v-rise var(--out) both; animation-timeline:view(); animation-range:entry 0% cover 20%}
    .route :is(.copy, .fin-copy) > :nth-child(2), .route .open .l, .route .tabs > div:nth-child(2){animation-range:entry 4% cover 24%}
    .route .copy > :nth-child(3), .route .tabs > div:nth-child(3){animation-range:entry 8% cover 28%}
    .route .copy > :nth-child(4), .route .tabs > div:nth-child(4){animation-range:entry 12% cover 32%}
    /* the chapters: the line draws left to right, the rings fill one by one */
    .route .stepper::after{animation:v-draw linear both; animation-timeline:view(); animation-range:entry 60% cover 40%}
    .route .stepper li:not(.on) i::after{animation:v-fill var(--out) both; animation-timeline:view(); animation-range:entry 100% cover 22%}
    .route .stepper li:not(.on) i{animation:v-ring var(--out) both; animation-timeline:view(); animation-range:entry 100% cover 22%}
    .route .stepper li:nth-child(3) i, .route .stepper li:nth-child(3) i::after{animation-range:entry 100% cover 28%}
    .route .stepper li:nth-child(4) i, .route .stepper li:nth-child(4) i::after{animation-range:entry 100% cover 34%}
    .route .stepper li:nth-child(5) i, .route .stepper li:nth-child(5) i::after{animation-range:entry 100% cover 40%}
    .route .stepper li{animation:v-rise var(--out) both; animation-timeline:view(); animation-range:entry 20% cover 20%}
    /* the wall lights up, one world after another */
    .route .wall > li{animation:v-lit var(--out) both; animation-timeline:view(); animation-range:entry 0% cover 30%}
    .route .wall > li:nth-child(2){animation-range:entry 0% cover 32%}
    .route .wall > li:nth-child(3){animation-range:entry 0% cover 34%}
    .route .wall > li:nth-child(4){animation-range:entry 0% cover 36%}
    .route .wall > li:nth-child(5){animation-range:entry 0% cover 34%}
    .route .wall > li:nth-child(6){animation-range:entry 0% cover 36%}
    .route .wall > li:nth-child(7){animation-range:entry 0% cover 38%}
    .route .wall > li:nth-child(8){animation-range:entry 0% cover 40%}
    .route .wall > li:nth-child(9){animation-range:entry 0% cover 38%}
    .route .wall > li:nth-child(10){animation-range:entry 0% cover 40%}
    .route .wall > li:nth-child(11){animation-range:entry 0% cover 42%}
    .route .wall > li:nth-child(12){animation-range:entry 0% cover 44%}
    /* each person settles and drifts a little slower than the page; the shape fades up under them */
    .route .vis{animation:v-drift linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
    .route .person{animation:v-settle var(--out) both; animation-timeline:view(); animation-range:entry 0% cover 40%}
    .route .shape{animation:v-shape var(--out) both; animation-timeline:view(); animation-range:entry 0% cover 30%}
    .route .district{animation:v-shape var(--out) both; animation-timeline:view(); animation-range:entry 0% entry 40%}
  }
}
@keyframes v-rise{from{opacity:0; translate:0 24px; filter:blur(6px)}}
@keyframes v-pop{from{opacity:0; scale:.94; filter:blur(4px)}}
@keyframes v-draw{from{transform:scaleX(0)}}
@keyframes v-fill{from{transform:scale(0)} to{transform:scale(1)}}
@keyframes v-ring{to{box-shadow:inset 0 0 0 1.5px var(--primary)}}
@keyframes v-lit{from{opacity:.25; scale:.96; background-color:rgba(255,255,255,.25)}}
@keyframes v-settle{from{scale:.96; opacity:0}}
@keyframes v-drift{from{transform:translateY(10px)} to{transform:translateY(-10px)}}
@keyframes v-shape{from{opacity:0; scale:.985}}