/* type-spark.css - heading particle assembly support. Owner: TYPE-SPARK.
   JS adds .ts-host + .ts-pending at init only, so no-JS visitors always see text.
   Reduced motion is a JS no-op; the media block below is a pure safety net. */

.ts-host {
  position: relative;
  /* Internal room so last-line descenders + top accents fall inside the box;
     the point-cloud canvas then never needs to spill past an overflow:hidden
     ancestor (e.g. .keychar-stage) to show them. */
  padding-top: 0.14em;
  padding-bottom: 0.24em;
  transition: color 0.35s var(--ease-out, ease);
}

.ts-host em.accent {
  transition: color 0.35s var(--ease-out, ease);
}

.ts-pending,
.ts-pending em.accent,
.ts-live,
.ts-live em.accent {
  color: transparent;
}

canvas.ts-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ts-pending,
  .ts-pending em.accent,
  .ts-live,
  .ts-live em.accent {
    color: inherit;
  }
}