/* -----------------------------------------------------------------------------
 * Project:       Kirby Castle
 * Owner:         Joshua H. Kirby
 * Copyright:     Copyright (c) 2026 Joshua H. Kirby. All rights reserved.
 * Last Modified: 2026-07-17
 * --------------------------------------------------------------------------- */

/* Shared "pending action" status-line shine -- site-wide like toast.css,
 * used by every "Sending…"/"Deleting…"/"Revoking…" style label in the app
 * (see pending_label.js's startPendingLabel()). Two effects alternate for
 * as long as the label is mounted: a synchronized flash across every
 * letter at once, then that same lightening swept right-to-left one
 * letter at a time. Both reuse the identical pending-label-flash keyframe
 * -- flash applies it to the whole word (one color change, every letter
 * inherits it simultaneously), glide applies it per letter with a
 * staggered delay -- so tuning the keyframe once tunes both effects.
 */

.pending-label-word {
  color: var(--gold-light);
}

.pending-label-letter {
  color: inherit;
}

.pending-label-dots {
  color: var(--gold-light);
}

/* Always three of these in the DOM (see pending_label.js) -- visibility
 * (not display/opacity) toggles which are shown, so every dot's box keeps
 * reserving its own width even while hidden. That's what keeps
 * .pending-label-dots' -- and so the whole element's -- total width
 * constant across the dot cycle, regardless of the current lit count. */
.pending-label-dot {
  visibility: hidden;
}

.pending-label-dot.is-lit {
  visibility: visible;
}

.pending-label-word.is-flashing {
  animation: pending-label-flash 550ms ease-in-out;
}

.pending-label-word.is-gliding .pending-label-letter {
  animation: pending-label-flash 460ms ease-in-out;
  animation-delay: calc(var(--pending-letter-i, 0) * 55ms);
}

@keyframes pending-label-flash {
  0%,
  100% {
    color: var(--gold-light);
  }

  45% {
    color: var(--gold-shine);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pending-label-word.is-flashing,
  .pending-label-word.is-gliding .pending-label-letter {
    animation: none;
  }
}