/* ============================================================
   SCREEN: trip-moto, "Scenic Rest Stop" (Motorbike break scene)
   Pairs with js/screens/trip-moto.js.
   ============================================================ */

.trip-moto { display: flex; flex-direction: column; gap: 16px; }

/* ---------- header ---------- */

/* every screen's title stack (kicker → h1 → subtitle) uses the same 6px gap:
   boarding, vote, train, car, plane and moto were at 6 / 8 / 4 / n.a. / 4 / 12. */
.trip-moto-head { display: flex; flex-direction: column; gap: 6px; }

.trip-moto-head h1 { font-size: clamp(22px, 3vw, 30px); color: var(--ink); }
.trip-moto-sub { color: var(--ink-soft); font-weight: 700; font-size: 14.5px; }

/* ---------- route stepper ---------- */

.trip-moto-route { display: flex; flex-direction: column; gap: 12px; }

.trip-moto-stepper { display: flex; align-items: center; gap: 4px; max-width: 340px; }

.trip-moto-step {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900; font-size: 13.5px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--muted);
  transition: transform .25s ease-out, background .25s ease-out, border-color .25s ease-out, color .25s ease-out;
}
.trip-moto-step.done {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 16%, var(--card));
  color: var(--success);
}
.trip-moto-step.active {
  border-color: var(--success);
  background: var(--success);
  color: var(--accent-ink);
  transform: scale(1.15);
  box-shadow: var(--shadow-1);
}

.trip-moto-line { flex: 1 1 auto; height: 3px; min-width: 10px; border-radius: 999px; background: var(--line); }
.trip-moto-line.done { background: var(--success); }

.trip-moto-route-label { font-weight: 800; font-size: 13px; color: var(--ink-soft); }

/* ---------- the scene ---------- */

.trip-moto-scene {
  min-height: clamp(320px, 42vw, 460px);
  font-size: clamp(11px, 1.6vw, 17px);

  --scene-sky-a: #BFE3F6;
  --scene-sky-b: #FDEAD9;
  --scene-lake: #6FA9D6;
  --scene-lake-deep: #35699C;
  --scene-wood: #A97640;
  --scene-wood-dark: #7A4F29;
  --scene-tire: #2E2B27;
  --scene-tire-rim: #D9D2C2;
  --scene-grass: color-mix(in srgb, var(--success) 55%, var(--card) 45%);
  --scene-grass-blade: color-mix(in srgb, var(--success) 60%, var(--ink) 15%);
  --scene-snow: #FFFFFF;
  --scene-shimmer: rgba(255, 255, 255, .55);
  --scene-sign-ink: #FFFFFF;
  --scene-hair: #3B2A1E;
  --scene-hair-hi: #5A4028;
  --scene-skin: #E7B78C;
  --scene-jacket: #B5652F;
  --scene-jacket-hi: #D0854F;
  --scene-shadow: rgba(61, 41, 15, .22);
  --scene-flash: #FFFFFF;
  --scene-flash-peak: .85;
}

:root[data-theme="dark"] .trip-moto-scene {
  --scene-sky-a: #2A2555;
  --scene-sky-b: #3D2A4B;
  --scene-lake: #33517F;
  --scene-lake-deep: #182742;
  --scene-wood: #6E4A2C;
  --scene-wood-dark: #472E18;
  --scene-tire: #17151F;
  --scene-tire-rim: #46405F;
  /* pure white peaks and glare read as neon at night, dim them (D-002) */
  --scene-snow: #C9C2E8;
  --scene-shimmer: rgba(200, 192, 232, .3);
  --scene-sign-ink: #EFECFF;
  --scene-hair: #A9927A;
  --scene-hair-hi: #C4B096;
  --scene-skin: #D1A17A;
  --scene-jacket: #7A4F32;
  --scene-jacket-hi: #96684A;
  --scene-shadow: rgba(0, 0, 0, .38);
  --scene-grass-blade: color-mix(in srgb, var(--success) 55%, var(--card) 15%);
  /* a full-white 85% flash across a night scene is a strobe, not a shutter:
     tint it to the theme's own light and halve the peak (D-002) */
  --scene-flash: #EFECFF;
  --scene-flash-peak: .42;
}

.trip-moto-art { overflow: hidden; }

/* mountVoxel() appends its canvas as the LAST child of .scene-frame, with no
   z-index of its own (engine.js). Inside the isolated stacking context of
   .scene-frame (components.css), it would otherwise paint over the timer pill
   and the camera flash, both of which also have no z-index today. Same pattern
   as trip-train.css (D-013 rule 2), extended to .trip-moto-flash which is not
   a .scene-float but still needs to stay visible above the canvas so the
   photo effect whitens the whole frame, canvas included. */
.trip-moto-scene > .scene-float,
.trip-moto-scene > .trip-moto-flash {
  z-index: 2;
}

/* the voxel canvas (engine.js: <canvas class="scene-canvas">) bakes
   synchronously (200-340ms, D-012) inside mountVoxel(); trip-moto.js defers
   the mount itself (rAF + setTimeout 0) and only adds .is-baked to the frame
   once mountVoxel() has actually returned, by which point the canvas already
   holds real painted pixels (engine.js's mountVoxel ends with the synchronous
   `rebuild(); start();`). Until then this keeps the canvas invisible so the
   existing CSS scene above (D-013 rule 1: kept as a permanent fallback) shows
   through and doubles as the masking placeholder for the bake. */
.trip-moto-scene .scene-canvas {
  opacity: 0;
  transition: opacity .22s cubic-bezier(0, 0, 0.2, 1);
}
.trip-moto-scene.is-baked .scene-canvas {
  opacity: 1;
}

.trip-moto-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--scene-sky-a) 0%, var(--scene-sky-b) 62%, var(--scene-sky-b) 100%);
}

.trip-moto-sun {
  position: absolute; top: 6%; right: 10%; width: 15%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 85%, transparent), transparent 72%);
}

.trip-moto-cloud {
  position: absolute; background: var(--card); border-radius: 50%; opacity: .8;
}
.trip-moto-cloud-a { top: 10%; left: 8%; width: 15%; height: 6.5%; }
.trip-moto-cloud-a::after {
  content: ""; position: absolute; left: 32%; top: -55%; width: 55%; height: 130%;
  background: inherit; border-radius: 50%;
}
.trip-moto-cloud-b { top: 17%; left: 58%; width: 10%; height: 5%; }

.trip-moto-mountain { position: absolute; left: -6%; right: -6%; }
.trip-moto-mountain-back {
  bottom: 30%; height: 34%;
  background: var(--bg-2);
  opacity: .85;
  clip-path: polygon(0% 100%, 12% 55%, 28% 78%, 42% 32%, 58% 68%, 74% 24%, 88% 60%, 100% 100%);
}
.trip-moto-mountain-front {
  bottom: 26%; height: 30%;
  background: var(--panel);
  clip-path: polygon(0% 100%, 10% 70%, 26% 42%, 40% 75%, 56% 22%, 70% 62%, 86% 36%, 100% 100%);
}

.trip-moto-snow {
  position: absolute; width: 7%; aspect-ratio: 1.5;
  background: var(--scene-snow);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  opacity: .95;
}
.trip-moto-snow-a { top: 44%; left: 52%; }
.trip-moto-snow-b { top: 40%; left: 66%; width: 5%; }

.trip-moto-lake {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, var(--scene-lake), var(--scene-lake-deep));
  border-radius: 50% 50% 0 0 / 14px 14px 0 0;
  overflow: hidden;
}
/* a soft horizontal glow plus a few irregular, differently-sized glints:
   the old evenly-repeating diagonal stripes read as a fence, not water.
   Static (D-doctrine: this fallback art sits under the voxel canvas the
   instant it bakes, so an infinite loop here only ever ran for the
   fraction of a second before the canvas covers it. No animation left
   to gate: reduced-motion has nothing to stop). */
.trip-moto-lake-shimmer {
  position: absolute; inset: 0; opacity: .5;
  background:
    linear-gradient(100deg, transparent 6%, var(--scene-shimmer) 50%, transparent 90%),
    radial-gradient(ellipse 24% 38% at 76% 28%, color-mix(in srgb, var(--scene-shimmer) 85%, transparent), transparent 72%),
    radial-gradient(ellipse 16% 24% at 28% 64%, color-mix(in srgb, var(--scene-shimmer) 70%, transparent), transparent 75%),
    radial-gradient(ellipse 11% 17% at 52% 22%, color-mix(in srgb, var(--scene-shimmer) 60%, transparent), transparent 78%);
}

/* soft highlight: the lake's reflection of the sky/mountains above it, static
   for the same reason as the shimmer above. */
.trip-moto-lake-glow {
  position: absolute; top: 6%; left: 18%; width: 48%; height: 55%;
  background: radial-gradient(ellipse at center, var(--scene-shimmer), transparent 72%);
  opacity: .4;
  filter: blur(2px);
}

.trip-moto-shore {
  position: absolute; left: 0; right: 0; bottom: 27%; height: 8%;
  background: var(--scene-grass);
  opacity: .9;
}

/* small tufts of grass along the shore. Static: this fallback art sits under
   the voxel canvas the instant it bakes, so a sway loop here only ever ran
   for the fraction of a second before the canvas covers it for good. */
.trip-moto-grass { position: absolute; left: 2%; right: 2%; bottom: 26%; height: 10%; pointer-events: none; }
.trip-moto-grass-tuft {
  position: absolute; bottom: 0; width: 3px; height: 1.2em;
  background: var(--scene-grass-blade);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
}
.trip-moto-grass-tuft::before,
.trip-moto-grass-tuft::after {
  content: ""; position: absolute; bottom: 0; left: 50%; width: 3px; height: 78%;
  background: inherit; border-radius: inherit;
  transform: translateX(-50%) rotate(-18deg);
}
.trip-moto-grass-tuft::after { transform: translateX(-50%) rotate(18deg); }
.trip-moto-grass-tuft:nth-child(1) { left: 51%; }
.trip-moto-grass-tuft:nth-child(2) { left: 76%; height: 1em; }
.trip-moto-grass-tuft:nth-child(3) { left: 92%; height: 1.05em; }

/* ---------- wooden sign (raised fully into frame, no longer bottom-cropped) ---------- */

.trip-moto-sign {
  position: absolute; left: 2%; bottom: 18%; width: 12%;
  display: flex; flex-direction: column; align-items: center;
}
.trip-moto-sign-board {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(180deg, var(--scene-wood), var(--scene-wood-dark));
  border: 2px solid var(--scene-wood-dark);
  border-radius: 6px;
  padding: 4px 5px;
  box-shadow: var(--shadow-1);
}
.trip-moto-sign-post {
  width: 16%; height: 1.4em;
  background: var(--scene-wood-dark);
  border-radius: 2px;
  margin-top: -2px;
}
.trip-moto-sign-jp { font-size: .78em; font-weight: 900; color: var(--scene-sign-ink); white-space: nowrap; }
.trip-moto-sign-en { font-size: .55em; font-weight: 800; color: var(--scene-sign-ink); opacity: .92; white-space: nowrap; }

/* ---------- pergola + vine ---------- */

.trip-moto-pergola { position: absolute; left: 13%; bottom: 19%; width: 36%; height: 50%; }

.trip-moto-pergola-post {
  position: absolute; bottom: 0; width: 6%; height: 92%;
  background: linear-gradient(180deg, var(--scene-wood), var(--scene-wood-dark));
  border-radius: 3px;
}
.trip-moto-pergola-post-l { left: 3%; }
.trip-moto-pergola-post-r { right: 3%; }

.trip-moto-pergola-beam {
  position: absolute; top: 8%; left: 0; right: 0; height: 7%;
  background: var(--scene-wood-dark);
  border-radius: 3px;
}

.trip-moto-pergola-slats {
  position: absolute; top: 0; left: -3%; right: -3%; height: 11%;
  display: flex; gap: 5%;
}
.trip-moto-pergola-slats span {
  flex: 1; height: 100%;
  background: var(--scene-wood);
  border-radius: 2px;
  transform: skewX(-8deg);
}

.trip-moto-vine {
  position: absolute; top: 5%; left: -2%; right: -2%;
  font-size: 1.15em; line-height: 1; letter-spacing: 1px;
  text-align: justify;
  opacity: .95;
}

/* ---------- bench + traveler ---------- */

.trip-moto-bench { position: absolute; left: 16%; bottom: 6%; width: 66%; height: 30%; }

.trip-moto-bench-back {
  position: absolute; left: 4%; bottom: 42%; width: 92%; height: 20%;
  background: linear-gradient(180deg, var(--scene-wood), var(--scene-wood-dark));
  border-radius: 4px 4px 0 0;
}
.trip-moto-bench-seat {
  position: absolute; left: 0; bottom: 28%; width: 100%; height: 16%;
  background: var(--scene-wood);
  border-radius: 4px;
  box-shadow: 0 2px 0 var(--scene-wood-dark);
}
.trip-moto-bench-leg {
  position: absolute; bottom: 0; width: 7%; height: 30%;
  background: var(--scene-wood-dark);
  border-radius: 2px;
}
.trip-moto-bench-leg-l { left: 8%; }
.trip-moto-bench-leg-r { right: 8%; }

/* seated silhouette, viewed from behind, warm jacket + hair, no face needed.
   Head is sized off the traveler's HEIGHT (34-40% of it), not a fixed em width,
   so it reads as a head on shoulders rather than a dark ball on a flat bust. */
.trip-moto-traveler { position: absolute; left: 27%; bottom: 40%; width: 2.3em; height: 2.7em; }
.trip-moto-traveler-body {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 92%; height: 68%;
  background: linear-gradient(165deg, var(--scene-jacket-hi), var(--scene-jacket));
  border-radius: 40% 40% 14% 14% / 34% 34% 10% 10%;
  box-shadow: var(--shadow-1);
}
/* jacket collar: wider than the head, so it still peeks past the head's
   sides, reads as shoulders wearing a collar, not a disc floating loose. */
.trip-moto-traveler-collar {
  position: absolute; left: 50%; bottom: 60%; transform: translateX(-50%);
  width: 54%; height: 14%;
  background: linear-gradient(180deg, var(--scene-jacket-hi), var(--scene-jacket));
  border-radius: 50% 50% 16% 16% / 70% 70% 16% 16%;
}
/* nape sliver: mostly covered by hair, visible at the sides beneath it,
   the "seen from behind, seated" cue a flat disc would otherwise erase. */
.trip-moto-traveler-neck {
  position: absolute; left: 50%; bottom: 62%; transform: translateX(-50%);
  width: 30%; height: 12%;
  background: var(--scene-skin);
  border-radius: 40% 40% 0 0;
}
.trip-moto-traveler-head {
  position: absolute; left: 50%; bottom: 59%; transform: translateX(-50%);
  width: auto; height: 38%; aspect-ratio: 1;
  background: linear-gradient(165deg, var(--scene-hair-hi), var(--scene-hair));
  border-radius: 46% 46% 40% 40% / 58% 58% 32% 32%;
  box-shadow: var(--shadow-1);
}

.trip-moto-coffee { position: absolute; right: 10%; bottom: 50%; font-size: 1.05em; }

/* Static: this fallback art sits under the voxel canvas the instant it
   bakes, so a puff loop here only ever ran for the fraction of a second
   before the canvas covers it for good. */
.trip-moto-steam {
  position: absolute; top: -55%; left: 40%;
  width: 3px; height: 9px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent-ink) 70%, transparent);
}
.trip-moto-steam-2 { left: 58%; }

/* helmet + backpack set down beside the traveler, not on the bike */
.trip-moto-helmet-prop { position: absolute; right: 10%; bottom: 0; font-size: 1.4em; transform: rotate(-12deg); }
.trip-moto-backpack-prop { position: absolute; right: -4%; bottom: -2%; font-size: 1.6em; }

/* ---------- parked motorbike, grounded on the grass beside the pergola, a
   three-quarter-rear read: bigger rear wheel + seat/tank near the bench,
   an inclined front fork reaching down to a smaller front wheel turned
   toward the view. Bottom sits inside the shore/grass band, not the lake. ---------- */

.trip-moto-moto { position: absolute; left: 52%; bottom: 29%; width: 25%; height: 21%; }

.trip-moto-moto-shadow {
  position: absolute; left: -6%; right: -2%; bottom: -16%; height: 24%;
  background: var(--scene-shadow);
  border-radius: 50%;
  filter: blur(1.5px);
}

.trip-moto-moto-wheel {
  position: absolute; bottom: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--scene-tire);
  box-shadow: inset 0 0 0 2px var(--scene-shadow);
}
/* rim: a faint spoked ring lighter than the tire, the piece a flat black
   disc was missing entirely */
.trip-moto-moto-wheel::before {
  content: "";
  position: absolute; inset: 20%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    var(--scene-tire-rim) 0deg 9deg,
    color-mix(in srgb, var(--scene-tire-rim) 45%, var(--scene-tire) 25%) 9deg 30deg);
}
.trip-moto-moto-wheel::after {
  content: "";
  position: absolute; inset: 42%;
  border-radius: 50%;
  background: var(--scene-tire);
}
.trip-moto-moto-wheel-back { left: 0; width: 46%; }
.trip-moto-moto-wheel-front { right: 0; width: 35%; }

.trip-moto-moto-fender {
  position: absolute; left: -4%; width: 54%; bottom: 30%; height: 22%;
  background: linear-gradient(180deg, var(--scene-tire-rim), var(--scene-tire));
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
}
.trip-moto-moto-tail {
  position: absolute; left: 16%; width: 40%; bottom: 26%; height: 16%;
  background: var(--scene-tire);
  border-radius: 8px 12px 4px 4px;
}
.trip-moto-moto-exhaust {
  position: absolute; left: 20%; width: 42%; bottom: 8%; height: 5%;
  background: linear-gradient(180deg, var(--scene-tire-rim), var(--scene-tire));
  border-radius: 999px;
}
.trip-moto-moto-engine {
  position: absolute; left: 52%; width: 24%; bottom: 12%; height: 26%;
  background: var(--scene-tire);
  border-radius: 4px 10px 10px 4px;
}
/* front fork: a clip-path strut rather than a rotated bar, so the lean is set
   by two edges directly (top tucked under the tank, bottom at the front
   wheel's axle) instead of trigonometry that drifts with the wrapper's aspect */
.trip-moto-moto-fork {
  position: absolute; left: 58%; right: 12%; top: 2%; bottom: 6%;
  background: linear-gradient(115deg, var(--scene-tire-rim) 0%, var(--scene-tire) 40%);
  clip-path: polygon(5% 0%, 38% 0%, 95% 100%, 62% 100%);
}
.trip-moto-moto-tank {
  position: absolute; left: 42%; width: 32%; bottom: 38%; height: 32%;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--warm) 78%, var(--gold) 22%),
    var(--warm) 55%,
    color-mix(in srgb, var(--warm) 70%, var(--ink) 30%));
  border-radius: 55% 45% 35% 45% / 65% 60% 35% 40%;
  box-shadow: var(--shadow-1);
}
.trip-moto-moto-seat {
  position: absolute; left: 14%; width: 40%; bottom: 44%; height: 12%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--scene-tire) 75%, var(--scene-tire-rim) 25%),
    var(--scene-tire));
  border-radius: 10px 16px 6px 6px;
}
.trip-moto-moto-handlebar {
  position: absolute; left: 50%; width: 36%; bottom: 86%; height: 6%;
  background: var(--scene-tire);
  border-radius: 999px;
  transform: rotate(-8deg);
}
.trip-moto-moto-headlight {
  position: absolute; right: 5%; width: 13%; aspect-ratio: 1; bottom: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    color-mix(in srgb, var(--gold) 85%, var(--scene-snow) 18%),
    var(--gold) 60%,
    color-mix(in srgb, var(--gold) 60%, var(--ink) 20%) 100%);
  box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 65%, transparent), var(--shadow-1);
}

/* ---------- little life ---------- */
/* Static: this fallback art sits under the voxel canvas the instant it
   bakes, covered for good within the fraction of a second the bake takes. */
.trip-moto-butterfly { position: absolute; top: 28%; left: 58%; font-size: 1.3em; }
.trip-moto-firefly { position: absolute; top: 46%; left: 80%; font-size: .95em; }

/* ---------- floating break timer ---------- */

.trip-moto-timer-float {
  top: 12px; right: 12px;
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800;
  color: var(--ink);
}
.trip-moto-timer-dot { color: var(--success); animation: trip-moto-pulse 1.6s ease-in-out infinite; }
@keyframes trip-moto-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* the label rides the shared .kicker so the float matches the train/car/plane */
.trip-moto-timer-label { flex: none; }

/* ---------- camera flash ---------- */

.trip-moto-flash {
  position: absolute; inset: 0;
  background: var(--scene-flash);
  opacity: 0;
  pointer-events: none;
}
.trip-moto-flash.flashing { animation: trip-moto-flash-pop .5s ease-out; }
@keyframes trip-moto-flash-pop {
  0% { opacity: var(--scene-flash-peak); }
  100% { opacity: 0; }
}

/* ---------- culture / photo cards ---------- */

.trip-moto-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.trip-moto-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.trip-moto-card p:not(.kicker) { margin: 0; color: var(--ink-soft); font-weight: 600; font-size: 14px; line-height: 1.45; }
.trip-moto-card .btn { align-self: flex-start; }

/* ---------- footer ---------- */

.trip-moto-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.trip-moto-footer .btn { flex: 1 1 200px; }
.trip-moto-footer .btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- responsive ---------- */

@media (max-width: 560px) {
  .trip-moto-stepper { max-width: 100%; }
  .trip-moto-cards { grid-template-columns: 1fr; }
  .trip-moto-footer .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* the only infinite loop left on this screen: everything else in the CSS
     fallback art was static already, sitting under the voxel canvas the
     instant it bakes. */
  .trip-moto-timer-dot { animation: none; }
  /* the global net (base.css) clamps transition-duration to .01ms already, but
     never touches a residual transition-delay; this screen sets none explicitly
     on its one JS-gated reveal, so the canvas appears the instant .is-baked
     lands, no fade, no residual delay left to the net (same reasoning as
     shop.css's equivalent rule). */
  .trip-moto-scene .scene-canvas {
    transition: none;
  }
}