/* My Journey · concept A (Experience Bot, 2026-10-29)
   Scroll-tied scenes in the #about box: a coral balloon lifts off a Queens street under the 7 train and lands by the Unisphere,
   then a coral subway car carries the story through Downtown Brooklyn, over the Manhattan Bridge, to MetLife and 270 Park.
   Markup: index.html #journey · engine: assets/js/journey.js · art is inline SVG, 1 unit = box height / 300.
   Motion: transform + opacity only, no blur, no filters. Loops pause offscreen, on a hidden tab, and outside the live chapters. */

/* ---------- frame (box size, radius and caption look stay from styles.css) ---------- */
/* page scroll stays native (vertical pan + pinch zoom); horizontal swipes go to journey.js */
.jy { touch-action: pan-y pinch-zoom; }
.jy .jy-view { container-type: size; --u: max(calc(100cqh / 300), calc(100cqw / 800)); --oy: calc(100cqh - 300 * var(--u)); --amp: 1; --slow: 1; background: var(--navy-700); }
.jy .jy-sky, .jy .jy-sky i, .jy .jy-scene { position: absolute; inset: 0; }
.jy .jy-sky i:nth-child(1) { background: linear-gradient(180deg, var(--journey-sky-1-top), var(--journey-sky-1-mid) 55%, var(--journey-sky-1-horizon)); }
.jy .jy-sky i:nth-child(2) { background: linear-gradient(180deg, var(--journey-sky-2-top), var(--journey-sky-2-mid) 55%, var(--journey-sky-2-horizon)); opacity: 0; }
.jy .jy-sky i:nth-child(3) { background: linear-gradient(180deg, var(--journey-sky-3-top), var(--journey-sky-3-mid) 55%, var(--journey-sky-3-horizon)); opacity: 0; }
.jy .jy-sky i:nth-child(4) { background: linear-gradient(180deg, var(--journey-sky-4-top), var(--journey-sky-4-mid) 55%, var(--journey-sky-4-horizon)); opacity: 0; }
.jy .jy-layer { position: absolute; left: 0; bottom: 0; height: calc(300 * var(--u)); width: calc(var(--w) * var(--u)); will-change: transform; }
.jy .jy-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.jy .jy-sp { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); overflow: visible; pointer-events: none; }
/* resting frame before the engine runs (and with JS off): beat 1, the Queens street (v1.4: was Sylhet) */
.jy .jy-bg    { transform: translateX(calc(50cqw - 334 * var(--u))); }
.jy .jy-world { transform: translateX(calc(50cqw - 185 * var(--u))); }
.jy .jy-fg    { transform: translateX(calc(50cqw - 282 * var(--u))); }
.jy .jy-balloon { position: absolute; left: 0; top: 0; width: calc(36 * var(--u)); height: calc(56 * var(--u)); will-change: transform;
  transform: translate(calc(50cqw - 125 * var(--u)), calc(var(--oy) + 195 * var(--u))); }
.jy .jy-balloon svg, .jy .jy-car svg { width: 100%; height: 100%; display: block; overflow: visible; }
.jy .jy-bob { width: 100%; height: 100%; }
.jy .jy-car { position: absolute; left: 0; top: 0; width: calc(34 * var(--u)); height: calc(16 * var(--u)); transform-origin: 0 100%; will-change: transform; }
.jy .jy-car1 { transform: translate(calc(50cqw + 571 * var(--u)), calc(var(--oy) + 180 * var(--u))); }
.jy .jy-car2 { transform: translate(calc(50cqw + 535 * var(--u)), calc(var(--oy) + 180 * var(--u))); }
.jy .jy-glow { opacity: .35; }
.jy .journey-caption-container { z-index: 5; }
.jy #journey-box { will-change: auto; }

/* ---------- palette (shared tokens: navy/coral/sand + the Journey group in design-system/tokens.css) ---------- */
.jy .t9 { fill: var(--journey-tea-900); } .jy .t8 { fill: var(--journey-tea-800); } .jy .t7 { fill: var(--journey-tea-700); }
.jy .t6 { fill: var(--journey-tea-600); }
.jy .n9 { fill: var(--navy-900); } .jy .n85 { fill: var(--navy-850); } .jy .n8 { fill: var(--navy-800); } .jy .n7 { fill: var(--navy-700); }
.jy .n6 { fill: var(--navy-600); } .jy .n5 { fill: var(--navy-500); } .jy .n4 { fill: var(--navy-400); } .jy .n3 { fill: var(--navy-300); }
.jy .n2 { fill: var(--navy-200); }
.jy .c2 { fill: var(--coral-200); } .jy .c3 { fill: var(--coral-300); } .jy .c4 { fill: var(--coral-400); } .jy .c5 { fill: var(--coral-500); }
.jy .c6 { fill: var(--coral-600); }
.jy .s1 { fill: var(--sand-100); } .jy .s5 { fill: var(--sand-500); }
.jy .w { fill: var(--journey-window); } .jy .v { fill: var(--journey-violet); }
.jy .sc4 { stop-color: var(--coral-400); } .jy .sc6 { stop-color: var(--coral-600); } .jy .ss1 { stop-color: var(--sand-100); }
.jy .ss1w { fill: var(--sand-100); }
.jy [class*="S"] { fill: none; stroke-linecap: round; }
.jy .St8 { stroke: var(--journey-tea-800); stroke-width: 5; stroke-dasharray: 9 3; }
.jy .Sn1 { stroke: var(--navy-100); stroke-width: 1; } .jy .Sn2 { stroke: var(--navy-200); stroke-width: 1.4; }
.jy .Sn5 { stroke: var(--navy-500); stroke-width: 2.2; } .jy .Sn6 { stroke: var(--navy-600); stroke-width: 3; stroke-linecap: butt; }
.jy .Sn9 { stroke: var(--navy-900); stroke-width: 1.1; } .jy .Ss1 { stroke: var(--sand-100); stroke-width: 1.2; }
.jy .Sc6 { stroke: var(--coral-600); stroke-width: .7; }
.jy .jy-pool { stroke: var(--sand-300); stroke-width: 1.2; }
.jy .jy-globe { stroke-width: 1.1; } .jy .jy-rings { stroke-width: 1.5; opacity: .9; }
.jy .jy-sus { stroke-width: .5; opacity: .7; } .jy .jy-lit { opacity: .5; } .jy .jy-lit2 { opacity: .4; }
.jy .jy-gw { opacity: .8; } .jy .jy-sun { opacity: .9; } .jy .jy-stars { opacity: .8; }
.jy .jy-halo { opacity: .14; } .jy .jy-hi { opacity: .55; } .jy .jy-rope { stroke-width: .7; }
.jy .jy-mist .s1 { opacity: .22; } .jy .jy-cloud .s1 { opacity: .45; } .jy .jy-river { opacity: .45; }
.jy .jy-fount .Ss1 { opacity: .7; stroke-width: 1.3; }
.jy .jy-flags .Sn1 { stroke-width: .9; }
.jy .jy-hand { stroke-width: .9; }
/* v1.4 (Shah 4:47pm ET Oct 30, start from home): the Queens opening (journey.js 1.9 QUEENS / the index.html patch) */
.jy .jy-lace { stroke-width: .8; opacity: .7; } .jy .jy-river7 { opacity: .18; } .jy .jy-7w { opacity: .6; }

/* ---------- dots ---------- */
.jy .jy-dots { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 0; z-index: 6; }
.jy .jy-dot { width: 24px; height: 24px; padding: 0; margin: 0; border: 0; background: none; position: relative; cursor: pointer; }
.jy .jy-dot::before, .jy .jy-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px;
  border-radius: 3px; background: var(--navy-100); opacity: .5; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.jy .jy-dot::after { background: var(--coral-500); opacity: 0; }
.jy .jy-dot[aria-current]::before, .jy .jy-dot[aria-current]::after { transform: scaleX(2.4); }
.jy .jy-dot[aria-current]::after { opacity: 1; }
/* the gold thread (A's one gold line, hero horizon -> tide glint -> here): a hairline from the first dot to the current one,
   drawn with the shared settle ease. Transform only; the stage comes from the dots' aria-current (no script writes). */
.jy .jy-thread { position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; margin-top: -.5px; pointer-events: none;
  background: var(--gold-300, #D6C1A0); opacity: .85; transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 450ms cubic-bezier(.22,1,.36,1); }
.jy .jy-dots:has(.jy-dot[data-i="1"][aria-current]) .jy-thread { transform: scaleX(.25); }
.jy .jy-dots:has(.jy-dot[data-i="2"][aria-current]) .jy-thread { transform: scaleX(.5); }
.jy .jy-dots:has(.jy-dot[data-i="3"][aria-current]) .jy-thread { transform: scaleX(.75); }
.jy .jy-dots:has(.jy-dot[data-i="4"][aria-current]) .jy-thread { transform: scaleX(1); }
/* v1.4: four stages (no visible data-i 0 dot): the thread runs from the Queens dot (data-i 1) */
.jy .jy-dots:not(:has(.jy-dot[data-i="0"]:not([hidden]))) .jy-thread { transform: scaleX(0); }
.jy .jy-dots:not(:has(.jy-dot[data-i="0"]:not([hidden]))):has(.jy-dot[data-i="2"][aria-current]) .jy-thread { transform: scaleX(.3333); }
.jy .jy-dots:not(:has(.jy-dot[data-i="0"]:not([hidden]))):has(.jy-dot[data-i="3"][aria-current]) .jy-thread { transform: scaleX(.6667); }
.jy .jy-dots:not(:has(.jy-dot[data-i="0"]:not([hidden]))):has(.jy-dot[data-i="4"][aria-current]) .jy-thread { transform: scaleX(1); }
/* the stage under the Tide waits 24px low (12px on phones) and journey.js settles it with a 450ms spring once the water is gone.
   Individual translate, so it composes with the page's reveal transform. Reduced motion: no travel (journey.js fades the view). */
.jy.jy-pre { translate: 0 24px; }
@media (max-width: 767.98px) { .jy.jy-pre { translate: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .jy.jy-pre { translate: none; } .jy .jy-thread { transition-duration: 200ms; } }
/* the whole box takes keyboard focus (arrow keys move between stages): standard focus ring tokens */
.jy:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.jy .jy-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.jy .jy-dot:focus-visible { outline: 2px solid var(--coral-400); outline-offset: -4px; border-radius: 8px; }

/* ---------- ambient life · transform/opacity only; --amp and --slow soften them under reduced motion ---------- */
.jy .jy-mist  { animation: jy-drift calc(14s * var(--slow)) ease-in-out infinite alternate; }
.jy .jy-cloud { animation: jy-drift calc(26s * var(--slow)) ease-in-out infinite alternate; }
.jy .jy-river { animation: jy-drift calc(6s * var(--slow)) ease-in-out infinite alternate; }
.jy .jy-sway  { transform-origin: 50% 100%; animation: jy-sway calc(5s * var(--slow)) ease-in-out infinite alternate; }
.jy .jy-birds { animation: jy-birds calc(24s * var(--slow)) linear infinite; }
.jy .jy-j2, .jy .jy-fl, .jy .jy-t2, .jy .jy-twk, .jy .jy-wins { animation: jy-blink calc(2.4s * var(--slow)) ease-in-out infinite alternate; }
.jy .jy-fl   { animation-duration: calc(1.4s * var(--slow)); }
.jy .jy-t2   { animation-duration: calc(3.2s * var(--slow)); }
.jy .jy-twk  { animation-duration: calc(4s * var(--slow)); }
.jy .jy-wins { animation-duration: calc(6s * var(--slow)); }
.jy .jy-shine path { opacity: 0; animation: jy-shine calc(9s * var(--slow)) ease-in-out infinite; }
.jy .jy-shine .jy-r1 { animation-delay: -3s; } .jy .jy-shine .jy-r2 { animation-delay: -6s; }
.jy .jy-auto { animation: jy-auto calc(9s * var(--slow)) linear infinite; }
.jy .jy-7 { opacity: 0; animation: jy-7 calc(22s * var(--slow)) linear infinite; }   /* v1.4: the 7 train crosses the el now and then */
.jy .jy-hand { transform-box: view-box; transform-origin: 5px 5px; animation: jy-spin calc(12s * var(--slow)) linear infinite; }
.jy .jy-bob  { animation: jy-bob calc(4s * var(--slow)) ease-in-out infinite; }
.jy .jy-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: jy-flick calc(1.2s * var(--slow)) ease-in-out infinite alternate; }
.jy .jy-balloon:not(.jy-burn) .jy-flame { visibility: hidden; animation-play-state: paused; }
.jy .jy-landed .jy-bob { animation-play-state: paused; }
.jy .jy-moving .jy-car svg { animation: jy-rattle .2s steps(2, jump-none) infinite; }
.jy .jy-under .jy-win { fill: var(--journey-window); }
@keyframes jy-drift { from { transform: translateX(0); } to { transform: translateX(calc(14 * var(--u) * var(--amp))); } }
@keyframes jy-sway  { from { transform: rotate(calc(-1.2deg * var(--amp))); } to { transform: rotate(calc(1.2deg * var(--amp))); } }
@keyframes jy-birds { 0% { transform: translateX(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateX(calc(150 * var(--u))); opacity: 0; } }
@keyframes jy-blink { from { opacity: calc(1 - .85 * var(--amp)); } to { opacity: 1; } }
@keyframes jy-shine { 0%, 55%, 100% { opacity: 0; } 25% { opacity: calc(.9 * var(--amp)); } }
@keyframes jy-auto  { from { transform: translateX(calc(-50 * var(--u))); } to { transform: translateX(calc(320 * var(--u))); } }
@keyframes jy-spin  { to { transform: rotate(360deg); } }
@keyframes jy-7     { 0% { transform: translateX(0); opacity: 0; } 5%, 56% { opacity: 1; } 62%, 100% { transform: translateX(calc(560 * var(--u))); opacity: 0; } }
@keyframes jy-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-3 * var(--u) * var(--amp))); } }
@keyframes jy-flick { from { transform: scaleY(.8); opacity: .75; } to { transform: scaleY(1.15); opacity: 1; } }
@keyframes jy-rattle { from { transform: translateY(0); } to { transform: translateY(.5px); } }

/* only the live chapters (current +-1, set by journey.js) show and run their ambient sprites */
.jy .jy-view:not([data-l0]) .jy-sp[data-ch="0"], .jy .jy-view:not([data-l1]) .jy-sp[data-ch="1"],
.jy .jy-view:not([data-l2]) .jy-sp[data-ch="2"], .jy .jy-view:not([data-l3]) .jy-sp[data-ch="3"] { visibility: hidden; }
.jy .jy-view:not([data-l0]) .jy-sp[data-ch="0"], .jy .jy-view:not([data-l0]) .jy-sp[data-ch="0"] *,
.jy .jy-view:not([data-l1]) .jy-sp[data-ch="1"], .jy .jy-view:not([data-l1]) .jy-sp[data-ch="1"] *,
.jy .jy-view:not([data-l2]) .jy-sp[data-ch="2"], .jy .jy-view:not([data-l2]) .jy-sp[data-ch="2"] *,
.jy .jy-view:not([data-l3]) .jy-sp[data-ch="3"], .jy .jy-view:not([data-l3]) .jy-sp[data-ch="3"] *,
.jy .jy-view[data-off], .jy .jy-view[data-off] * { animation-play-state: paused !important; }

/* phones and low-end devices: 3 moving layers, desktop-only sprites off (<= 8 loops) */
@media (max-width: 767.98px) { .jy .jy-desk { display: none; } }
html.glass-lite .jy .jy-desk { display: none; }

/* reduced motion: soften, never remove (half amplitude, double duration; beats crossfade in journey.js) */
@media (prefers-reduced-motion: reduce) {
  .jy .jy-view { --amp: .5; --slow: 2; }
  .jy .jy-moving .jy-car svg { animation: none; }
}