/* Applause Sparkle Underline — zero-JS, a11y-first
   Scope: .applause-sparkle or within .applause-sparkle a
   Principles: prefers-reduced-motion support; focus-visible ring; forced-colors fallback; print solid underline.
*/

:root {
  --applause-underline-color: currentColor;
  --applause-sparkle-color: color-mix(in oklab, currentColor 80%, white 20%);
  --applause-focus-ring: 2px dotted currentColor;
}

.applause-sparkle,
.applause-sparkle a {
  text-decoration: none;
  background-image:
    radial-gradient(8px 8px at 0 110%, var(--applause-sparkle-color) 35%, transparent 36%),
    radial-gradient(10px 10px at 12% 110%, transparent 50%, var(--applause-underline-color) 51%),
    linear-gradient(var(--applause-underline-color), var(--applause-underline-color));
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: 8px 8px, 10px 10px, 100% 2px;
  background-position: 0 100%, 0 100%, 0 100%;
  text-underline-offset: 0.2em;
  padding-bottom: 2px; /* space for underline */
  transition: background-size .2s ease-out, filter .2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .applause-sparkle,
  .applause-sparkle a {
    transition: none;
  }
}

/* Hover/active creates a gentle "applause shimmer" by widening underline and brightening */
.applause-sparkle:hover,
.applause-sparkle:active,
.applause-sparkle a:hover,
.applause-sparkle a:active {
  background-size: 8px 8px, 10px 10px, 100% 3px;
  filter: brightness(1.06);
}

/* Keyboard focus ring */
.applause-sparkle:focus-visible,
.applause-sparkle a:focus-visible {
  outline: var(--applause-focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Forced colors (Windows High Contrast) — solid underline fallback */
@media (forced-colors: active) {
  .applause-sparkle,
  .applause-sparkle a {
    background: none;
    text-decoration: underline;
    -ms-high-contrast-adjust: auto;
    forced-color-adjust: auto;
  }
}

/* Print: ensure visible solid underline */
@media print {
  .applause-sparkle,
  .applause-sparkle a {
    background: none;
    text-decoration: underline;
  }
}