/* ============================================================
   Rainbow glow text — GPU-composited per-character hue rotation.
   Apply class="rainbow-text" to any inline element.
   rainbow-text.js splits it into .rainbow-char spans, each
   with a random animation-delay and slight duration variation
   so letters are never in phase with each other or across buttons.
   ============================================================ */

/* Container — no visual effect; just preserves inline flow */
.rainbow-text {
  display: inline;
}

/* Each character span, injected by rainbow-text.js */
.rainbow-char {
  display: inline;
  color: #ff4da6;
  text-shadow:
    0 0 4px  currentColor,
    0 0 14px currentColor,
    0 0 30px currentColor;
  animation: rainbow-hue 3.5s linear infinite;
  will-change: filter;
}

@keyframes rainbow-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}


/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rainbow-char {
    animation: none;
    filter: none;
    color: #ff4da6;
    text-shadow: 0 0 8px currentColor;
  }
}