/* ───────────────────────────────────────────────────────────────
   Orbit field · STYLES
   Typography voices (.kw--*), ring line styling (.of-*), floating
   marks (.of-mark*). Geometry and motion are handled in JS; this
   file only decides how things look.

   Colour follows the page: the stage uses the homepage's own --bg,
   and the ink flips with :root[data-scheme] (set by nav.js), so a
   light/dark switch restyles the field instantly.
   ─────────────────────────────────────────────────────────────── */

.identity-viz {
  --of-bg: var(--bg, #0b0f15);
  --of-ink-rgb: 244, 244, 242;
  --of-red: #ff3b2f;
  --of-yellow: #ffd60a;
  --of-scale: 1;
  --of-fade-x: 0px;

  --of-ink: rgb(var(--of-ink-rgb));
  --of-line: rgba(var(--of-ink-rgb), 0.3);
  --of-micro: rgba(var(--of-ink-rgb), 0.42);

  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  color: var(--of-ink);
  opacity: 0;
  transition: opacity 1.2s ease;
}

:root[data-scheme='light'] .identity-viz {
  --of-ink-rgb: 17, 17, 17;
  --of-red: #e23b2f;
  --of-yellow: #f2b705;
}

/* Keep the stage clear underneath the floating navigation pill. */
.identity-viz:not(.is-mobile) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 34px, #000 150px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 34px, #000 150px);
}

.identity-viz.is-ready { opacity: 1; }

.of-stage { position: absolute; inset: 0; visibility: hidden; }
.identity-viz.is-ready .of-stage { visibility: visible; }

/* Phone: when the headline copy comes up, the field freezes under a veil. */
.of-veil {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--of-bg) 80%, transparent);
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.identity-viz.is-dimmed .of-veil { opacity: 1; }

/* ── Ring lines ─────────────────────────────────────────────── */
.of-dials {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent calc(var(--of-fade-x) - 10px), #000 calc(var(--of-fade-x) + 170px));
  mask-image: linear-gradient(to right, transparent calc(var(--of-fade-x) - 10px), #000 calc(var(--of-fade-x) + 170px));
}

.of-dial {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.of-dial-svg { display: block; width: 100%; height: 100%; overflow: visible; }

.of-arc { fill: none; stroke: var(--of-line); stroke-width: 0.9; }

.of-tick { fill: none; stroke-linecap: butt; }
.of-tick--minor { stroke: rgba(var(--of-ink-rgb), 0.2); stroke-width: 0.7; }
.of-tick--medium { stroke: rgba(var(--of-ink-rgb), 0.36); stroke-width: 0.9; }
.of-tick--major { stroke: rgba(var(--of-ink-rgb), 0.62); stroke-width: 1.2; }

.of-numeral,
.of-caption {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  fill: var(--of-micro);
  text-transform: uppercase;
}
.of-numeral { font-size: 8.5px; letter-spacing: 0.08em; }
.of-caption { font-size: 9px; letter-spacing: 0.34em; fill: rgba(var(--of-ink-rgb), 0.5); }
.of-cross { fill: none; stroke: rgba(var(--of-ink-rgb), 0.45); stroke-width: 0.9; }

.of-emph { fill: none; stroke-linecap: round; }
.of-emph--ink { stroke: rgba(var(--of-ink-rgb), 0.85); }
.of-emph--red { stroke: var(--of-red); }
.of-emph--yellow { stroke: var(--of-yellow); }

.of-planet--red { fill: var(--of-red); }
.of-planet--yellow { fill: var(--of-yellow); }
.of-planet--ink { fill: var(--of-ink); }
.of-planet-halo { fill: none; stroke: rgba(var(--of-ink-rgb), 0.26); stroke-width: 0.8; }

/* ── Label plumbing ─────────────────────────────────────────── */
.of-ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.of-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

.of-face {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  pointer-events: auto;
  will-change: opacity;
}

/* ── Typography voices ──────────────────────────────────────── */
.kw {
  --kw-o: 1;
  position: relative;
  display: block;
  width: max-content;
  color: var(--of-ink);
  font-size: max(var(--fs-min, 0px), calc(var(--fs, 16) * var(--of-scale, 1) * 1px));
  line-height: 1.05;
  text-align: center;
  white-space: nowrap; /* desktop: one line, always */
  opacity: var(--kw-o);
  transition: opacity 0.5s ease;
  -webkit-user-select: none;
  user-select: none;
}
.of-face:hover .kw { --kw-o: 1; }

/* Anchor · filled capsule */
.kw--capsule-fill {
  font-family: Syne, var(--font-sans, sans-serif);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--of-bg);
  background: var(--of-ink);
  border-radius: 999px;
  padding: 0.2em 0.64em 0.28em;
}

/* Anchor · big italic serif */
.kw--serif-xl {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

/* Anchor · outlined display caps */
.kw--outline,
.kw--outline-sm {
  font-family: Syne, var(--font-sans, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.95;
  color: transparent;
  -webkit-text-stroke: 1px var(--of-ink);
  paint-order: stroke fill;
}
.kw--outline-sm { -webkit-text-stroke-color: rgba(var(--of-ink-rgb), 0.8); --kw-o: 0.78; letter-spacing: 0; font-weight: 600; }

/* Anchor · circular badge (single line of text inside the circle) */
.kw--badge {
  --kw-o: 1;
  display: grid;
  place-items: center;
  width: calc(var(--fs, 170) * var(--of-scale, 1) * 1px);
  height: calc(var(--fs, 170) * var(--of-scale, 1) * 1px);
  border: 1px solid rgba(var(--of-ink-rgb), 0.85);
  border-radius: 50%;
  font-family: Syne, var(--font-sans, sans-serif);
  font-weight: 700;
  font-size: max(10px, calc(13.5 * var(--of-scale, 1) * 1px));
  letter-spacing: -0.035em;
  line-height: 1;
}
.kw--badge::before {
  content: '';
  position: absolute;
  inset: -9%;
  transform: translate(15%, -11%);
  border: 1px solid rgba(var(--of-ink-rgb), 0.2);
  border-radius: 50%;
  pointer-events: none;
}
.kw--badge::after {
  content: '';
  position: absolute;
  right: 9%;
  top: 8%;
  width: 9%;
  height: 9%;
  border-radius: 50%;
  background: var(--of-red);
  pointer-events: none;
}

/* Lead voices */
.kw--display-md {
  font-family: Syne, var(--font-sans, sans-serif);
  font-weight: 700;
  letter-spacing: -0.045em;
  --kw-o: 0.94;
}
.kw--serif-md {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  letter-spacing: -0.02em;
  --kw-o: 0.84;
}
.kw--sans-md {
  --fs-min: 12px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  --kw-o: 0.78;
}

/* Whispers */
.kw--mono-caps,
.kw--mono-vertical,
.kw--sans-caps-wide {
  --fs-min: 8.5px;
  text-transform: uppercase;
  --kw-o: 0.55;
}
.kw--mono-caps,
.kw--mono-vertical {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: 0.14em;
}
.kw--mono-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  --kw-o: 0.48;
}
.kw--sans-caps-wide {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 500;
  letter-spacing: 0.28em;
  --kw-o: 0.5;
}
.kw--capsule-thin {
  --fs-min: 10.5px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.38em 0.95em 0.42em;
  border: 1px solid rgba(var(--of-ink-rgb), 0.5);
  border-radius: 999px;
  --kw-o: 0.78;
}

/* Small accent dot after the one word that carries yellow */
.kw[data-accent='yellow']::after {
  content: '';
  position: absolute;
  right: -0.02em;
  bottom: 0.12em;
  width: 0.1em;
  height: 0.1em;
  border-radius: 50%;
  background: var(--of-yellow);
  transform: translate(120%, 0);
}

/* ── Floating marks ─────────────────────────────────────────── */
.of-mark {
  position: relative;
  display: block;
  width: calc(var(--d, 80) * var(--of-scale, 1) * 1px);
  height: calc(var(--d, 80) * var(--of-scale, 1) * 1px);
}
.of-mark__body {
  position: absolute;
  inset: 0;
  animation: of-bob var(--bob-t, 12s) ease-in-out infinite alternate;
  animation-delay: var(--bob-d, 0s);
}
.of-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

@keyframes of-bob {
  from { transform: translate3d(var(--bx0, -4px), var(--by0, 5px), 0); }
  to   { transform: translate3d(var(--bx1, 5px), var(--by1, -7px), 0); }
}

.of-fill-yellow { fill: var(--of-yellow); }
.of-fill-red { fill: var(--of-red); }
.of-fill-ink { fill: var(--of-ink); }
.of-fill-bg { fill: var(--of-bg); stroke: var(--of-ink); stroke-width: 1.4; }
.of-stroke-ink { stroke: var(--of-ink); stroke-width: 1.4; }
.of-stroke-line { stroke: rgba(var(--of-ink-rgb), 0.55); stroke-width: 1.1; }
.of-spin { animation: of-spin 90s linear infinite; transform-origin: 50% 50%; }
@keyframes of-spin { to { transform: rotate(360deg); } }

/* ── Phone composition ──────────────────────────────────────── */
/* There is less room, so the wide labels are allowed to break. */
.identity-viz.is-mobile .kw--serif-xl,
.identity-viz.is-mobile .kw--outline {
  white-space: normal;
  width: min-content;
}
.identity-viz.is-mobile .kw--serif-xl { line-height: 0.9; }
.identity-viz.is-mobile .kw--outline { line-height: 0.92; }
.identity-viz.is-mobile .kw--badge {
  padding: 14%;
  text-align: center;
  white-space: normal;
  font-size: max(11px, calc(17 * var(--of-scale, 1) * 1px));
}

@media (prefers-reduced-motion: reduce) {
  .identity-viz,
  .of-veil { transition: none; }
  .of-mark__body,
  .of-spin { animation: none; }
  .kw { transition: none; }
}