/* ============================================================
   TimeCapacity — pagaidu lapa. Āda: tikai var(--…) no tokens.css.
   Logo proporcijas nāk no oriģināla (tools/build_logo.py izdrukā
   skaitļus): viss mērogojas no vārdzīmes platuma --wm.
   ============================================================ */

body {
  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  font-family: var(--font-body);
}

/* ---- Skatuve ---- */
.stage {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  padding: clamp(2.5rem, 7vh, 5rem) 16px 2rem;
  text-align: center;
  overflow-x: clip;   /* mirdzums aiz zīmes nedrīkst radīt horizontālu skrollu */
}

/* ---- Logo: zīme + vārdzīme + tagline ----
   Mazā ekrānā zīme virs vārdzīmes, platā — horizontāli kā logo failā. */
.brand {
  --wm: min(420px, 100vw - 64px);   /* vārdzīmes platums */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--wm) * 0.1);
}

.mark-wrap {
  position: relative;
  isolation: isolate;
}
/* Maigs mirdzums aiz pulksteņa */
.mark-wrap::before {
  content: "";
  position: absolute;
  inset: -45% -40%;
  z-index: -1;
  background:
    radial-gradient(closest-side, var(--color-glow-1), transparent),
    radial-gradient(closest-side at 42% 55%, var(--color-glow-2), transparent);
  pointer-events: none;
}

.mark {
  display: block;
  inline-size: calc(var(--wm) * 0.70);
  block-size: auto;
  aspect-ratio: 406 / 352;
  overflow: visible;
}

.brand__name {
  margin: 0;
  line-height: 0;
}
.wordmark {
  display: block;
  inline-size: var(--wm);
  block-size: auto;
  aspect-ratio: 1055 / 188;
  color: var(--color-ink);
}

.brand__tagline {
  margin: calc(var(--wm) * -0.018) 0 0;
  font-size: calc(var(--wm) * 0.07546);
  line-height: 1;
  letter-spacing: 0.011em;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .brand {
    --wm: min(640px, 58vw);
    flex-direction: row;
    gap: calc(var(--wm) * 0.0147);
    text-align: start;
  }
  .mark {
    inline-size: calc(var(--wm) * 0.38483);
  }
  /* Teksta bloks logo failā ir ~14 vienības zem gredzena centra */
  .brand__text {
    margin-block-start: calc(var(--wm) * 0.0265);
  }
  .brand__tagline {
    margin-inline-start: calc(var(--wm) * 0.01764);
  }
}

/* ---- Statusa rinda ---- */
.status {
  margin: 0;
  max-inline-size: 30ch;
  font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.6rem);
  line-height: 1.45;
  color: var(--color-ink-muted);
  text-wrap: balance;
}

/* ---- Kājene ---- */
.foot {
  padding: 1.25rem 16px 1.5rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.foot p { margin: 0; }

/* ---- Pulkstenis ----
   Minūšu rādītājs apiet apli 3 s, stundu rādītājs 12× lēnāk.
   Katru reizi, kad minūšu rādītājs pabeidz apli (ik 3 s, pirmoreiz pēc 3 s),
   bulta paraujas uz āru un atgriežas: laiks pārvēršas kapacitātē.
   Rotācijas centrs = SVG (0,0) = gredzena centrs. */
.tc-minute,
.tc-hour {
  transform-box: view-box;
  transform-origin: 0 0;
}
.tc-minute { animation: tc-spin 3s linear infinite; }
.tc-hour   { animation: tc-spin 36s linear infinite; }
.tc-arrow  { animation: tc-nudge 3s 3s infinite; }

@keyframes tc-spin {
  to { transform: rotate(360deg); }
}
@keyframes tc-nudge {
  0%        { transform: translateX(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  9%        { transform: translateX(15px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  30%, 100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tc-minute,
  .tc-hour,
  .tc-arrow { animation: none; }
}