/* ============================================================
   trip-car : Italy road trip scene. Prefixed .trip-car-*.
   Local scene tokens (--scene-*) compose only from tokens.css vars.

   Depth order (back → front): sky/sea horizon → cliff + tiled-roof
   village (median right) → sinuous coastal road with centerline
   (dominant, foreground) → car on the road → hedge + flowers +
   picnic (extreme foreground).
   ============================================================ */

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

/* ---------- head : kicker + title + one subtitle line ---------- */

.trip-car-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.trip-car-title h1 {
  font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.3px; margin-top: 4px;
  display: flex; align-items: center; gap: 10px;
}
.trip-car-title h1 .flag-lg { box-shadow: inset 0 0 0 1px var(--line-hairline), var(--shadow-1); }
.trip-car-sub { color: var(--ink-soft); font-weight: 700; font-size: 14px; margin-top: 4px; }

.trip-car-vote { padding: 20px; flex: 0 0 auto; }
.trip-car-vote-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 800; font-size: 14.5px; margin-top: 8px;
}
.trip-car-vote-mine { color: var(--blue); font-size: 18px; }
.trip-car-vote-other { color: var(--warm); font-size: 18px; }

/* ---------- scene tokens ---------- */

.trip-car-scene {
  /* sky → sea horizon */
  --scene-sky-a: var(--blue-soft);
  --scene-sky-b: var(--gold-soft);
  --scene-sea: var(--blue);
  /* rolling coastal hillside that fills most of the frame */
  --scene-hill-a: color-mix(in srgb, var(--gold-soft) 55%, var(--accent-soft) 45%);
  --scene-hill-b: color-mix(in srgb, color-mix(in srgb, var(--accent) 65%, var(--gold) 35%) 78%, var(--ink) 22%);
  --scene-cliff: color-mix(in srgb, color-mix(in srgb, var(--warm) 40%, var(--gold) 60%) 76%, var(--ink) 24%);
  --scene-village-wall: color-mix(in srgb, var(--panel) 82%, var(--gold) 18%);
  --scene-village-roof: color-mix(in srgb, var(--warm) 62%, var(--gold) 38%);
  --scene-road: color-mix(in srgb, var(--ink) 46%, var(--muted) 54%);
  --scene-road-edge: color-mix(in srgb, var(--card) 72%, var(--gold) 28%);
  --scene-road-line: var(--card);
  --scene-sun: var(--gold);
  --scene-grass: color-mix(in srgb, var(--accent) 82%, var(--ink) 18%);
  --scene-flower: var(--warm);
  --scene-picnic: color-mix(in srgb, var(--gold) 55%, var(--warm) 45%);

  min-height: clamp(360px, 42vw, 480px);
}

[data-theme="dark"] .trip-car-scene {
  /* softened sunset : indigo + rose, never neon */
  --scene-sky-a: var(--violet-soft);
  --scene-sky-b: var(--warm-soft);
  --scene-sea: color-mix(in srgb, var(--blue) 62%, var(--ink) 38%);
  --scene-hill-a: color-mix(in srgb, var(--violet) 34%, var(--ink) 66%);
  --scene-hill-b: color-mix(in srgb, color-mix(in srgb, var(--blue) 42%, var(--ink) 58%) 82%, var(--ink) 18%);
  --scene-cliff: color-mix(in srgb, var(--warm) 36%, var(--ink) 64%);
  --scene-village-wall: color-mix(in srgb, var(--card) 68%, var(--violet) 32%);
  --scene-village-roof: color-mix(in srgb, var(--warm) 56%, var(--ink) 44%);
  --scene-road: color-mix(in srgb, var(--ink) 58%, var(--muted) 42%);
  --scene-road-edge: color-mix(in srgb, var(--card) 42%, var(--violet) 58%);
  --scene-road-line: color-mix(in srgb, var(--card) 62%, transparent);
  --scene-sun: color-mix(in srgb, var(--warm) 55%, var(--gold) 45%);
  --scene-grass: color-mix(in srgb, var(--blue) 32%, var(--ink) 68%);
  --scene-flower: color-mix(in srgb, var(--warm) 70%, var(--violet) 30%);
  --scene-picnic: color-mix(in srgb, var(--gold) 42%, var(--ink) 58%);
}

.trip-car-scene .scene-art {
  background: linear-gradient(180deg,
    var(--scene-sky-a) 0%, var(--scene-sky-b) 18%, var(--scene-sea) 27%,
    var(--scene-hill-a) 35%, var(--scene-hill-b) 100%);
}

/* ---------- voxel scene mount (ui-fluide pass, layer 1 / D-022 pilot) ---------- */

/* D-013 rule 2: the voxel canvas (engine.js appends it as the LAST child of
   .trip-car-scene) would otherwise sit after, and so visually on top of,
   .trip-car-timer in DOM order (both start with an unset z-index). Re-raise
   the float explicitly so it stays readable over the canvas once mounted,
   same fix as trip-plane.css. */
.trip-car-scene > .scene-float {
  z-index: 2;
}

/* The voxel canvas (engine.js: <canvas class="scene-canvas">) bakes
   synchronously (200-340ms, D-012) inside mountVoxel(); trip-car.js defers
   the mount itself (rAF + setTimeout 0) and only adds .is-baked to the frame
   once mountVoxel() has actually returned -- by then the canvas already
   holds real painted pixels (engine.js's mountVoxel ends with the
   synchronous `rebuild(); start();`). Until .is-baked lands, this rule keeps
   the canvas invisible so the pre-existing CSS scene above (.scene-art,
   D-013 rule 1, already token-based) shows through as the placeholder --
   no separate --trip-car-placeholder gradient needed. */
.trip-car-scene .scene-canvas {
  opacity: 0;
  transition: opacity .22s cubic-bezier(0, 0, 0.2, 1);
}
.trip-car-scene.is-baked .scene-canvas {
  opacity: 1;
}
/* D-031 : car.js appelle V.sky(...), le bake peint donc un ciel opaque sur
   tout le canvas (paintSky() dans engine.js remplit canvas.width x height
   entier), qui couvre deja completement .scene-art (meme boite, inset:0,
   z-index -1 dans components.css). Le decor CSS de secours (soleil, nuages,
   reflet de mer, village, route, panneau, hedge, pique-nique, fleurs) ne se
   voit donc plus une fois baked, mais continuait de tourner en boucle
   invisible : display:none l'arrete net, sans toucher au rendu puisqu'il
   etait deja masque par le canvas opaque. */
.trip-car-scene.is-baked .scene-art {
  display: none;
}

/* ---------- sky layer : sun, clouds, sea glint (depth 1) ---------- */

.trip-car-sun {
  position: absolute; top: 6%; right: 14%;
  width: clamp(38px, 7vw, 62px); height: clamp(38px, 7vw, 62px);
  border-radius: 50%;
  background: var(--scene-sun);
  box-shadow: 0 0 42px 7px color-mix(in srgb, var(--scene-sun) 52%, transparent);
}

.trip-car-cloud {
  position: absolute;
  height: clamp(7px, 1.1vw, 11px); border-radius: 999px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  animation: trip-car-cloud-drift 34s linear infinite;
}
.trip-car-cloud-1 { top: 8%; left: -18%; width: clamp(36px, 6vw, 60px); }
.trip-car-cloud-2 { top: 16%; left: -34%; width: clamp(24px, 4vw, 42px); animation-duration: 46s; animation-delay: -16s; }
@keyframes trip-car-cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(680%); }
}

.trip-car-sea-glint {
  position: absolute; left: 0; right: 0; top: 19%; height: 11%;
  background: repeating-linear-gradient(100deg,
    color-mix(in srgb, var(--scene-sun) 65%, var(--card) 35%) 0 1%, transparent 1% 6.5%);
  opacity: .3;
  animation: trip-car-glint 4.5s ease-in-out infinite;
}
@keyframes trip-car-glint {
  0%, 100% { opacity: .18; transform: translateX(0); }
  50% { opacity: .48; transform: translateX(2%); }
}

/* ---------- cliff + tiled-roof village : median right (depth 2) ---------- */

.trip-car-cliff { position: absolute; background: var(--scene-cliff); }

.trip-car-cliff-r {
  right: 0; top: 13%; width: 42%; height: 45%;
  clip-path: polygon(100% 0, 100% 100%, 8% 88%, 0 52%, 38% 18%, 74% 0);
  opacity: .95;
}
.trip-car-cliff-l {
  left: 0; bottom: 0; width: 26%; height: 24%;
  clip-path: polygon(0 0, 46% 10%, 100% 42%, 100% 100%, 0 100%);
  opacity: .8;
}

.trip-car-village {
  position: absolute; left: 61%; top: 15%; width: 27%; height: 21%;
}
.trip-car-house {
  position: absolute; bottom: 0;
  width: clamp(15px, 2.5vw, 25px); height: clamp(18px, 2.8vw, 27px);
  background: var(--scene-village-wall);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--scene-village-roof) 35%, transparent);
}
.trip-car-house::before {
  content: ""; position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 9px solid var(--scene-village-roof);
}
.trip-car-house-1 { left: 0; height: clamp(20px, 3.2vw, 32px); }
.trip-car-house-2 { left: 32%; height: clamp(16px, 2.4vw, 24px); }
.trip-car-house-3 { left: 58%; height: clamp(22px, 3.4vw, 34px); }
.trip-car-tower {
  position: absolute; bottom: 0; right: 0;
  width: clamp(8px, 1.3vw, 13px); height: clamp(28px, 4.4vw, 44px);
  background: var(--scene-village-wall);
  border-radius: 2px 2px 0 0;
}
.trip-car-tower::before {
  content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 8px solid var(--scene-village-roof);
}

/* ---------- road : dominant sinuous coastal road (depth 3, foreground) ---------- */

.trip-car-road { position: absolute; inset: 0; width: 100%; height: 100%; }

.trip-car-road-verge { stroke: var(--scene-road-edge); stroke-width: 19.5; }
.trip-car-road-surface { stroke: var(--scene-road); stroke-width: 14; }
.trip-car-road-marking {
  stroke: var(--scene-road-line); stroke-width: .9;
  stroke-dasharray: 3 3.2;
  animation: trip-car-dash 1.2s linear infinite;
}
@keyframes trip-car-dash { to { stroke-dashoffset: -6.2; } }

/* ---------- destination sign, roadside ---------- */

.trip-car-sign {
  position: absolute; left: 63%; top: 29%;
  display: flex; flex-direction: column; align-items: center;
  animation-duration: 5s;
}
.trip-car-sign-post {
  width: 4px; height: 24px;
  background: color-mix(in srgb, var(--ink) 55%, var(--muted) 45%);
  border-radius: 2px;
}
.trip-car-sign-board {
  margin-top: -2px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  padding: 7px 11px;
  font-size: 11.5px; font-weight: 800;
  max-width: 118px; text-align: center;
}
.trip-car-sign-board small { font-weight: 700; color: var(--muted); font-size: 9.5px; }

/* ---------- car, on the road ---------- */

.trip-car-car {
  position: absolute; left: 29%; top: 52%;
  transform: translate(-50%, -55%) rotate(-6deg);
  display: grid; place-items: center;
}
.trip-car-car-emoji {
  font-size: clamp(46px, 7.4vw, 76px);
  display: block;
  filter: var(--drop-2);
}
.trip-car-car-bags {
  position: absolute; top: -15px; right: 6%;
  font-size: clamp(16px, 2.3vw, 21px);
  filter: var(--drop-1);
}
.trip-car-car-shadow {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 68%; height: 11px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  filter: blur(3px);
}

/* ---------- extreme foreground : hedge, flowers, picnic (depth 4) ---------- */

.trip-car-hedge {
  position: absolute; left: -2%; right: -2%; bottom: -3%; height: 10%;
  background: var(--scene-grass);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: .92;
}

.trip-car-flower {
  position: absolute; font-size: clamp(12px, 1.8vw, 17px);
  animation: trip-car-sway 3.2s ease-in-out infinite;
}
.trip-car-flower-1 { left: 71%; top: 45%; animation-delay: 0s; }
.trip-car-flower-2 { left: 7%; bottom: 9%; animation-delay: .6s; }
.trip-car-flower-3 { left: 47%; bottom: 3%; animation-delay: 1.1s; }
@keyframes trip-car-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

.trip-car-picnic {
  position: absolute; right: 5%; bottom: 8%;
  width: clamp(78px, 12vw, 112px); height: clamp(42px, 6.2vw, 58px);
}
.trip-car-picnic-table {
  position: absolute; inset: 0;
  background: var(--scene-picnic);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
}
.trip-car-picnic-table::before,
.trip-car-picnic-table::after {
  content: ""; position: absolute; bottom: -8px; width: 6px; height: 10px;
  background: color-mix(in srgb, var(--scene-picnic) 70%, var(--ink) 30%);
  border-radius: 0 0 2px 2px;
}
.trip-car-picnic-table::before { left: 10%; }
.trip-car-picnic-table::after { right: 10%; }
.trip-car-picnic-mug,
.trip-car-picnic-guide,
.trip-car-picnic-map {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: clamp(13px, 1.9vw, 18px);
}
.trip-car-picnic-mug { left: 12%; }
.trip-car-picnic-guide { left: 42%; }
.trip-car-picnic-map { left: 70%; }

/* ---------- floating focus pill ---------- */

.trip-car-timer {
  top: 14px; left: 14px;
  align-items: center; gap: 8px;
  font-weight: 800; font-size: 12.5px;
}
.trip-car-timer:not([hidden]) { display: flex; }
.trip-car-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  animation: trip-car-pulse 1.6s ease-in-out infinite;
}
.trip-car-timer.is-paused .trip-car-dot { animation: none; opacity: .5; background: var(--muted); }
@keyframes trip-car-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .35; }
}
/* was a bare span with an ALL-CAPS literal; now the shared .kicker, so the
   "in focus" label reads identically on the train, car, moto and plane trips */
.trip-car-timer-label { flex: none; }
.trip-car-time { font-size: 13px; }

/* ---------- bottom grid ---------- */

/* minmax on the rail: at 2fr/1fr the side column fell under 140px around 760px,
   which is narrower than its own three transport controls. */
.trip-car-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 16px;
}
.trip-car-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- card padding rhythm (20px card / 12px internal gaps) ---------- */

.trip-car-route, .trip-car-playlist, .trip-car-guide { padding: 20px; }

/* ---------- route card ---------- */

.trip-car-route-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; font-weight: 800; font-size: 13.5px;
}
.trip-car-stop { color: var(--muted); transition: color .3s ease; }
.trip-car-stop small { font-weight: 700; color: var(--muted); font-size: 10.5px; }
.trip-car-stop.is-passed { color: var(--blue); }
.trip-car-dots { color: var(--line); letter-spacing: 1px; transition: color .3s ease; }
.trip-car-dots.is-passed { color: var(--blue); }

.trip-car-progress { margin-top: 12px; }
.trip-car-estimate { margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.trip-car-vote-mine, .trip-car-vote-other { letter-spacing: .02em; }

/* ---------- playlist card ---------- */

.trip-car-track { margin-top: 12px; }
.trip-car-vignette {
  width: 46px; height: 46px; border-radius: var(--r-md); flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blue-soft), var(--gold-soft));
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.trip-car-viz {
  display: flex; align-items: flex-end; gap: 4px; height: 22px; margin: 12px 0 4px;
}
.trip-car-viz i {
  display: block; width: 5px; border-radius: 2px;
  background: var(--blue-soft);
  height: 30%;
  transition: background .3s ease;
}
.trip-car-viz.is-playing i { background: var(--blue); animation: trip-car-bar 1.1s ease-in-out infinite; }
.trip-car-viz i:nth-child(1) { animation-delay: 0s; }
.trip-car-viz i:nth-child(2) { animation-delay: .12s; }
.trip-car-viz i:nth-child(3) { animation-delay: .24s; }
.trip-car-viz i:nth-child(4) { animation-delay: .36s; }
.trip-car-viz i:nth-child(5) { animation-delay: .48s; }
@keyframes trip-car-bar {
  0%, 100% { height: 25%; } 50% { height: 100%; }
}

.trip-car-controls { justify-content: center; gap: 12px; margin-top: 12px; }

/* ---------- mini guide card ---------- */

.trip-car-guide-teaser { margin-top: 12px; font-size: 13.5px; line-height: 1.45; }
.trip-car-guide-list {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.trip-car-guide-list li {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  padding: 9px 11px;
  background: var(--bg-2); border-radius: var(--r-sm);
}
.trip-car-guide-btn { margin-top: 12px; width: 100%; }

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

.trip-car-footer { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.trip-car-invite {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-weight: 700; font-size: 14px; color: var(--ink-soft);
}

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

@media (max-width: 900px) {
  .trip-car-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .trip-car-head { flex-direction: column; align-items: stretch; }
  .trip-car-vote { align-self: stretch; }
  .trip-car-sign-board { max-width: 96px; font-size: 10px; }
  .trip-car-footer { justify-content: stretch; }
  .trip-car-footer .btn { flex: 1; }
  .trip-car-invite { justify-content: space-between; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .trip-car-viz.is-playing i { animation: none; height: 55%; }
  .trip-car-sea-glint, .trip-car-cloud, .trip-car-flower, .trip-car-road-marking,
  .trip-car-sun.floaty, .trip-car-sign.floaty {
    animation: none;
  }
  /* L-039 : le battement du point rouge (.trip-car-dot, session en focus)
     n'etait cite nulle part dans ce garde, et le filet global (base.css) ne
     borne que animation-duration, jamais animation-iteration-count : sans
     cette ligne il continuait de battre a l'infini sous reduced-motion. */
  .trip-car-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 appearance is immediate the
     instant .is-baked lands, no fade, no residual delay left to the net
     (same reasoning as shop.css). */
  .trip-car-scene .scene-canvas {
    transition: none;
  }
}