/* ===========================================================================
   ARITMORF animated wordmark — presentation layer
   Self-contained. Everything tunable lives in the :root block below.

   Pairs with wordmark.js. Motion timings are read FROM these custom
   properties by the script, so this file is the single source of truth for
   how fast things move. Per-state hold durations (how long a reading stays
   on screen) live at the top of wordmark.js instead.
   ======================================================================== */

:root {
  /* ---- Color ------------------------------------------------------- */
  --wm-ink: #e8e6e3;        /* resting letters */
  --wm-accent: #BF1656;     /* the active reading */
  --wm-ext: #e8e6e3;        /* morphed extension, e.g. the ETIK in ARITMETIK */
  --wm-caption: #8a8a8f;    /* caption line */

  /* ---- Letter opacity by role -------------------------------------- */
  --wm-o-base: 0.92;        /* neutral ARITMORF */
  --wm-o-active: 1;         /* letters forming the current reading */
  --wm-o-ext: 0.42;         /* extension letters */
  --wm-o-ghost: 0.14;       /* dimmed-out letters */

  /* ---- Motion ------------------------------------------------------ */
  --wm-move: 460ms;         /* letters sliding to new positions (FLIP) */
  --wm-tone: 520ms;         /* color + opacity shifts */
  --wm-swap: 380ms;         /* one glyph cross-fading into another */
  --wm-beat: 480ms;         /* RITIM pulse period — 480ms = 125bpm */
  --wm-ease: cubic-bezier(0.2, 0, 0, 1);   /* decelerate, no overshoot */

  /* ---- Type -------------------------------------------------------- */
  /* Every family below ships U+0131 (dotless i). Avoid webfonts here
     unless the subset explicitly includes Latin Extended-A. */
  --wm-font: "Helvetica Neue", "Segoe UI", system-ui, -apple-system,
             Arial, "Noto Sans", "Liberation Sans", sans-serif;
  /* Sized for the 9-letter ARITMETIK state, the widest the word ever gets.
     Verified to clear the column at 320px with ~45px to spare. */
  --wm-size: clamp(2.1rem, 12vw, 5rem);
  --wm-weight: 600;
  --wm-tracking: 0.06em;    /* gap between letter slots */
  --wm-caption-size: 0.82rem;
}

/* ---- Lockup --------------------------------------------------------- */

.wm {
  display: block;
  font-family: var(--wm-font);
}

.wm-word {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--wm-tracking);
  position: relative;          /* containing block for exiting letters */
  font-size: var(--wm-size);
  font-weight: var(--wm-weight);
  line-height: 1.05;
  color: var(--wm-ink);
  /* NEVER add text-transform here — it destroys the dotless-i reveal. */
}

/* ---- Letters -------------------------------------------------------- */

.wm-letter {
  position: relative;
  display: inline-block;
  white-space: pre;
  color: var(--wm-ink);
  opacity: var(--wm-o-base);
  transition:
    color var(--wm-tone) var(--wm-ease),
    opacity var(--wm-tone) var(--wm-ease);
  /* font-weight is deliberately NOT transitioned: animating it changes
     letter advance widths mid-flight and desynchronises the FLIP math. */
}

.wm-letter.is-active { color: var(--wm-accent); opacity: var(--wm-o-active); }
.wm-letter.is-ext    { color: var(--wm-ext);    opacity: var(--wm-o-ext); }
.wm-letter.is-ghost  { color: var(--wm-ink);    opacity: var(--wm-o-ghost); }

.wm-letter.is-exit { opacity: 0; }

/* Letters arriving mid-cycle start invisible, then fade up via the standard
   tone transition once the class is dropped on the next frame. */
.wm-letter.is-enter { opacity: 0; transition: none; }

/* Glyph cross-fade. The outgoing character is painted by ::after, taken out
   of flow so the swap never disturbs layout — the incoming glyph has already
   been committed to the DOM by the time this runs.

   Two-phase: .is-swap sets the start pose with NO transition (so it applies
   on the spot), then .is-swap-run lands one frame later and animates. Giving
   .is-swap a transition would make the new glyph fade out before fading in. */
.wm-glyph { display: inline-block; }

.wm-letter.is-swap > .wm-glyph { opacity: 0; transition: none; }
.wm-letter.is-swap::after {
  content: attr(data-old);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  transition: none;
  pointer-events: none;
}

.wm-letter.is-swap.is-swap-run > .wm-glyph {
  opacity: 1;
  transition: opacity var(--wm-swap) var(--wm-ease);
}

.wm-letter.is-swap.is-swap-run::after {
  opacity: 0;
  transition: opacity var(--wm-swap) var(--wm-ease);
}

/* ---- Beat (RITIM) ---------------------------------------------------- */

.wm-word.is-beat .wm-letter.is-active {
  animation: wm-beat var(--wm-beat) steps(60) infinite;
}

/* Staggered so the pulse travels left-to-right across R-I-T-I-M. */
.wm-word.is-beat .wm-letter.is-active:nth-of-type(2) { animation-delay: 0ms; }
.wm-word.is-beat .wm-letter.is-active:nth-of-type(3) { animation-delay: 30ms; }
.wm-word.is-beat .wm-letter.is-active:nth-of-type(4) { animation-delay: 60ms; }
.wm-word.is-beat .wm-letter.is-active:nth-of-type(5) { animation-delay: 90ms; }
.wm-word.is-beat .wm-letter.is-active:nth-of-type(6) { animation-delay: 120ms; }

@keyframes wm-beat {
  0%   { opacity: 1; }
  22%  { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ---- Caption --------------------------------------------------------- */

.wm-caption {
  display: block;
  margin-top: 1.1rem;
  min-height: 1.5em;             /* reserved, so state changes never reflow */
  font-size: var(--wm-caption-size);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--wm-caption);
  opacity: 1;
  transition: opacity var(--wm-tone) var(--wm-ease);
}

.wm-caption.is-out { opacity: 0; }
.wm-caption .wm-cap-word { color: var(--wm-accent); }
.wm-caption .wm-cap-lang { opacity: 0.7; }

/* ---- Interaction ----------------------------------------------------- */

.wm[data-interactive="true"] .wm-letter { cursor: pointer; }

/* ---- Static fallback list -------------------------------------------- */
/* Visible with no JS, and again when reduced motion is requested. */

.wm-readings {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--wm-caption-size);
  letter-spacing: 0.04em;
  color: var(--wm-caption);
}

.wm-readings li { margin-bottom: 0.3rem; }
.wm-readings b { font-weight: 600; color: var(--wm-ink); }

.js .wm-readings { display: none; }

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wm-letter,
  .wm-glyph,
  .wm-caption { transition: none; }

  .wm-word.is-beat .wm-letter.is-active { animation: none; }

  .js .wm-readings { display: block; }   /* bring the plain list back */
  .wm-caption { display: none; }
}