/* 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);
}

/* Every emphasis inside a sparked heading must go transparent, not just
   em.accent. two-world.css sets `.alethia h2 em { color: var(--sky) }` as a
   DIRECT declaration, which beats the transparent this element only passes down
   by inheritance — so a bare <em> stayed solid and was painted on top of the
   particle copy of the same sentence. These selectors outrank it. */
.ts-pending,
.ts-pending em,
.ts-pending .accent,
.ts-live,
.ts-live em,
.ts-live .accent,
.alethia .ts-pending em,
.alethia .ts-live em {
  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-live {
    color: inherit;
  }
  /* must outrank the transparency above AND restore the accent colour that
     two-world.css would otherwise have supplied */
  .alethia .ts-pending em,
  .alethia .ts-live em,
  .ts-pending .accent,
  .ts-live .accent {
    color: var(--sky);
  }
}