/* ============================================================
   NEXT ROUTE — Driving -> Parked transition
   The single hero motion moment. Two rules govern it:

   1. Driving RECEDES — it accelerates away, because it is done.
   2. Parked BLOOMS — it decelerates in, tier by tier, because
      you are about to read it standing still.

   Nothing else in this product animates. Timings here are the
   spec handed to Rive; see docs/transition-storyboard.md.
   ============================================================ */

.stack {
  position: relative;
  width: 100%;
  height: var(--screen-h);
  border-radius: var(--radius-screen);
  overflow: hidden;
  background: var(--void);
}

.layer { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.layer-parked { z-index: 2; opacity: 0; pointer-events: none; }
.layer-driving { z-index: 1; }

/* ---- Driving: recede ---------------------------------------- */

[data-recede] {
  transition:
    opacity var(--dur-recede) var(--ease-recede),
    transform var(--dur-recede) var(--ease-recede);
}

.stack[data-state="parked"] .layer-driving { opacity: 0; transition: opacity var(--dur-recede) var(--ease-recede); }
.stack[data-state="driving"] .layer-driving { opacity: 1; transition: opacity var(--dur-bloom) var(--ease-bloom) 240ms; }

/* The map pushes past you — you have arrived, it is behind you now. */
.stack[data-state="parked"] [data-recede="map"]       { opacity: 0; transform: scale(1.06); }
.stack[data-state="parked"] [data-recede="turn"]      { opacity: 0; transform: translateY(-20px); }
.stack[data-state="parked"] [data-recede="telemetry"] { opacity: 0; transform: translateY(24px); }
.stack[data-state="parked"] [data-recede="proximity"] { opacity: 0; transform: scale(0.94); }
.stack[data-state="parked"] [data-recede="side"]      { opacity: 0; transform: translateX(26px); }

/* ---- Parked: bloom ------------------------------------------ */

.stack[data-state="parked"] .layer-parked {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dur-recede) var(--ease-state) 260ms;
}
.stack[data-state="driving"] .layer-parked {
  transition: opacity var(--dur-recede) var(--ease-state);
}

[data-bloom] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-bloom) var(--ease-bloom),
    transform var(--dur-bloom) var(--ease-bloom);
}

/* Tier order is the content architecture, not decoration:
   tier 1 = the four things you read with zero taps,
   tier 2 = supporting context,
   tier 3 = the three things you might deliberately touch. */
.stack[data-state="parked"] [data-bloom]      { opacity: 1; transform: none; }
.stack[data-state="parked"] [data-bloom="1"]  { transition-delay: 300ms; }
.stack[data-state="parked"] [data-bloom="2"]  { transition-delay: calc(300ms + var(--dur-stagger)); }
.stack[data-state="parked"] [data-bloom="3"]  { transition-delay: calc(300ms + var(--dur-stagger) * 2); }

/* ---- Proximity band arming ----------------------------------
   Shown from 3.0 mi. Below 2.0 mi the transition has already
   fired, so this is the announcement, not the event. */

.proximity { opacity: 0; transform: scale(0.94); }
.stack[data-armed="true"] [data-recede="proximity"] { opacity: 1; transform: none; }

/* ============================================================
   Director controls — tooling, not product.
   Deliberately styled as instrumentation so no screenshot of
   this page can be mistaken for the in-vehicle UI.
   ============================================================ */

.lab { min-height: 100vh; display: flex; flex-direction: column; }
.lab-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 20px 0; }

.director {
  border-top: 1px solid #1c1c1c;
  background: #0b0b0b;
  padding: 18px 24px 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #8d8d8d;
}
.director-title { font-size: 10px; letter-spacing: 0.22em; color: #5c5c5c; text-transform: uppercase; }

.ctl { display: flex; flex-direction: column; gap: 8px; }
.ctl > label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #5c5c5c; }

.ctl-distance { flex: 1; min-width: 280px; }
.ctl-distance input { width: 100%; accent-color: var(--signal); height: 22px; }
.ctl-distance .readout { font-size: 13px; color: #d6d6d6; font-variant-numeric: tabular-nums; }
.ctl-distance .readout b { color: var(--signal); }

.seg { display: flex; border: 1px solid #262626; border-radius: 8px; overflow: hidden; }
.seg button {
  background: #141414; color: #9a9a9a; border: 0;
  padding: 10px 20px; font: inherit; font-size: 13px; cursor: pointer;
  border-right: 1px solid #262626;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--signal); color: #12100e; font-weight: 700; }

.readouts { display: flex; gap: 22px; }
.ro { font-size: 11px; letter-spacing: 0.08em; }
.ro b { display: block; font-size: 14px; color: #e6e6e6; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.1em; }
.ro b.is-signal { color: var(--signal); }

.replay {
  background: #141414; border: 1px solid #262626; border-radius: 8px;
  color: #d6d6d6; padding: 12px 18px; font: inherit; font-size: 13px; cursor: pointer;
}
.replay:hover { border-color: var(--signal); color: var(--signal); }