/* Walker: a journey composed by vertical scrolling. */
:root { --scroll-ease: cubic-bezier(.16,1,.3,1); }
.scroll-ready .reveal { opacity:1;transform:none;transition:none; }
.scroll-ready .hero-scroll { height:310svh;position:relative; }
.scroll-ready .hero { position:sticky;top:0;height:100svh;min-height:100svh; }
.scroll-ready .hero-copy { will-change:transform,opacity;transform-origin:50% 15%; }
.scroll-ready .hero h1 { max-width:15ch; }
.scroll-ready .hero .scene { transform:scale(var(--scene-scale,1));transform-origin:50% 80%; }
.scroll-ready .hero .chips { background:rgba(18,18,22,.4); }
.scroll-ready .hero .chip { cursor:default; }
.scroll-ready .hero .chip:hover { background:transparent; }
.scroll-ready .hero .chip[aria-current="location"] { background:#fff; }
.scroll-ready .hero .route-bar { transform:translateY(var(--route-y,0px));opacity:var(--route-opacity,1); }
.scroll-ready .hero-scroll .hero-copy { padding-top:calc(var(--nav-h) + clamp(96px,11svh,128px)); }
.nav-links a { position:relative; }
.nav-links a::after { content:'';position:absolute;bottom:-8px;inset-inline:0;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .35s; }
.nav-links a.active::after { transform:scaleX(1); }

/* The postcards become a camera pass through a row of painted worlds. */
.scroll-ready .cities { padding-top:0; }
.cities-gallery { position:relative;height:340svh; }
.cities-gallery-view { position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,5svh,64px);padding:calc(var(--nav-h) + 26px) 0 40px; }
.cities-gallery-view > .section-head { max-width:880px; }
.cities-gallery-view .section-lede { max-width:68ch;font-size:18px; }
.postcard-track-clip { width:100vw;margin-left:calc((100% - 100vw) / 2);overflow:hidden;padding:30px 0 36px; }
.scroll-ready .postcards { display:flex;gap:32px;margin:0;padding:0 calc((100vw - min(1160px,100vw - 48px)) / 2);overflow:visible;scroll-snap-type:none;will-change:transform; }
.scroll-ready .postcard { flex:0 0 clamp(360px,51vw,740px);aspect-ratio:4/3;overflow:hidden;border-radius:22px;transform-origin:50% 85%;will-change:transform;box-shadow:0 26px 50px -30px rgba(28,28,30,.45); }
.scroll-ready .postcard img { transform:translateX(var(--image-pan,0px)) scale(1.09);transition:none; }
.scroll-ready .postcard figcaption { transform:translateY(var(--caption-y,0px));opacity:var(--caption-opacity,1); }
.scroll-ready .postcard:hover img { transform:translateX(var(--image-pan,0px)) scale(1.09); }
.gallery-route { position:absolute;bottom:26px;left:0;right:0;display:flex;gap:8px;align-items:center;justify-content:center;pointer-events:none; }
.gallery-route i { width:5px;height:5px;border-radius:10px;background:#c8c9ca;transition:width .3s,background .3s; }
.gallery-route i.on { width:28px;background:var(--blue); }
.scroll-ready .route-list { margin-top:0;padding-top:40px; }

/* The phone turns toward the reader as each use step takes focus. */
.scroll-ready .how { height:220svh;padding:64px 0; }
.scroll-ready .how-inner { position:sticky;top:80px;min-height:calc(100svh - 110px);grid-template-columns:42% 1fr;gap:56px; }
.scroll-ready .how-phone { perspective:1200px; }
.scroll-ready .device { width:min(300px,33svh);transform-origin:center;will-change:transform; }
.scroll-ready .steps { position:relative;gap:28px; }
.scroll-ready .steps::before { content:'';position:absolute;inset-inline-start:22px;top:23px;bottom:calc(100% / 6);width:2px;background:linear-gradient(to bottom,var(--blue) calc(var(--step-line,0) * 100%),#e8edf2 0);z-index:0; }
.scroll-ready .step { position:relative;transition:none; }
.scroll-ready .step-num { position:relative;background:var(--paper-2);box-shadow:0 0 0 1px rgba(10,122,255,.14);color:var(--blue); }
.scroll-ready .step-num.is-current { background:var(--blue);color:#fff;box-shadow:0 0 0 6px rgba(10,122,255,.09); }
.scroll-ready .step > div:last-child { opacity:var(--step-opacity,1);transform:translateX(var(--step-x,0px)); }
.scroll-ready .how-copy > .reveal { transform:none;opacity:1; }
.scroll-ready .how-copy .section-lede { font-size:18px; }
.scroll-ready .step p { font-size:17px; }

/* Different depths, with motion kept inside the artwork. */
.scroll-ready .feature { transform:translateY(var(--feature-y,0px)) rotateX(var(--feature-tilt,0deg));opacity:var(--feature-opacity,1);transform-origin:50% 100%;will-change:transform; }
.scroll-ready .features-grid { perspective:1800px; }
.scroll-ready .feature-art > img, .scroll-ready .slide > img { scale:1.07;translate:0 var(--art-y,0px); }
.scroll-ready .goal-ring .fill { stroke-dashoffset:calc(314.159 * (1 - var(--goal-fill,.775)))!important;transition:none; }
.scroll-ready .rc-bar i { width:var(--progress-width,24.8%)!important;transition:none; }
.scroll-ready .pace { position:relative;isolation:isolate;overflow:hidden;padding:160px 0; }
.pace-route { position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none; }
.pace-route .route-ghost { fill:none;stroke:#0a7aff;stroke-width:1;opacity:.09; }
.pace-route .route-drawn { fill:none;stroke:#0a7aff;stroke-width:1.5;opacity:.27;stroke-dasharray:1;stroke-dashoffset:1; }
.scroll-word { display:inline-block;opacity:var(--word-opacity,1);transform:translateY(var(--word-y,0px));filter:blur(var(--word-blur,0px)); }
.scroll-ready .stat { transform:translateY(var(--stat-y,0px));opacity:var(--stat-opacity,1); }

/* New York opens like an iris, then becomes the whole last scene. */
.finale-scroll { height:120svh;position:relative;background:#0e1222; }
.scroll-ready .finale { position:sticky;top:0;height:100svh;min-height:100svh; }
.scroll-ready .finale-art { clip-path:circle(var(--iris,100%) at 50% 62%);transform:scale(var(--final-scale,1));will-change:transform,clip-path; }
.scroll-ready .finale-copy { transform:translateY(var(--final-copy-y,0px));opacity:var(--final-copy-opacity,1);will-change:transform,opacity; }
.scroll-ready .finale-shade { opacity:var(--final-shade-opacity,1); }

@media (max-width:960px) {
  .scroll-ready .how { height:auto;padding:96px 0; }
  .scroll-ready .how-inner { position:static;min-height:0;grid-template-columns:1fr;gap:56px; }
  .scroll-ready .device { width:270px; }
  .scroll-ready .how-copy { max-width:620px; }
  .scroll-ready .postcard { flex-basis:68vw; }
}
@media (max-width:600px) {
  .scroll-ready .hero-scroll { height:260svh; }
  .scroll-ready .hero { --h:clamp(250px,42svh,380px); }
  .scroll-ready .hero-scroll .hero-copy { padding-top:calc(var(--nav-h) + 100px); }
  .scroll-ready .hero h1 { font-size:clamp(36px,9vw,48px);max-width:13ch; }
  .scroll-ready .hero .lede { font-size:17px;max-width:32ch; }
  .scroll-ready .hero .eyebrow { font-size:13px; }
  .scroll-ready .hero .route-bar { height:var(--f);padding:0 12px; }
  .scroll-ready .hero .chips { gap:0; }
  .scroll-ready .hero .chip { font-size:12px;padding:0 10px; }
  .cities-gallery { height:300svh; }
  .cities-gallery-view { gap:12px;padding-top:calc(var(--nav-h) + 28px);padding-bottom:64px;justify-content:center; }
  .cities-gallery-view h2 { font-size:34px; }
  .cities-gallery-view .section-lede { font-size:16px;line-height:1.5; }
  .postcard-track-clip { padding:26px 0 24px; }
  .scroll-ready .postcards { padding:0 24px;gap:18px;margin:0; }
  .scroll-ready .postcard { flex-basis:82vw;border-radius:18px; }
  .scroll-ready .postcard small { font-size:12px; }
  .scroll-ready .postcard b { font-size:16px; }
  .scroll-ready .device { width:240px; }
  .scroll-ready .how { padding:80px 0; }
  .scroll-ready .step > div:last-child { opacity:1; }
  .scroll-ready .step h3 { font-size:21px; }
  .scroll-ready .pace { padding:120px 0; }
  .scroll-ready .pace .stats { gap:30px; }
  .finale-scroll { height:115svh; }
  .scroll-ready .finale-copy { padding-top:100px; }
  .scroll-ready .finale p { font-size:18px; }
}
@media (max-height:720px) and (min-width:961px) {
  .scroll-ready .hero-copy { padding-top:90px; }
  .scroll-ready .hero h1 { font-size:clamp(36px,4.8vw,60px); }
  .scroll-ready .hero .lede { font-size:17px;margin-top:12px; }
  .scroll-ready .hero-actions { margin-top:16px; }
  .cities-gallery-view { gap:12px;padding-top:90px;padding-bottom:32px; }
  .cities-gallery-view .section-lede { font-size:16px;margin-top:10px; }
  .scroll-ready .postcard { flex-basis:40vw;max-height:42svh; }
  .scroll-ready .how-inner { top:76px;gap:36px; }
  .scroll-ready .how-copy h2 { font-size:36px; }
  .scroll-ready .steps { margin-top:24px;gap:16px; }
  .scroll-ready .step h3 { font-size:19px;margin-top:4px; }
  .scroll-ready .step p,.scroll-ready .how-copy .section-lede { font-size:15px; }
}
/* No pins, long dead scroll ranges or hidden copy in the reduced-motion path. */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
  .reveal { opacity:1!important;transform:none!important; }
}

.scene-chapter { position:absolute;top:28%;inset-inline:24px;text-align:center;z-index:2;pointer-events:none;opacity:0;color:inherit; }
.scene-chapter > span { display:block;font-size:clamp(52px,8vw,118px);line-height:1.02;font-weight:500;letter-spacing:-.045em;text-wrap:balance; }
.scene-chapter small { display:block;margin-top:20px;font-size:15px;letter-spacing:.12em;text-transform:uppercase;opacity:.75; }
.scroll-ready .postcards { direction:ltr; }
[dir="rtl"] .postcard figcaption { direction:rtl; }
@media(max-width:600px) { .scene-chapter { top:27%; } .scene-chapter > span { font-size:clamp(44px,12vw,68px); } .scene-chapter small { font-size:13px; } }
/* City labels are a passive route legend, rather than selectable pills. */
.scroll-ready .hero .chips { background:rgba(18,18,22,.3);border-radius:10px;box-shadow:none;gap:2px;padding:3px 9px; }
.scroll-ready .hero .chip { border-radius:0;background:transparent;color:#fff;opacity:.55; }
.scroll-ready .hero .chip[aria-current="location"] { background:transparent;color:#fff;opacity:1; }

/* Start beneath the App Store badge, then settle below the city condition. */
.hero-pedometer { position:absolute;top:0;left:50%;transform:translate3d(-50%,var(--pedometer-y,0px),0);width:max-content;z-index:25;display:flex;align-items:center;gap:12px;color:var(--ink);pointer-events:none;will-change:transform; }
.hero-pedometer > span { text-align:center; }
.hero-pedometer svg { width:25px;height:30px;color:var(--blue);flex:none; }
.hero-pedometer b { display:block;font-size:26px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums; }
.hero-pedometer small { display:block;font-size:12px;color:var(--ink-2);line-height:1.4; }
.hero[data-tone="dark"] .hero-pedometer { color:#fff; }
.hero[data-tone="dark"] .hero-pedometer small { color:rgba(255,255,255,.72); }
.hero[data-tone="dark"] .hero-pedometer svg { color:#70b7ff; }
@media(max-width:600px) { .hero-pedometer { gap:9px; } .hero-pedometer b { font-size:23px; } .hero-pedometer svg { width:22px;height:26px; } }