/* look B motion hero, ported from hero-b-motion/look.css (tokens + HERO block). Rerun tools/port_hero.py after hero updates. */
:root {
  --color-ground: oklch(0.19 0.007 60);
  --color-ground-0: oklch(0.19 0.007 60 / 0);
  --color-ground-30: oklch(0.19 0.007 60 / 0.3);
  --color-ground-55: oklch(0.19 0.007 60 / 0.55);
  --color-ground-75: oklch(0.19 0.007 60 / 0.75);
  --color-ground-88: oklch(0.19 0.007 60 / 0.88);
  --color-bone: oklch(0.955 0.021 88);
  --color-ash: oklch(0.83 0.014 82);
  --color-smoke: oklch(0.7 0.012 78);
  --color-hair: oklch(0.955 0.021 88 / 0.2);
  --color-hair-strong: oklch(0.955 0.021 88 / 0.36);
  --color-ego: oklch(0.955 0.021 88 / 0.6);
  --color-amber: oklch(0.78 0.158 62);
  --color-amber-lit: oklch(0.83 0.14 68);
  --color-ink: oklch(0.3 0.11 285);
  --color-car: oklch(0.88 0.095 100);
  --color-van: oklch(0.8 0.085 235);
  --color-cyclist: oklch(0.86 0.1 165);
  --color-pedestrian: oklch(0.8 0.1 310);

  --font-display: "Geologica", ui-sans-serif, sans-serif;
  --font-mono: "Ubuntu Sans Mono", ui-monospace, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
}

/* =====================================================================================================
   HERO: port this block (every rule is scoped under .hero). States set on the section itself:
   .hero--motion (inline script: try the live scan, show the dark ground first), .hero--live (canvas drawing),
   .hero--still (fallback: the still with its static boxes and tags).
   ===================================================================================================== */
.hero {
  position: relative;
  height: max(880px, min(100svh, 1100px));
  container-type: size;
  overflow: hidden;
  background: var(--color-ground);
  color: var(--color-bone);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hero, .hero *, .hero *::before, .hero *::after { box-sizing: border-box; }
.hero :focus-visible { outline: 2px solid var(--color-bone); outline-offset: 3px; }
.hero .scan { position: absolute; inset: 0; margin: 0; }
/* the picture covers the hero; overlay items are placed with the same cover math in container units:
   --sw/--sh = size of the covering picture, positions are fractions of it */
.hero .stage { position: absolute; inset: 0; }
.hero .frame {
  --sw: max(100cqw, 160cqh);
  --sh: max(62.5cqw, 100cqh);
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}
.hero .frame picture, .hero .scan__img { display: block; width: 100%; height: 100%; }
.hero .scan__img { object-fit: cover; object-position: 50% 50%; }
.hero .scan__gl { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
/* light falloff toward the type: the ground fades into the page where the copy sits */
.hero .scan::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--color-ground) 0%, var(--color-ground-55) 9%, var(--color-ground-0) 22%),
    radial-gradient(112% 60% at 0% 100%, var(--color-ground-88) 0%, var(--color-ground-75) 44%, var(--color-ground-30) 74%, var(--color-ground-0) 100%);
}

/* overlay: cuboids, ego box, tags */
.hero .ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero .ov--p, .hero .ov--live { display: none; }
.hero .cb path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hero .cb__back { stroke-width: 1.1px; stroke-opacity: 0.6; }
.hero .cb__front { stroke-width: 1.7px; }
.hero .cb__tick { stroke-width: 1.7px; }
.hero .cb--car { stroke: var(--color-car); }
.hero .cb--van { stroke: var(--color-van); }
.hero .cb--cyclist { stroke: var(--color-cyclist); }
.hero .cb--pedestrian { stroke: var(--color-pedestrian); }
.hero .ego__box { fill: none; stroke: var(--color-ego); stroke-width: 1px; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.hero .ego__mast { stroke: var(--color-ego); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hero .ego__sensor { fill: var(--color-bone); }

.hero .tags { position: absolute; inset: 0; }
.hero .tag {
  position: absolute;
  top: calc(50cqh + (var(--y) - 0.5) * var(--sh));
  margin: 0;
  padding: 3px var(--space-2) 4px;
  border-left: 2px solid currentColor;
  background: var(--color-ground-75);
  font: 500 13px/1.35 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero .tag__id, .hero .tag__size { display: block; }
.hero .tag__size { color: var(--color-ash); font-weight: 400; }
.hero .tag--car { color: var(--color-car); }
.hero .tag--van { color: var(--color-van); }
.hero .tag--cyclist { color: var(--color-cyclist); }
.hero .tag--pedestrian { color: var(--color-pedestrian); }
.hero .tag--l { left: max(var(--space-2), calc(50cqw + (var(--x) - 0.5) * var(--sw))); }
.hero .tag--r { right: max(var(--space-2), calc(50cqw - (var(--xr) - 0.5) * var(--sw))); }
.hero .tag--phone, .hero .tag--tablet { display: none; }
.hero .sensor {
  position: absolute;
  left: calc(50cqw + (var(--dx) - 0.5) * var(--sw));
  top: calc(50cqh + (var(--dy) - 0.5) * var(--sh));
  margin: 0;
  padding: 1px var(--space-1) 2px;
  background: var(--color-ground-75);
  transform: translate(calc(-100% - var(--space-2)), -50%);
  color: var(--color-ash);
  font: 400 13px/1.3 var(--font-mono);
  white-space: nowrap;
}
.hero .sensor__h { color: var(--color-bone); }

/* live scan: until the canvas draws, the dark ground (never the still, which would then vanish) */
.hero.hero--motion .frame picture,
.hero.hero--motion .ov--d,
.hero.hero--motion .ov--p,
.hero.hero--motion .tags { visibility: hidden; }
.hero.hero--live .scan__gl { display: block; }
.hero.hero--live .ov--d, .hero.hero--live .ov--p { display: none; }
.hero.hero--live .ov--live { display: block; }
.hero.hero--live .tags { visibility: visible; }
/* look.js places tags and the sensor label by transform each frame and types them in with a clip */
.hero.hero--live .tag, .hero.hero--live .sensor { left: 0; top: 0; right: auto; will-change: transform; }
.hero.hero--live .tag { clip-path: inset(0 calc(100% - var(--tw, 100%)) 0 0); }
.hero.hero--live .tag__id { clip-path: inset(0 calc(100% - var(--n1, 99) * 1ch) 0 0); }
.hero.hero--live .tag__size { clip-path: inset(0 calc(100% - var(--n2, 99) * 1ch) 0 0); }
.hero.hero--live .sensor { clip-path: inset(0 calc(100% - var(--tw, 100%)) 0 0); }

/* copy, low left over the dark ground */
.hero .copy {
  position: absolute;
  left: var(--space-18);
  right: var(--space-18);
  bottom: var(--space-16);
  z-index: 10;
}
.hero h1 {
  margin: 0 0 var(--space-6);
  max-width: 17em;
  font: 300 clamp(40px, 4.4cqw, 76px)/1.04 var(--font-display);
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.hero .copy__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-10);
}
.hero .lede {
  margin: 0;
  max-width: 40em;
  color: var(--color-ash);
  font: 400 clamp(16px, 1.22cqw, 20px)/1.5 var(--font-display);
}
.hero .cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border-radius: 2px;
  background: var(--color-amber);
  color: var(--color-ink);
  font: 600 18px/1.2 var(--font-display);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.hero .cta:hover { background: var(--color-amber-lit); }
.hero .cta:focus-visible { outline-color: var(--color-amber); }

.hero .prov {
  position: absolute;
  right: var(--space-18);
  bottom: var(--space-5);
  z-index: 10;
  max-width: calc(100% - 2 * var(--space-18));
  margin: 0;
  color: var(--color-smoke);
  font: 400 13px/1.45 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* pause control, set like the provenance line (WCAG 2.2.2) */
.hero .pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--color-ash);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero .pause[hidden], .hero .pause[hidden] + .prov__sep { display: none; }
.hero .pause:hover { color: var(--color-bone); }
.hero .pause__icon { width: 11px; height: 11px; flex: none; }
.hero .pause__bars { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hero .pause__play { display: none; fill: currentColor; }
.hero .pause.is-paused .pause__bars { display: none; }
.hero .pause.is-paused .pause__play { display: inline; }

/* stacked layouts: picture first, copy under it */
@media (max-width: 1199px) {
  .hero { height: auto; container-type: inline-size; overflow: visible; display: flex; flex-direction: column; }
  .hero .scan, .hero .stage { display: contents; }
  .hero .scan::after { content: none; }
  .hero .frame { position: relative; inset: auto; order: 1; width: 100%; aspect-ratio: 1.6; }
  .hero .frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, var(--color-ground) 0%, var(--color-ground-75) 14%, var(--color-ground-0) 34%);
  }
  .hero .tag--desktop { display: none; }
  .hero .tag--tablet { display: block; }
  .hero .copy { position: relative; left: auto; right: auto; bottom: auto; order: 2; margin-top: -96px; padding: 0 var(--space-6); }
  .hero h1 { font-size: clamp(34px, 6.4cqw, 52px); }
  .hero .copy__row { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .hero .lede { font-size: 17px; }
  .hero .prov { position: static; order: 3; max-width: none; margin: var(--space-6) var(--space-6) var(--space-10); text-align: left; }
}

/* phone: portrait chase frame, its own overlay */
@media (max-width: 699px) {
  .hero .frame { --sw: 100cqw; --sh: 100cqh; aspect-ratio: 0.75; }
  .hero .ov--d, .hero .tag--desktop, .hero .tag--tablet { display: none; }
  .hero .ov--p { display: block; }
  .hero .tag--phone { display: block; }
  .hero .sensor { left: calc(var(--px) * 100cqw); top: calc(var(--py) * 100cqh); transform: translate(var(--space-2), -50%); }
  .hero .copy { margin-top: -150px; padding: 0 var(--space-4); }
  .hero h1 { font-size: clamp(32px, 9.4cqw, 40px); line-height: 1.06; }
  .hero .lede { font-size: 15px; line-height: 1.45; }
  .hero .copy__row { gap: var(--space-4); }
  .hero .cta { font-size: 17px; }
  .hero .prov { margin: var(--space-6) var(--space-4) var(--space-10); }
}