/* Belt (22 Oct): the mission section as a flat 2D assembly line, built from _belt_test.html by tools/build_belt.js
   (edit the preview, rerun the build). Section head: the heading, the statement, the three points; then the line,
   full width, with its labels and caption. js/belt.js mounts it. Tokens only; keyframes prefixed belt-. */
/* the grounds blend into each other (Nabira, 22 Oct): the hero's teal into the mission's pink, pink into the launch section's teal at the foot */
.journey-belt { padding: var(--s5) 0 var(--s4); background: linear-gradient(180deg, #d6e9e4 0%, #f2dde0 22%, #f2dde0 68%, #d6e9e4 100%); } /* taste-skill-ignore: the section grounds blending, Nabira's ask */
/* the head, centred (Nabira, 22 Oct): the heading, the statement small, the three points in a row */
.journey-belt .journey-head { display: grid; justify-items: center; text-align: center; gap: var(--s3); margin-bottom: var(--s5); }
.journey-belt .journey-statement { margin-top: 2px; }
.journey-belt .journey-statement { margin: 0; max-width: 58ch; font-size: clamp(1rem, 1.2vw, 1.2rem); font-weight: 500; color: var(--text-dim); line-height: 1.5; text-wrap: pretty; }
.journey-belt h2 { margin: 0; font-family: var(--font-display); font-weight: 600; }
/* the three points as teal pills with the buttons' sheen crossing them in turn (Nabira, 22 Oct) */
.journey-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.journey-pills li { position: relative; overflow: hidden; padding: 7px 16px; border-radius: var(--pill); background: linear-gradient(105deg, #026b63, #02857a); color: #fff; font-size: .875rem; font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset; } /* taste-skill-ignore: the pinned teal pills with their inner highlight */
.journey-pills li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%); transform: translateX(-130%); animation: belt-sheen 4.2s var(--ease-io) calc(1.2s + var(--i, 0) * .5s) infinite; } /* taste-skill-ignore: the sheen Nabira asked for */
@keyframes belt-sheen { 0% { transform: translateX(-130%); } 34%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .journey-pills li::after { animation: none; } }

/* Belt (22 Oct, local, preview, seventh draft, flat 2D): the mission as an assembly line seen from the side. One grid:
   ten stops 200 units apart on a 2040 unit scene, each machine centred on its stop, the box pausing exactly under it;
   the 72 unit lane around every stop plus 24 units each side is clear of anything behind the belt, side objects sit
   in the air between stops, and only the scanner's light, the gate's door, the dome and the press head are drawn in
   front of the box. Every station's action is a CSS animation in a 0 to 7 percent window of the 30 s loop, shifted
   into place with animation-delay from --k (3 s per station). Base state = the finished line; reduced motion shows
   it still. Transform, opacity and stroke-dashoffset only; paused off screen (js). */
.belt { position: relative; width: 100%; }
.belt-window { overflow: clip; }
.belt-scene { display: block; width: 100%; height: auto; overflow: visible; }
.belt-labels { position: relative; height: 3.2vw; min-height: 50px; margin-top: 4px; }
/* the words are sized in vw, so they keep their size next to the scene at any browser zoom */
.lab { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: .1vw; font-size: max(14px, 1.1vw); font-weight: 700; white-space: nowrap; animation: belt-lit 30s linear infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.lab i { font-style: normal; font-size: max(12px, .9vw); font-weight: 600; color: #02665e; }
.belt-cap { position: relative; min-height: max(56px, 3.6vw); margin-top: max(14px, 1vw); }
.cap { position: absolute; inset: 0; margin: 0; text-align: center; font-size: max(15px, 1.25vw); line-height: 1.5; opacity: 0; animation: belt-capwin 30s linear infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.cap:last-child { opacity: 1; }
.cap b { display: none; font-weight: 600; color: #02665e; margin-right: 8px; }
.belt.is-camera .belt-labels { display: none; }
.belt.is-camera .cap b { display: inline; }
.belt.is-camera .world { animation: belt-camera 30s ease-in-out infinite; }
.belt.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .belt *, .lab, .cap { animation: none !important; } .cap { opacity: 0; } .cap:last-child { opacity: 1; } }

.stripe { animation: belt-stripe 1.1s linear infinite; }
.roller { transform-box: fill-box; transform-origin: center; animation: belt-spin 2.6s linear infinite; }
.app { animation: belt-travel 30s ease-in-out infinite; }
.app .tag { opacity: 1; animation: belt-appear 30s linear infinite; animation-delay: calc(-30s + 1.4s); }
.st > *, .st { transform-box: fill-box; }
.appear { animation: belt-appear 30s linear infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }
.fall { opacity: 0; animation: belt-fall 30s ease-in infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }
.rise { animation: belt-rise 30s ease-out infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }
.scanbar { opacity: 0; animation: belt-scan 30s ease-in-out infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.gatedoor { animation: belt-gate 30s ease-in-out infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.shackle { animation: belt-shackle 30s ease-out infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.dome { transform: translateY(-150px); animation: belt-dome 30s cubic-bezier(.3, 1.2, .6, 1) infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.blink { animation: belt-blink 30s linear infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.arm { transform-origin: 50% 0; animation: belt-probe 30s ease-in-out infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.pop { animation: belt-pop 30s ease-out infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }
.walk { transform: translateX(var(--w)); animation: belt-walk 30s ease-in-out infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }
.knock { transform-origin: 50% 100%; animation: belt-knock 30s linear infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }
.lens { transform: translateX(22px); animation: belt-lensmove 30s ease-in-out infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.presshead { animation: belt-press 30s ease-in-out infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.tagfade { animation: belt-tagfade 30s linear infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.enter { animation: belt-enter 30s ease-out infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }
.sheet { transform: translateY(-96px); animation: belt-print 30s ease-out infinite; animation-delay: calc(var(--k) * 3s - 30s); }
.rows { animation: belt-rows 30s linear infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }
.verdict { animation: belt-verdict 30s linear infinite; animation-delay: calc(var(--k) * 3s - 30s + var(--d, 0s)); }

@keyframes belt-stripe { to { stroke-dashoffset: -44; } }
@keyframes belt-spin { to { transform: rotate(360deg); } }
@keyframes belt-lit { 0%, 7% { opacity: 1; } 8%, 100% { opacity: .5; } }
@keyframes belt-capwin { 0%, 1% { opacity: 0; } 2%, 7% { opacity: 1; } 8%, 100% { opacity: 0; } }
@keyframes belt-travel {
  0% { transform: translate(170px, 290px); opacity: 0; } 1.2% { opacity: 1; } 7% { transform: translate(170px, 290px); }
  10%, 17% { transform: translate(370px, 290px); } 20%, 27% { transform: translate(570px, 290px); } 30%, 37% { transform: translate(770px, 290px); }
  40%, 47% { transform: translate(970px, 290px); } 50%, 57% { transform: translate(1170px, 290px); } 60%, 67% { transform: translate(1370px, 290px); }
  70%, 77% { transform: translate(1570px, 290px); } 80%, 87% { transform: translate(1770px, 290px); } 90%, 97% { transform: translate(1970px, 290px); opacity: 1; }
  100% { transform: translate(1970px, 290px); opacity: 0; }
}
@keyframes belt-camera {
  0%, 7% { transform: translateX(0); } 10%, 17% { transform: translateX(-140px); } 20%, 27% { transform: translateX(-340px); } 30%, 37% { transform: translateX(-540px); }
  40%, 47% { transform: translateX(-740px); } 50%, 57% { transform: translateX(-940px); } 60%, 67% { transform: translateX(-1140px); } 70%, 100% { transform: translateX(-1280px); }
}
@keyframes belt-appear { 0%, 1% { opacity: 0; } 3%, 93% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes belt-fall { 0% { transform: translateY(0); opacity: 1; } 2.6% { transform: translateY(74px); opacity: 1; } 3.2%, 93% { transform: translateY(74px); opacity: 0; } 94%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes belt-rise { 0%, 1% { transform: translateY(24px); opacity: 0; } 3%, 93% { transform: translateY(0); opacity: 1; } 94%, 100% { transform: translateY(24px); opacity: 0; } }
@keyframes belt-scan { 0%, .8% { transform: translateX(-46px); opacity: 0; } 1.2% { opacity: .9; } 3% { transform: translateX(46px); } 4.8% { transform: translateX(-46px); opacity: .9; } 5.2%, 100% { transform: translateX(-46px); opacity: 0; } }
/* the door is up as the tile arrives, comes down and seals it in for the stop, and lifts just before it leaves */
@keyframes belt-gate { 0%, .4% { transform: translateY(-156px); } 1.6%, 5.6% { transform: translateY(0); } 6.8%, 100% { transform: translateY(-156px); } }
@keyframes belt-shackle { 0%, 1.8% { transform: translateY(-7px); } 2.4%, 5.4% { transform: translateY(0); } 6%, 100% { transform: translateY(-7px); } }
@keyframes belt-dome { 0%, .6% { transform: translateY(-150px); } 2.4%, 5.8% { transform: translateY(0); } 7.2%, 100% { transform: translateY(-150px); } }
@keyframes belt-blink { 0%, 2.5% { opacity: 0; } 3% { opacity: 1; } 3.5% { opacity: 0; } 4% { opacity: 1; } 4.5% { opacity: 0; } 5%, 93% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes belt-probe { 0%, 1% { transform: rotate(0deg); } 2.4% { transform: rotate(44deg); } 4.4% { transform: rotate(44deg); } 5.8%, 100% { transform: rotate(0deg); } }
@keyframes belt-pop { 0%, 1% { transform: translateY(-50px); opacity: 0; } 3%, 93% { transform: translateY(0); opacity: 1; } 94%, 100% { transform: translateY(-50px); opacity: 0; } }
@keyframes belt-walk { 0%, 1% { transform: translateX(0); } 3.5%, 93% { transform: translateX(var(--w)); } 94%, 100% { transform: translateX(0); } }
@keyframes belt-knock { 0%, 3.6% { transform: rotate(0deg); } 3.8% { transform: rotate(-5deg); } 4% { transform: rotate(5deg); } 4.2% { transform: rotate(-5deg); } 4.4% { transform: rotate(5deg); } 4.6%, 100% { transform: rotate(0deg); } }
@keyframes belt-lensmove { 0%, 1.5% { transform: translateX(-22px); } 4.5%, 93% { transform: translateX(22px); } 94%, 100% { transform: translateX(-22px); } }
@keyframes belt-press { 0%, 1% { transform: translateY(0); } 2.4% { transform: translateY(38px); } 3.8% { transform: translateY(38px); } 5.2%, 100% { transform: translateY(0); } }
/* the snapshot tag steps aside while the press head is down on the tile */
@keyframes belt-tagfade { 0%, .6% { opacity: 1; } 1.2%, 5.2% { opacity: 0; } 6%, 100% { opacity: 1; } }
/* after the knock the user steps in through the door and is gone until the loop restarts */
@keyframes belt-enter { 0%, 3.6% { opacity: 1; } 4.4%, 93% { opacity: 0; } 94%, 100% { opacity: 1; } }
/* the last station's results live only until the loop restarts: the sheet is out from 4 to 10 percent of its clock
   (the final 3 s of the loop), the rows with it; the verdict on the tile shows from the press to the loop's end */
@keyframes belt-print { 0%, 1.5% { transform: translateY(0); } 4%, 9.4% { transform: translateY(-96px); } 10%, 100% { transform: translateY(0); } }
@keyframes belt-rows { 0%, 1% { opacity: 0; } 2.5%, 9.4% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes belt-verdict { 0%, 1% { opacity: 0; } 2.5%, 19.4% { opacity: 1; } 20%, 100% { opacity: 0; } }

.preview-note { position: fixed; left: 16px; bottom: 16px; z-index: 50; padding: 8px 14px; border-radius: var(--pill); background: rgba(255, 255, 255, .7); font-size: max(13px, .8vw); }