/*
 * @nometrii/brand — marks.css
 *
 * CSS primitives for the nometrii wordmark and monogram, usable by both
 * React consumers (Wordmark / Monogram components apply these classes
 * internally) and static-HTML consumers (nometrii.com imports this file
 * directly and writes the markup by hand).
 *
 * Source of truth: nometrii/internal/BRANDING.md § Primary wordmark + § Monogram.
 * Token source: this file assumes tokens.css is imported first so
 * --nmt-* custom properties are defined.
 */

/* ─── Wordmark ─────────────────────────────────────────────────────── */

.nmt-wordmark {
  font-family: var(--nmt-font-mono);
  font-weight: var(--nmt-mark-weight);
  letter-spacing: var(--nmt-mark-tracking);
  line-height: 1;
  display: inline-block;
  color: var(--nmt-cream);
}

.nmt-wordmark .nmt-accent,
.nmt-wordmark .nmt-period {
  color: var(--nmt-green);
}

/* V0 — nometrii.  (default, 90% of use) */
.nmt-wordmark--default .nmt-period {
  color: var(--nmt-green);
}

/* V1 — >nometrii  (dev / CLI contexts) */
.nmt-wordmark--prompt::before {
  content: ">";
  color: var(--nmt-green);
  margin-right: 0.12em;
}

/* V2 — nometrii_  (animation endpoint; do not use statically).
   The underscore sits flush against the last letter — no margin-left —
   so it reads like the next character in the monospace cell. */
.nmt-wordmark--cursor::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.12em;
  background: var(--nmt-green);
  vertical-align: baseline;
  animation: nmt-cursor-blink 1.06s steps(1) infinite;
}

/* V3 — (n)ometrii.  (formal / legal) */
.nmt-wordmark--paren .nmt-paren {
  color: var(--nmt-green);
}

/* V0 → V2 state machine on digital surfaces.
   V0 shows a STATIC green period — no blink. The period sits there as a
   resting-state visual beat; consumers trigger the transition to V2 on
   their own schedule (typical: ~3.2s after reveal, matching the cadence
   of three blink cycles that earlier drafts used as the trigger).
   V2's underscore is the thing that blinks, once and only once the
   wordmark has transitioned into V2 — that's the "animation endpoint"
   per BRANDING.md § Primary wordmark. */

@keyframes nmt-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nmt-wordmark--cursor::after {
    animation: none;
  }
}

/* ─── Monogram ─────────────────────────────────────────────────────── */

.nmt-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nmt-monogram--block {
  /* Block-n monogram. Inline SVG is preferred (sharp at every size) — see
     Monogram.tsx or copy nometrii/tools/brand/src/assets/monogram-block-n.svg. */
  color: var(--nmt-purple);
}

.nmt-monogram--block svg {
  display: block;
  width: 1em;
  height: 1em;
}

/* Paper ground wrapper (the monogram typically sits on paper, not on ink). */
.nmt-monogram-ground {
  background: var(--nmt-paper);
  padding: 0.125em;
  display: inline-flex;
}

/* Textual monogram alternatives (>n, n., (n)) — styled type, not SVG. */
.nmt-monogram--prompt,
.nmt-monogram--dot,
.nmt-monogram--paren {
  font-family: var(--nmt-font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--nmt-cream);
}

.nmt-monogram--prompt .nmt-accent,
.nmt-monogram--dot .nmt-period,
.nmt-monogram--paren .nmt-paren {
  color: var(--nmt-green);
}