/**
 * Токены / шрифты / HUD-время для футера B4Flow (apollo).
 */

@font-face {
  font-family: "Mirra";
  src: url("../fonts/Mirra.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --pad-x: clamp(1rem, 3vw, 2.5rem);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ink: #0a0a0a;
  --bg: #fcfcfc;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-transform: uppercase;
}

.hud-header__times {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
  text-align: right;
}

.hud-header__time-caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.74rem, 0.95vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  line-height: 1.25;
}

.hud-header__time-main {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.2;
}

.hud-header__time-code {
  letter-spacing: 0.08em;
}

.hud-header__time-clock {
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.hud-time-colon {
  animation: hud-time-colon-blink 1s step-end infinite;
}

@keyframes hud-time-colon-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-time-colon {
    animation: none;
  }
}