/* ==========================================================================
   NNP RAISINS — TRACKING, v3 THE JOURNEY (2026-09-22). Loaded by
   track/index.html and track/result.php, after site.css.

   THE ROAD IS THE VISUAL. His verdict on v2, the departure board: "not bad,
   try another concept, this one looks more sport related." Tracking's noun
   is where the shipment is on its way, so the page is the way: one dark
   night-road screen, the NNP truck (his own cut-out, facing west, the way
   the buyers are) standing on a road that runs from SAMARKAND at the right
   edge to ARRIVAL at the left, the lane markings sliding under it. The
   answer page puts the truck where the shipment is: the fraction of the
   road between the dispatch date and the estimated arrival that today
   has covered; at the far left once it has arrived.

   v1 (paper form) archives/track-index-v1-2026-09-22.html; v2 (the board)
   archives/track-v2-board-2026-09-22/.

   ⚠ EVERY MOTION RULE IS `.js`-GATED or CSS-only and honours reduced motion.
   ⚠ HIS LAPTOP IS 1270×680: headline, road and box fit one screen there.
   ========================================================================== */

/* ------------------------------------------------------------- page ---- */
.tj { --tj-bg: #08060e; --tj-line: rgba(242,237,248,.14); --tj-glass: rgba(242,237,248,.06); --tj-r: 16px;
      --tj-road: #16121f; --tj-asphalt: #1d1826; --tj-amber: #e8a579;
      background: var(--tj-bg); color: var(--chalk); overflow-x: clip; }
.tj-dark-page, .tj-dark-page body { background: #08060e; }
.tj-dark-page body { padding-top: 0; }

/* ------------------------------------------------------- masthead ---- */
.tj-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.tj-dark-page .masthead.is-stuck { background: rgba(14,7,28,.42); border-bottom-color: rgba(242,237,248,.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .tj-dark-page .masthead.is-stuck { background: rgba(14,7,28,.86); }
}
.tj-dark-page .masthead .brand { color: #fff; }
.tj-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
@media (min-width: 1001px) {
  .tj-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .tj-dark-page .masthead .mainnav a:not(.btn):hover,
  .tj-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  .tj-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .tj-dark-page .masthead .btn-primary::before { background: #fff; }
  .tj-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.tj-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 14px; }
.tj-h1 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(44px, 10vh, 100px); line-height: .9; letter-spacing: -.05em; margin: 0 0 16px; text-shadow: 0 12px 50px rgba(0,0,0,.6); }
.tj-h1 .accent { color: var(--violet-lt); }
.tj-lead { margin: 0 auto; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--chalk-dim); max-width: 54ch; }
.tj-glass { background: rgba(14,10,22,.55); border: 1px solid var(--tj-line); border-radius: var(--tj-r);
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 40px 80px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.btn-ghost-light { background: transparent; color: var(--chalk); border: 1px solid rgba(242,237,248,.38); }
.btn-ghost-light:hover { border-color: var(--chalk); background: rgba(242,237,248,.08); }

/* ============================================================= NIGHT ====
   The one screen: sky and hills far behind, the words, the road with the
   truck on it, the box. */
.tj-night { position: relative; min-height: 100vh; display: grid; align-content: center; padding: 108px 0 48px; overflow: hidden; }
.tj-sky { position: absolute; inset: 0; z-index: 0; }
/* the vineyard rows from the air (the film's opening frame), graded to night: the
   road photograph carried its own truck and the screen had two (first build) */
.tj-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; filter: brightness(.55) saturate(.6) contrast(1.05); }
.tj-sky::after { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,6,14,.72) 0%, rgba(8,6,14,.55) 35%, rgba(8,6,14,.86) 62%, #08060e 78%),
    radial-gradient(ellipse at 50% 58%, rgba(232,165,121,.16) 0%, rgba(8,6,14,0) 50%); }
/* width: 100%: inside a grid, `.wrap`'s auto side margins shrink it to its
   content (597px at 1270, first build) and the road was a stub */
.tj-night > .wrap { position: relative; z-index: 1; width: 100%; box-sizing: border-box; }
.tj-head { text-align: center; margin: 0 auto clamp(14px, 2.4vh, 28px); }

/* THE ROAD: a band the full width of the screen, lane markings sliding
   towards Samarkand (the truck drives west), a marker at each end */
.tj-scene { position: relative; height: clamp(150px, 26vh, 220px); margin: 0 calc(-1 * var(--spine)) 0; }
.tj-way { position: absolute; left: 0; right: 0; bottom: 34px; height: 44px;
  background: linear-gradient(180deg, rgba(242,237,248,.06) 0%, var(--tj-asphalt) 6%, var(--tj-road) 100%);
  box-shadow: 0 -1px 0 rgba(242,237,248,.12), 0 1px 0 rgba(0,0,0,.6); }
.tj-way::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, rgba(242,237,248,.55) 0 36px, transparent 36px 72px);
  background-size: 72px 2px; }
.js .tj-way::before { animation: tj-lane 1.6s linear infinite; }
@keyframes tj-lane { from { background-position: 0 0; } to { background-position: 72px 0; } }
.tj-way::after { content: ''; position: absolute; left: 0; right: 0; bottom: -34px; height: 34px;
  background: linear-gradient(180deg, rgba(8,6,14,.2), #08060e); }
/* the ends of the road */
/* under the road, so the truck parked at an end never covers them (first build) */
.tj-end { position: absolute; bottom: -6px; margin: 0; display: grid; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }
.tj-end::after { content: ''; position: absolute; width: 1px; height: 26px; background: rgba(242,237,248,.35); top: -30px; }
.tj-end b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: #fff; text-transform: none; }
.tj-end.is-from { right: var(--spine); text-align: right; justify-items: end; }
.tj-end.is-from::after { right: 0; }
.tj-end.is-to { left: var(--spine); justify-items: start; }
.tj-end.is-to::after { left: 0; }
/* THE TRUCK: on the road, `--x` of the way from Samarkand (0, the right
   end) to arrival (1, the left end) */
.tj-truck { position: absolute; bottom: 60px; right: var(--spine); width: clamp(300px, 34vw, 440px); aspect-ratio: 1829 / 611;
  --x: 0; transform: translate3d(calc(var(--x) * -1 * (100vw - 2 * var(--spine) - 100%)), 0, 0); will-change: transform; }
/* the body: image, wheels and headlight together, so they bob as one (his
   flag: the lights did not move with the truck) */
.tj-body { position: absolute; inset: 0; display: block; will-change: transform; }
.tj-body > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 22px 24px rgba(0,0,0,.65)); }
/* no headlight cone: his call 2026-09-22, "this is not how lights work in rl". Only the shadow under the truck. */
.tj-truck::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -6px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.7); filter: blur(6px); z-index: -1; }
.js .tj-truck { transition: transform 1.8s cubic-bezier(.22,.9,.3,1); }
.js .tj-truck.is-rolling .tj-body { animation: tj-roll 2.2s ease-in-out infinite; }
@keyframes tj-roll { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -1.5px, 0); } }
/* THE WHEELS: four discs cut from the same image (tools: the wheel cut in
   log/track.md), laid back exactly over their tyres, turning while the
   truck rolls. Counter-clockwise: the truck drives left. */
.tj-wheel { position: absolute; width: 9.623%; aspect-ratio: 1; pointer-events: none; }
.tj-wheel img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.tj-wheel-1 { left: 8.641%; top: 72.093%; }
.tj-wheel-2 { left: 31.099%; top: 72.000%; }
.tj-wheel-3 { left: 68.255%; top: 72.340%; }
.tj-wheel-4 { left: 78.683%; top: 72.508%; }
/* ⚠ THE DISC CENTRES ARE THE HUB CENTRES, measured from the bright rim, not
   read off a grid: 3–6 px off and the wheels wobble ("rotating off center",
   his flag 2026-09-22). Re-cut with tools noted in log/track.md. */
.js .tj-truck.is-rolling .tj-wheel img { animation: tj-spin 1.2s linear infinite; }
@keyframes tj-spin { to { transform: rotate(-360deg); } }
/* parked: the lane stops with the wheels */
.js .tj-scene.is-still .tj-way::before { animation-play-state: paused; }
/* the tag above the truck: the status on the answer page */
.tj-tag { position: absolute; left: 50%; bottom: 100%; margin-bottom: 10px; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(75,30,120,.85); border: 1px solid rgba(226,183,255,.45); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.tj-tag.is-delivered { background: rgba(30,107,54,.85); border-color: rgba(188,223,199,.5); }
.tj-tag.is-booked, .tj-tag.is-off { background: rgba(14,10,22,.85); border-color: var(--tj-line); color: var(--chalk-dim); }

/* THE BOX: the order number, under the road */
.tj-box { margin: clamp(10px, 2vh, 22px) auto 0; max-width: 720px; padding: clamp(16px, 2.2vh, 22px) clamp(18px, 2.4vw, 26px); display: grid; gap: 12px; }
.tj-box .tj-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.tj-box label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--chalk-dim); margin-bottom: 8px; }
.tj-box input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(242,237,248,.18);
  background: rgba(8,6,14,.6); color: #fff; font-family: var(--mono); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.tj-box input::placeholder { color: rgba(242,237,248,.3); }
.tj-box input:focus { outline: 2px solid var(--violet-lt); outline-offset: 2px; border-color: var(--violet-lt); }
.tj-box .btn-light { height: 52px; padding-inline: 26px; }
.tj-hint { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================ ANSWER ==== */
.tj-answer .tj-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 clamp(18px, 3vh, 30px); }
.tj-answer .tj-top a.tj-brand { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #fff; text-decoration: none; }
.tj-answer .tj-top a.tj-back { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); text-decoration: none; }
.tj-answer .tj-top a.tj-back:hover { color: #fff; }
.tj-answer.tj-night { padding-top: 40px; }
.tj-answer .tj-h1 { font-size: clamp(36px, 8vh, 72px); }
/* taller on the answer page: the tag above the truck needs headroom under the lead */
.tj-answer .tj-scene { height: clamp(200px, 32vh, 260px); }
/* the answer proper: the date at display size, the facts, under the road */
.tj-when { margin: clamp(10px, 2vh, 22px) auto 0; max-width: 980px; padding: clamp(16px, 2.4vh, 24px) clamp(20px, 2.6vw, 30px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 32px; align-items: center; }
.tj-when .tj-kick { margin-bottom: 8px; }
.tj-date { margin: 0; font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(30px, 6vh, 56px); line-height: .96; letter-spacing: -.04em; }
.tj-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.tj-facts div { display: grid; gap: 3px; }
.tj-facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }
.tj-facts dd { margin: 0; font-size: 14.5px; color: #fff; }
.tj-note { grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--tj-line); max-width: 72ch; font-size: 14px; line-height: 1.55; color: var(--chalk-dim); }
.tj-note a { color: #fff; }
.tj-when.is-plain { grid-template-columns: minmax(0, 1fr); }
.tj-when.is-plain .tj-note { padding-top: 0; border-top: 0; }
.tj-when + .tj-when { margin-top: 14px; }
.tj-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: clamp(18px, 3vh, 30px) auto 0; }

/* ----------------------------------------------------------- short ----
   His laptop: 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .tj-h1 { font-size: 60px; margin-bottom: 10px; }
  .tj-lead { font-size: 15px; }
  .tj-night { padding-top: 92px; padding-bottom: 32px; }
  .tj-scene { height: 168px; }
  .tj-truck { width: 340px; }
  .tj-answer .tj-h1 { font-size: 46px; }
  .tj-answer .tj-scene { height: 216px; }
  .tj-date { font-size: 40px; }
}
/* ----------------------------------------------------------- phone ---- */
@media (max-width: 900px) {
  .tj-night { padding: 96px 0 40px; min-height: 0; }
  .tj-h1 { font-size: clamp(38px, 11vw, 52px); }
  .tj-scene { height: 150px; margin: 0 calc(-1 * var(--gut)); }
  .tj-end { bottom: -4px; }
  .tj-end.is-from { right: var(--gut); } .tj-end.is-to { left: var(--gut); }
  .tj-truck { width: 200px; right: var(--gut); transform: translate3d(calc(var(--x) * -1 * (100vw - 2 * var(--gut) - 100%)), 0, 0); }
  .tj-box .tj-row { grid-template-columns: minmax(0, 1fr); }
  .tj-box .btn-light { width: 100%; text-align: center; }
  .tj-when { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .js .tj-way::before { animation: none; }
  .js .tj-truck { transition: none; }
  .js .tj-truck.is-rolling .tj-body, .js .tj-truck.is-rolling .tj-wheel img { animation: none; }
}