/* FART. a thermal camera pointed at nothing, until you let one go. */

@font-face {
  font-family: 'Sinkin Sans';
  src: url('/assets/vendor/fonts/sinkin-900XBlack.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Sinkin Sans';
  src: url('/assets/vendor/fonts/sinkin-400Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* metric matched fallback so the swap does not move the line (Sinkin upem 1000, asc 1.373 / 1.247, desc .363 / .284) */
@font-face {
  font-family: 'Sinkin fallback';
  src: local('Arial');
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  /* colour: the ground is the sensor's cold navy read off his plate, the ink is the OSD,
     the accent is the hot amber of the ironbow (OKLCH chroma 0.169). everything else derives. */
  --ground: #070147;
  --ink: #dfe4ff;
  --accent: #fcb302;
  --ground-2: color-mix(in oklch, var(--ground), var(--ink) 9%);
  --ink-2: color-mix(in oklch, var(--ink), var(--ground) 45%);
  --scrim: oklch(from var(--ground) l c h / .55);

  /* type: Sinkin Sans alone, 900 for the shout and 400 for the OSD. ratio 1.25 off 11. */
  --t-hero: clamp(28px, 5vw, 72px);
  --t-head: clamp(19px, 1.6vw, 21.5px);
  --t-body: clamp(15px, 1.2vw, 17.2px);
  --t-label: 13.75px;
  --t-micro: 11px;
  --track-hero: -0.03em;
  --track-caps: 0.08em;
  --lead-hero: 0.95;

  /* surface roll 1: fill only. no edge, no lift, anywhere. */
  --surface-0: var(--ground);
  --surface-1: color-mix(in oklch, var(--ink), transparent 88%);
  --surface-2: color-mix(in oklch, var(--ink), transparent 78%);
  --pad: 10px;
  --radius: 4px;
  --radius-inner: max(0px, calc(var(--radius) - var(--pad)));
  --margin: clamp(16px, 3vw, 44px);
  --gap: 12px;
  --z-page: 0;
  --z-chrome: 10;
  --z-hud: 5;
  --dur: 180ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Sinkin Sans', 'Sinkin fallback', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
h1, h2, h3, .shout { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.cam {
  position: fixed;
  inset: 0;
  z-index: var(--z-page);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: none;
}
.plate, .view, .hud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plate {
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate(14%, -2%) scale(1.05);
  transition: opacity var(--dur) var(--ease);
}
.cam.live .plate { opacity: 0; }
.view { display: block; }
.hud { z-index: var(--z-hud); pointer-events: none; }

/* the OSD, one top bar, layout roll 1 */
.osd {
  position: absolute;
  z-index: var(--z-chrome);
  top: var(--margin);
  left: var(--margin);
  right: var(--margin);
  display: flex;
  align-items: center;
  gap: var(--gap);
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: 1.2;
  cursor: auto;
}
.rec { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: blink 1.2s steps(2, end) infinite;
}
@keyframes blink { to { opacity: .15; } }
.tick { color: var(--ink); }
.ca {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--ink);
  opacity: .8;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  cursor: copy;
  transition: opacity var(--dur) var(--ease);
}
.ca:hover, .ca:focus-visible { opacity: 1; }
.mint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.did { color: var(--accent); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--t-micro); }
.did:empty { display: none; }
.links { display: inline-flex; gap: calc(var(--gap) / 2); margin-left: auto; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 var(--pad);
  border-radius: var(--radius);
  background: var(--surface-1);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.97); }
.btn .glyph { display: inline-flex; width: 18px; height: 18px; }
.btn .glyph svg { width: 100%; height: 100%; display: block; }
.btn[hidden] { display: none; }
:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the line: OSD ink, hand broken, top left under the bar */
.line {
  position: absolute;
  z-index: var(--z-chrome);
  left: var(--margin);
  top: calc(var(--margin) + 36px + var(--gap) * 2);
  margin: 0;
  max-width: 14ch;
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: var(--lead-hero);
  letter-spacing: var(--track-hero);
  color: var(--ink);
  pointer-events: none;
}
noscript .line { top: auto; bottom: var(--margin); font-weight: 400; font-size: var(--t-body); max-width: 40ch; }

@media (max-width: 640px) {
  .osd { flex-wrap: wrap; row-gap: var(--gap); }
  .ca { order: 4; flex-basis: 100%; }
  .line { top: calc(var(--margin) + 36px + var(--gap) * 2 + 20px + var(--gap)); }
  .plate { transform: translate(-4%, -18%) scale(1.7); }
}
@media (hover: none) { .cam { cursor: auto; } }
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .plate, .btn, .ca { transition: none; }
}