/*!
 * foldbike.css — FoldBike component + motion page blocks (Claude Design "motion": M1–M11).
 * Pair with foldbike.js. Markup: design/partials/foldbike.html, design/partials/fold-*.html. Docs: design/notes/foldbike.md
 *
 * COMPONENT  .fb                 root, fluid (width:100%, 3:2). Size it with width/max-width on .fb or its parent.
 *            .fb-loop            M1 10s fold loop (ride in → seat → bars → fold → hold → unfold → ride out)
 *            .fb-ride            spinning wheels + bob (M4/M10)
 *            .fb-manual          driven by --fb-seat / --fb-stem / --fb-flip (0–1) + --fb-dim; set by FoldBike.set()
 *            .fb-tone-paper      light ink for dark grounds
 *            .fb-clip            clip the ride-in/out to the bike box (default for .fb-loop is visible; clip the section)
 *            theme vars          --fb-ink --fb-ink2 --fb-paper --fb-accent --fb-grip --fb-shadow
 * BLOCKS     .fold-loop (M1+M2)  .fold-storyboard  .fold-scrub (M3)  .fold-ride (M4+M5)  .fold-carry (M6)
 *            .fold-pose (M7)     .fb-foldbtn (M8)  .fb-loader (M9)   .fb-progress (M10)  html.fb-vt (M11)
 * STATE      .fb-off (off-screen, set by JS) · html.fb-tab-hidden · prefers-reduced-motion → storyboard/static
 */

/* ============ FoldBike component ============ */
.fb {
  --fb-ink: #1E201D;
  --fb-ink2: #55594F;
  --fb-paper: #F4F1E8;
  --fb-accent: #D93A18;
  --fb-grip: #A45A4D;
  --fb-shadow: rgba(30, 32, 29, .14);
  --fb-ease: cubic-bezier(.65, 0, .35, 1);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  container-type: inline-size;
  pointer-events: none;
  user-select: none;
}
.fb.fb-tone-paper {
  --fb-ink: #F4F1E8;
  --fb-ink2: #B9B4A5;
  --fb-paper: #1E201D;
  --fb-shadow: rgba(0, 0, 0, .4);
}
.fb.fb-clip { overflow: clip; }
.fb .fb-l { position: absolute; inset: 0; }
.fb svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.fb .k { stroke: var(--fb-ink); }
.fb .k2 { stroke: var(--fb-ink2); }
.fb .kp { stroke: var(--fb-paper); }
.fb .ka { stroke: var(--fb-accent); }
.fb .kg { stroke: var(--fb-grip); }
.fb .f { fill: var(--fb-ink); }
.fb .f2 { fill: var(--fb-ink2); }
.fb .fp { fill: var(--fb-paper); }
.fb .fa { fill: var(--fb-accent); }
.fb .d { stroke-linecap: butt; }

/* Layers — transform origins are the board's hinge points as % of the 360×240 drawing */
.fb .fb-move { perspective: 800px; perspective: 222.2cqw; }
.fb .fb-move, .fb .fb-front, .fb .fb-seat, .fb .fb-stem, .fb .fb-lift { will-change: transform; }
.fb .fb-shadow {
  position: absolute; left: 14.444%; top: 91.25%; width: 71.111%; height: 5%;
  border-radius: 50%; background: var(--fb-shadow); transform-origin: 14.453% 50%;
}
.fb .fb-rw { transform-origin: 25.556% 75.833%; }
.fb .fb-fw { transform-origin: 72.778% 75.833%; }
.fb .fb-crank { transform-origin: 43.333% 78.333%; }
.fb .fb-front, .fb .fb-hinge, .fb .fb-cue3, .fb .fb-burst { transform-origin: 56.667% 66.667%; }
.fb .fb-stem, .fb .fb-cue2 { transform-origin: 67.222% 46.25%; }
.fb .fb-cue1 { transform-origin: 39.167% 46.667%; }
.fb .fb-cue, .fb .fb-arc, .fb .fb-burst { opacity: 0; }
.fb .fb-ring { transform-box: fill-box; transform-origin: center; animation: fbRipple 1s ease-out infinite; }
.fb .fb-ants { animation: fbAnts .6s linear infinite; }

/* Keyframes: FoldBike.dc.html, px → % of the drawing so the bike scales */
@keyframes fbMove {
  0% { transform: translateX(-122.222%); animation-timing-function: cubic-bezier(.15, .6, .3, 1); }
  12%, 27% { transform: translateX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  40%, 58% { transform: translateX(15.556%); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  68%, 86% { transform: translateX(0); animation-timing-function: cubic-bezier(.6, 0, .85, .4); }
  100% { transform: translateX(122.222%); }
}
@keyframes fbRoll {
  0% { transform: rotate(-600deg); animation-timing-function: cubic-bezier(.15, .6, .3, 1); }
  12%, 86% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.6, 0, .85, .4); }
  100% { transform: rotate(600deg); }
}
@keyframes fbCrank {
  0% { transform: rotate(-300deg); animation-timing-function: cubic-bezier(.15, .6, .3, 1); }
  12%, 86% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.6, 0, .85, .4); }
  100% { transform: rotate(300deg); }
}
@keyframes fbLift {
  0%, 27% { transform: none; } 33.5% { transform: translateY(-2.5%); } 40%, 58% { transform: none; }
  63% { transform: translateY(-1.667%); } 68%, 100% { transform: none; }
}
@keyframes fbSeat {
  0%, 13% { transform: none; animation-timing-function: cubic-bezier(.34, 1.25, .64, 1); }
  18.5%, 68% { transform: translate(1.667%, 13.333%); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  75%, 100% { transform: none; }
}
@keyframes fbStem {
  0%, 18% { transform: none; animation-timing-function: cubic-bezier(.34, 1.25, .64, 1); }
  26%, 64% { transform: rotate(150deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  72%, 100% { transform: none; }
}
@keyframes fbFront { 0%, 27% { transform: none; } 40%, 58% { transform: rotateY(-180deg); } 68%, 100% { transform: none; } }
@keyframes fbShade {
  0%, 27% { filter: brightness(1); } 33.5% { filter: brightness(.74); } 40%, 58% { filter: brightness(.9); }
  63% { filter: brightness(.74); } 68%, 100% { filter: brightness(1); }
}
@keyframes fbShadow { 0%, 27% { transform: scaleX(1); } 40%, 58% { transform: scaleX(.58); } 68%, 100% { transform: scaleX(1); } }
@keyframes fbCue1 { 0%, 11% { opacity: 0; transform: scale(.3); } 12.5%, 16% { opacity: 1; transform: none; } 17.5%, 100% { opacity: 0; transform: none; } }
@keyframes fbCue2 { 0%, 17% { opacity: 0; transform: scale(.3); } 18.5%, 24% { opacity: 1; transform: none; } 25.5%, 100% { opacity: 0; transform: none; } }
@keyframes fbCue3 {
  0%, 25% { opacity: 0; transform: scale(.3); } 26.5%, 37% { opacity: 1; transform: none; }
  39%, 55% { opacity: 0; transform: scale(.3); } 56.5%, 61% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: none; }
}
@keyframes fbArc { 0%, 27% { opacity: 0; } 29%, 37% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes fbBurst {
  0%, 38.5% { opacity: 0; transform: scale(.5); } 40.5% { opacity: 1; transform: scale(1.15); }
  44%, 66% { opacity: 0; transform: scale(1.3); } 66.5% { opacity: 0; transform: scale(.5); }
  68.5% { opacity: 1; transform: scale(1.15); } 72%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes fbFlash { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes fbRipple { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
@keyframes fbAnts { to { stroke-dashoffset: -26; } }
@keyframes fbSpin { to { transform: rotate(360deg); } }
@keyframes fbBob { from { transform: translateY(0); } to { transform: translateY(-.833%); } }

/* M1 loop mode */
.fb-loop .fb-move { animation: fbMove 10s infinite; }
.fb-loop .fb-lift { animation: fbLift 10s ease-in-out infinite; }
.fb-loop .fb-rw, .fb-loop .fb-fw { animation: fbRoll 10s infinite; }
.fb-loop .fb-crank { animation: fbCrank 10s infinite; }
.fb-loop .fb-seat { animation: fbSeat 10s infinite; }
.fb-loop .fb-stem { animation: fbStem 10s infinite; }
.fb-loop .fb-front { animation: fbFront 10s cubic-bezier(.65, 0, .35, 1) infinite, fbShade 10s ease-in-out infinite; }
.fb-loop .fb-shadow { animation: fbShadow 10s cubic-bezier(.65, 0, .35, 1) infinite; }
.fb-loop .fb-cue1 { animation: fbCue1 10s ease-out infinite; }
.fb-loop .fb-cue2 { animation: fbCue2 10s ease-out infinite; }
.fb-loop .fb-cue3 { animation: fbCue3 10s ease-out infinite; }
.fb-loop .fb-arc { animation: fbArc 10s linear infinite; }
.fb-loop .fb-burst { animation: fbBurst 10s ease-out infinite; }

/* Ride mode */
.fb-ride .fb-rw, .fb-ride .fb-fw { animation: fbSpin .8s linear infinite; }
.fb-ride .fb-crank { animation: fbSpin 1.6s linear infinite; }
.fb-ride .fb-move { animation: fbBob .3s ease-in-out infinite alternate; }

/* Manual mode — port of the board's renderVals transform math */
/* Folded, the (full-size) layer boxes sit past the drawing's box; clip so they never cause page overflow. */
.fb-manual { --fb-seat: 0; --fb-stem: 0; --fb-flip: 0; overflow: clip; overflow-clip-margin: 8px; }
.fb-manual .fb-seat { transform: translate(calc(var(--fb-seat) * 1.667%), calc(var(--fb-seat) * 13.333%)); }
.fb-manual .fb-stem { transform: rotate(calc(var(--fb-stem) * 150deg)); }
.fb-manual .fb-move { transform: translateX(calc(var(--fb-flip) * 15.556%)); }
.fb-manual .fb-shadow { transform: scaleX(calc(1 - var(--fb-flip) * .42)); }
.fb-manual .fb-front {
  transform: rotateY(calc(var(--fb-flip) * -180deg));
  filter: brightness(var(--fb-dim, calc(1 - var(--fb-flip) * .1)));
}
.fb-manual .fb-cue, .fb-manual .fb-arc { transition: opacity .2s; }
.fb-manual.fb-c1 .fb-cue1, .fb-manual.fb-c2 .fb-cue2, .fb-manual.fb-c3 .fb-cue3, .fb-manual.fb-c3 .fb-arc { opacity: 1; }
.fb-manual.fb-smooth .fb-seat { transition: transform .45s var(--fb-ease) var(--fb-d-seat, 0s); }
.fb-manual.fb-smooth .fb-stem { transition: transform .55s var(--fb-ease) var(--fb-d-stem, .3s); }
.fb-manual.fb-smooth .fb-move, .fb-manual.fb-smooth .fb-shadow { transition: transform .8s var(--fb-ease) var(--fb-d-flip, .7s); }
.fb-manual.fb-smooth .fb-front { transition: transform .8s var(--fb-ease) var(--fb-d-flip, .7s), filter .8s var(--fb-ease) var(--fb-d-flip, .7s); }
.fb-manual.fb-latched .fb-burst { animation: fbFlash .7s ease-out var(--fb-burst-delay, .3s) both; }

/* Pause: off-screen (JS adds .fb-off) and hidden tab */
.fb-off, .fb-off *, .fb-tab-hidden .fb *, .fb-tab-hidden [data-fb-autopause] * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .fb *, .fb-off * { animation: none !important; transition: none !important; }
}

/* ============ Shared block bits ============ */
.fold-block {
  --fold-ink: #1E201D; --fold-ink2: #55594F; --fold-paper: #F4F1E8; --fold-paper2: #EAE4D3;
  --fold-line: #D3CEBF; --fold-accent: #D93A18; --fold-dot: #EF4926;
  --fold-display: Archivo, 'Noto Sans SC', system-ui, sans-serif;
  --fold-cn: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --fold-slant: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  position: relative;
  color: var(--fold-ink);
  font-family: var(--fold-display);
  overflow-x: clip;
}
.fold-block *, .fold-block *::before, .fold-block *::after { box-sizing: border-box; }
.fold-block [lang^="zh"] { font-family: var(--fold-cn); }
.fold-inner { width: min(100% - 40px, 1120px); margin-inline: auto; }
.fold-head { padding-block: 26px 8px; }
.fold-tag {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 18px;
  background: var(--fold-ink); color: #fff; clip-path: var(--fold-slant);
  font-style: italic; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.fold-tag--accent { background: var(--fold-accent); }
.fold-tag [lang^="zh"] { font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: 0; }
.fold-title {
  margin: 14px 0 0; font-style: italic; font-weight: 900; font-size: clamp(40px, 12vw, 72px);
  line-height: .9; letter-spacing: -.01em; text-transform: uppercase;
}
.fold-title .dot { color: var(--fold-dot); }
.fold-title-cn { margin: 8px 0 0; font-weight: 900; font-size: clamp(20px, 5.6vw, 28px); line-height: 1.25; }
.fold-lede { margin: 12px 0 0; max-width: 34em; font-size: 16px; line-height: 1.4; font-weight: 500; }
.fold-lede-cn { margin: 2px 0 0; max-width: 34em; font-size: 14px; line-height: 1.5; color: var(--fold-ink2); }
.fold-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============ M1 + M2 Fold loop hero ============ */
.fold-loop { background: var(--fold-paper); padding-bottom: 28px; }
.fold-loop .fl-stage { position: relative; container-type: inline-size; padding-top: 46px; overflow: clip; }
.fold-loop .fl-num {
  position: absolute; right: -6px; top: 0; margin: 0; opacity: 0;
  font-style: italic; font-weight: 900; font-size: min(64cqw, 340px); line-height: 1; color: var(--fold-paper2);
}
.fold-loop .fl-bike { position: relative; width: min(100% - 30px, 560px); margin-inline: auto; }
.fold-loop .fl-bike::after { /* ground line, full stage width */
  content: ""; position: absolute; top: 93.333%; left: -100vw; right: -100vw; height: 2px; background: var(--fold-line);
}
.fold-loop .fl-bike .fb { z-index: 1; }
.fold-loop .fl-caps { display: grid; min-height: 58px; margin-top: 26px; }
.fold-loop .fl-cap { grid-area: 1 / 1; opacity: 0; }
.fold-loop .fl-cap b { display: block; font-style: italic; font-weight: 900; font-size: 26px; line-height: 1.1; text-transform: uppercase; }
.fold-loop .fl-cap span { display: block; margin-top: 2px; font-weight: 700; font-size: 15px; color: var(--fold-ink2); }
.fold-loop .fl-rail { display: flex; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.fold-loop .fl-step {
  position: relative; flex: 1; min-width: 0; height: 62px; background: var(--fold-paper2); clip-path: var(--fold-slant);
}
.fold-loop .fl-step i { position: absolute; inset: 0; opacity: 0; background: var(--fold-accent); }
.fold-loop .fl-step > span { position: relative; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px 0 14px; }
.fold-loop .fl-step .n { font-style: italic; font-weight: 900; font-size: 30px; }
.fold-loop .fl-step .t { display: flex; flex-direction: column; min-width: 0; }
.fold-loop .fl-step .t b { font-style: italic; font-weight: 800; font-size: 14px; text-transform: uppercase; }
.fold-loop .fl-step .t [lang^="zh"] { font-size: 12px; }
.fold-loop .fl-bar { height: 4px; margin-top: 10px; background: var(--fold-line); }
.fold-loop .fl-bar::before { content: ""; display: block; height: 100%; background: var(--fold-ink); transform-origin: 0 50%; }

@keyframes flPh0 { 0%, 10% { opacity: 1; transform: none; } 12%, 82% { opacity: 0; transform: translateY(8px); } 84%, 100% { opacity: 1; transform: none; } }
@keyframes flPh1 { 0%, 10% { opacity: 0; transform: translateY(8px); } 12%, 17% { opacity: 1; transform: none; } 19%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes flPh2 { 0%, 17% { opacity: 0; transform: translateY(8px); } 19%, 25% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes flPh3 { 0%, 25% { opacity: 0; transform: translateY(8px); } 27%, 39% { opacity: 1; transform: none; } 41%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes flPh4 { 0%, 39% { opacity: 0; transform: translateY(8px); } 41%, 56% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes flPh5 { 0%, 56% { opacity: 0; transform: translateY(8px); } 58%, 76% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes flSt1 { 0%, 11% { opacity: 0; } 12.5%, 17% { opacity: 1; } 18.5%, 39% { opacity: 0; } 41%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes flSt2 { 0%, 17% { opacity: 0; } 18.5%, 25% { opacity: 1; } 26.5%, 39% { opacity: 0; } 41%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes flSt3 { 0%, 25% { opacity: 0; } 26.5%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
/* text on the lit tile turns white (white on #D93A18 = 4.6:1; ink would be 3.6:1) */
@keyframes flTx1 { 0%, 11% { color: var(--fold-ink); } 12.5%, 17% { color: #fff; } 18.5%, 39% { color: var(--fold-ink); } 41%, 56% { color: #fff; } 58%, 100% { color: var(--fold-ink); } }
@keyframes flTx2 { 0%, 17% { color: var(--fold-ink); } 18.5%, 25% { color: #fff; } 26.5%, 39% { color: var(--fold-ink); } 41%, 56% { color: #fff; } 58%, 100% { color: var(--fold-ink); } }
@keyframes flTx3 { 0%, 25% { color: var(--fold-ink); } 26.5%, 56% { color: #fff; } 58%, 100% { color: var(--fold-ink); } }
@keyframes flBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fold-loop .fl-a { animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
.fold-loop .fl-p0 { animation-name: flPh0; } .fold-loop .fl-p1 { animation-name: flPh1; } .fold-loop .fl-p2 { animation-name: flPh2; }
.fold-loop .fl-p3 { animation-name: flPh3; } .fold-loop .fl-p4 { animation-name: flPh4; } .fold-loop .fl-p5 { animation-name: flPh5; }
.fold-loop .fl-s1 i { animation: flSt1 10s ease-out infinite; } .fold-loop .fl-s1 > span { animation: flTx1 10s ease-out infinite; }
.fold-loop .fl-s2 i { animation: flSt2 10s ease-out infinite; } .fold-loop .fl-s2 > span { animation: flTx2 10s ease-out infinite; }
.fold-loop .fl-s3 i { animation: flSt3 10s ease-out infinite; } .fold-loop .fl-s3 > span { animation: flTx3 10s ease-out infinite; }
.fold-loop .fl-bar::before { animation: flBar 10s linear infinite; }
.fold-loop .fold-storyboard { display: none; }
@media (prefers-reduced-motion: reduce) { /* storyboard instead of the loop; rail shows all three steps */
  .fold-loop .fl-live, .fold-loop .fl-bar { display: none; }
  .fold-loop .fold-storyboard { display: grid; }
  .fold-loop .fl-a, .fold-loop .fl-step i, .fold-loop .fl-step > span, .fold-loop .fl-bar::before { animation: none; }
}

@media (min-width: 768px) {
  .fold-loop .fl-caps { min-height: 66px; }
  .fold-loop .fl-cap b { font-size: 32px; }
  .fold-loop .fl-cap span { font-size: 17px; }
  .fold-loop .fl-rail, .fold-loop .fl-bar, .fold-loop .fl-caps { max-width: 640px; margin-inline: auto; }
}

/* ============ Storyboard (reduced-motion fallback; also usable on its own) ============ */
.fold-storyboard { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fold-storyboard li { margin: 0; padding: 10px 10px 12px; background: var(--fold-card, #FFFFFF); }
.fold-storyboard .fb { max-width: 240px; margin-inline: auto; }
.fold-storyboard .sb-label { display: block; margin-top: 8px; font-style: italic; font-weight: 800; font-size: 14px; text-transform: uppercase; }
.fold-storyboard .sb-label [lang^="zh"] { font-style: normal; font-weight: 500; font-size: 13px; text-transform: none; color: var(--fold-ink2); }

/* ============ M3 Fold it yourself ============ */
.fold-scrub { --fold-ink: #F4F1E8; --fold-ink2: #B9B4A5; background: #1E201D; color: var(--fold-ink); }
.fold-scrub .fs-sticky { padding-bottom: 32px; }
.fold-scrub .fs-status { position: relative; min-height: 64px; margin-top: 12px; }
.fold-scrub .fs-no { display: block; font-style: italic; font-weight: 900; font-size: 14px; letter-spacing: .06em; color: #F26A4B; }
.fold-scrub .fs-step { display: block; margin-top: 2px; font-style: italic; font-weight: 900; font-size: 24px; text-transform: uppercase; }
.fold-scrub .fs-step [lang^="zh"] { font-style: normal; font-size: 16px; color: var(--fold-ink2); text-transform: none; }
.fold-scrub .fs-bike { position: relative; width: min(100% - 10px, 520px); margin: 4px auto 0; }
.fold-scrub .fs-bike::after { content: ""; position: absolute; top: 93.333%; left: -100vw; right: -100vw; height: 2px; background: #55594F; }
.fold-scrub .fs-controls { margin-top: 22px; max-width: 520px; margin-inline: auto; }
.fold-scrub .fs-range-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--fold-ink2); }
.fold-scrub .fs-range-row [data-fb-scrub-pct] { color: var(--fold-ink); font-variant-numeric: tabular-nums; }
.fold-scrub input[type="range"] { display: block; width: 100%; height: 44px; margin: 4px 0 0; accent-color: #D93A18; cursor: grab; background: transparent; }
.fold-scrub input[type="range"]:active { cursor: grabbing; }
.fold-scrub .fs-chips { display: flex; gap: 6px; margin-top: 12px; }
.fold-scrub .fs-chips button {
  flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; padding: 4px 6px; cursor: pointer; font: inherit; clip-path: var(--fold-slant);
  background: #2E312C; color: #F4F1E8; transition: background-color .3s;
}
.fold-scrub .fs-chips button b { font-style: italic; font-weight: 900; font-size: 15px; text-transform: uppercase; }
.fold-scrub .fs-chips button [lang^="zh"] { font-size: 12px; }
.fold-scrub .fs-chips button[aria-pressed="true"] { background: #D93A18; color: #FFFFFF; }
.fold-scrub .fs-play {
  display: block; width: 100%; min-height: 44px; margin-top: 12px; border: 1.5px solid #F4F1E8; background: transparent; color: #F4F1E8;
  cursor: pointer; font: inherit; font-style: italic; font-weight: 800; font-size: 14px;
}
.fold-scrub .fs-play [lang^="zh"] { font-style: normal; font-weight: 500; font-size: 12px; }
.fold-scrub button:focus-visible, .fold-scrub input:focus-visible { outline: 3px solid #F26A4B; outline-offset: 3px; }
.fold-scrub .fs-hint { display: none; }
.fold-scrub.fb-js .fs-hint--drag { display: block; }
.fold-scrub.fb-js.is-scroll .fs-hint--drag { display: none; }
.fold-scrub.fb-js.is-scroll .fs-hint--scroll { display: block; }
.fold-scrub:not(.fb-js) .fs-controls { display: none; } /* controls need JS; the drawing + text stay */
/* Scroll-scrub mode (fine pointer, JS, motion OK): 300vh track, sticky stage */
.fold-scrub.is-scroll { height: 300vh; }
.fold-scrub.is-scroll .fs-sticky {
  position: sticky; top: min(0px, 100vh - var(--fs-h, 100vh)); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 24px;
}
.fold-scrub.is-scroll .fold-head { padding-top: 0; }
@media (min-width: 900px) {
  .fold-scrub .fs-bike::after { left: -12%; right: -12%; }
  .fold-scrub .fs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-scrub .fs-range-row, .fold-scrub input[type="range"], .fold-scrub .fs-play { display: none; }
  .fold-scrub.fb-js .fs-hint--drag, .fold-scrub.fb-js.is-scroll .fs-hint--scroll { display: none; }
  .fold-scrub.fb-js .fs-hint--steps { display: block; }
  .fold-scrub .fs-chips button { transition: none; }
}

/* ============ M4 + M5 Ride scene ============ */
.fold-ride { background: var(--fold-paper2); }
.fold-ride .fr-scene { position: relative; height: 330px; margin-top: 20px; overflow: hidden; }
.fold-ride .fr-sun { position: absolute; left: calc(50% + 41px); top: 26px; width: 96px; height: 96px; border-radius: 50%; background: #C98A7E; opacity: .55; }
.fold-ride .fr-strip { position: absolute; left: 0; width: calc(100% + 390px); }
.fold-ride .fr-strip svg { display: block; width: 100%; height: 100%; }
.fold-ride .fr-sky { top: 60px; height: 130px; opacity: .22; }
.fold-ride .fr-mid { top: 120px; height: 100px; }
.fold-ride .fr-ground { position: absolute; left: 0; right: 0; top: 220px; bottom: 0; background: #1E201D; }
.fold-ride .fr-road { top: 272px; height: 5px; }
.fold-ride .fr-rider { position: absolute; left: max(12px, 50% - 200px); bottom: 94px; width: min(360px, 100% - 24px); }
.fold-ride .fr-wind { position: absolute; height: 3px; background: #1E201D; opacity: 0; }
.fold-ride .fr-w1 { left: 11.1%; top: 47.5%; width: 16.7%; }
.fold-ride .fr-w2 { left: 5.6%; top: 60%; width: 25%; }
.fold-ride .fr-w3 { left: 13.9%; top: 72.5%; width: 13.9%; }
@keyframes frDrift { to { transform: translateX(-390px); } }
@keyframes frWind { 0% { transform: translateX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-140px); opacity: 0; } }
.fold-ride .fr-sky { animation: frDrift 40s linear infinite; }
.fold-ride .fr-mid { animation: frDrift 9s linear infinite; }
.fold-ride .fr-road { animation: frDrift 1.4s linear infinite; }
.fold-ride .fr-w1 { animation: frWind 1.1s linear infinite; }
.fold-ride .fr-w2 { animation: frWind 1.1s .35s linear infinite; }
.fold-ride .fr-w3 { animation: frWind 1.1s .7s linear infinite; }
.fold-ride .fr-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 18px 0 0; padding: 0 0 28px; list-style: none; }
.fold-ride .fr-specs li { padding: 12px 12px 10px; background: var(--fold-paper); }
.fold-ride .fr-specs strong { display: block; font-family: var(--fold-cn); font-weight: 900; font-size: clamp(16px, 5vw, 26px); line-height: 1; white-space: nowrap; }
.fold-ride .fr-specs span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fold-ink2); }
.fold-ride .fr-specs span[lang^="zh"] { margin-top: 0; font-size: 12px; font-weight: 400; letter-spacing: 0; }
@media (min-width: 768px) {
  .fold-ride .fr-scene { height: 380px; }
  .fold-ride .fr-ground { top: 270px; }
  .fold-ride .fr-road { top: 322px; }
  .fold-ride .fr-sky { top: 110px; }
  .fold-ride .fr-mid { top: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-ride .fr-sky, .fold-ride .fr-mid, .fold-ride .fr-road, .fold-ride .fr-wind { animation: none; }
}

/* ============ M6 Lift into boot ============ */
.fold-carry { background: var(--fold-paper); padding-bottom: 28px; }
.fold-carry .fc-scene { position: relative; width: 100%; max-width: 520px; aspect-ratio: 390 / 300; margin: 12px auto 0; overflow: hidden; container-type: inline-size; }
.fold-carry .fc-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fold-carry .fc-lift { position: absolute; left: -5.128%; top: 50%; width: 46.154%; }
.fold-carry .fc-ground { position: absolute; left: 0; right: 0; top: 90%; height: 2px; background: var(--fold-line); }
.fold-carry .fc-cap { position: absolute; left: 5.128%; top: 92.5%; margin: 0; font-style: italic; font-weight: 800; font-size: max(12px, 3.4cqw); text-transform: uppercase; }
.fold-carry .fc-cap [lang^="zh"] { font-style: normal; font-weight: 500; }
.fold-carry .fc-c2 { opacity: 0; }
@keyframes fcLift {
  0%, 18% { transform: translate(0, 0) rotate(0deg); } 32% { transform: translate(51.111%, -100%) rotate(-10deg); }
  46%, 82% { transform: translate(95.556%, -55%) rotate(0deg); } 88% { transform: translate(95.556%, -55%); opacity: 1; }
  90% { opacity: 0; } 92% { transform: translate(0, 0); opacity: 0; } 96%, 100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes fcLid { 0%, 50% { transform: scaleY(1); } 58%, 74% { transform: scaleY(0); } 82%, 100% { transform: scaleY(1); } }
@keyframes fcDoor { 0%, 50% { transform: scaleY(0); } 58%, 74% { transform: scaleY(1); } 82%, 100% { transform: scaleY(0); } }
@keyframes fcCap1 { 0%, 18% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes fcCap2 { 0%, 46% { opacity: 0; } 50%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }
.fold-carry .fc-lift { animation: fcLift 8s cubic-bezier(.65, 0, .25, 1) infinite; }
.fold-carry .fc-lid { transform-origin: 0 108px; animation: fcLid 8s cubic-bezier(.65, 0, .25, 1) infinite; }
.fold-carry .fc-door { transform-origin: 0 104px; transform: scaleY(0); animation: fcDoor 8s cubic-bezier(.65, 0, .25, 1) infinite; }
.fold-carry .fc-c1 { animation: fcCap1 8s infinite; }
.fold-carry .fc-c2 { animation: fcCap2 8s infinite; }
@media (prefers-reduced-motion: reduce) { /* bike shown in the (open) boot */
  .fold-carry .fc-lift, .fold-carry .fc-lid, .fold-carry .fc-door, .fold-carry .fc-cap { animation: none; }
  .fold-carry .fc-lift { transform: translate(95.556%, -55%); }
  .fold-carry .fc-door { transform: scaleY(0); }
  .fold-carry .fc-c1 { opacity: 0; }
  .fold-carry .fc-c2 { opacity: 1; }
}

/* ============ M7 Flat ↔ standing ============ */
.fold-pose { display: flex; gap: 12px; align-items: stretch; margin-top: 20px; max-width: 520px; margin-inline: auto; }
.fold-pose .fp-btns { display: flex; flex-direction: column; gap: 6px; width: 42%; max-width: 170px; flex: none; }
.fold-pose button {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 70px; padding: 0 16px;
  border: 0; cursor: pointer; font: inherit; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background: var(--fold-paper2); color: var(--fold-ink);
}
.fold-pose button b { font-style: italic; font-weight: 900; font-size: 15px; text-transform: uppercase; }
.fold-pose button [lang^="zh"] { font-weight: 700; font-size: 16px; }
.fold-pose button[aria-pressed="true"] { background: var(--fold-ink); color: #FFFFFF; }
.fold-pose button:focus-visible { outline: 3px solid var(--fold-accent); outline-offset: 2px; }
.fold-pose .fp-panel { position: relative; flex: 1; min-width: 0; height: 146px; background: var(--fold-paper2); overflow: hidden; }
.fold-pose .fp-bike {
  position: absolute; left: -20px; top: 16px; width: 180px;
  transform-origin: 88px 112px; transition: transform .5s cubic-bezier(.65, 0, .25, 1);
}
.fold-pose[data-fb-pose="stand"] .fp-bike { transform: translate(4px, -38px) rotate(-90deg); }
.fold-pose .fb-shadow { transition: opacity .3s; }
.fold-pose[data-fb-pose="stand"] .fb-shadow { opacity: 0; } /* a sideways ground shadow reads wrong when standing */
.fold-pose .fp-ground { position: absolute; left: 0; right: 0; top: 128px; height: 2px; background: var(--fold-ink); }
@media (prefers-reduced-motion: reduce) { .fold-pose .fp-bike { transition: none; } }

/* ============ M8 Fold button icon ============ */
.fb-foldbtn {
  /* The slanted background lives on ::before so clip-path never clips the focus ring. */
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 20px 0 10px;
  background: transparent; color: #FFFFFF; text-decoration: none;
  font-family: Archivo, 'Noto Sans SC', sans-serif; font-style: italic; font-weight: 800; font-size: 16px;
}
.fb-foldbtn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sb-ink, #1E201D);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.fb-foldbtn:focus-visible { outline: 3px solid var(--sb-focus, #D93A18); outline-offset: 3px; }
.fb-foldbtn .fbb-icon { flex: none; width: 90px; height: 60px; overflow: hidden; }
.fb-foldbtn .fbb-icon .fb { width: 90px; }
.fb-foldbtn [lang^="zh"] { font-family: 'Noto Sans SC', sans-serif; font-style: normal; font-weight: 500; font-size: 13px; }

/* ============ M9 Wheel loader ============ */
.fb-loader { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: #1E201D; }
.fb-loader svg { display: block; width: var(--fb-loader-size, 64px); height: var(--fb-loader-size, 64px); animation: fbSpin 1s linear infinite; }
.fb-loader .fbl-text { font-family: Archivo, 'Noto Sans SC', sans-serif; font-style: italic; font-weight: 800; font-size: 13px; letter-spacing: .06em; }
.fb-loader .fbl-text [lang^="zh"] { font-style: normal; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .fb-loader svg { animation: none; } }

/* ============ M10 Ride-along progress ============ */
.fb-progress {
  --fb-p: 0;
  position: fixed; left: 0; right: 0; top: var(--fb-progress-top, 0px); z-index: var(--fb-progress-z, 60);
  height: 4px; background: var(--fb-progress-track, #D3CEBF); pointer-events: none;
}
.fb-progress .fbp-fill { height: 100%; background: #D93A18; transform: scaleX(var(--fb-p)); transform-origin: 0 50%; }
.fb-progress .fbp-lane { position: absolute; left: 0; right: 58px; top: 6px; }
.fb-progress .fbp-mover { width: 100%; transform: translateX(calc(var(--fb-p) * 100%)); }
.fb-progress .fbp-mover .fb { width: 58px; }
.fb-progress:not(.is-riding) .fb * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fb-progress .fbp-lane { display: none; } } /* plain bar */

/* ============ M11 Slant page change (opt-in: <html class="fb-vt">) ============ */
@view-transition { navigation: auto; }
html:not(.fb-vt)::view-transition-group(root) { animation: none; }
html:not(.fb-vt)::view-transition-old(root), html:not(.fb-vt)::view-transition-new(root) { animation: none; }
/* A 15° vermilion band sweeps left → right: old page is wiped off, then the new page wipes on behind it. */
@keyframes fbVtOut {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, -30vh 100%); }
  to { clip-path: polygon(calc(100% + 30vh) 0, 100% 0, 100% 100%, 100% 100%); }
}
@keyframes fbVtIn {
  from { clip-path: polygon(0 0, 0 0, -30vh 100%, 0 100%); }
  to { clip-path: polygon(0 0, calc(100% + 30vh) 0, 100% 100%, 0 100%); }
}
@media (prefers-reduced-motion: no-preference) {
  html.fb-vt::view-transition { background: #D93A18; }
  html.fb-vt::view-transition-old(root) { animation: fbVtOut .32s cubic-bezier(.65, 0, .25, 1) both; }
  html.fb-vt::view-transition-new(root) { animation: fbVtIn .34s cubic-bezier(.65, 0, .25, 1) .26s both; }
}
@media (prefers-reduced-motion: reduce) { /* cross-fade fallback */
  html.fb-vt::view-transition-old(root), html.fb-vt::view-transition-new(root) { animation-duration: .25s; }
}