@property --shimmer-wander {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 85%;
}

@property --shimmer-sway {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* One glint, placed by the sum of a slow uneven wander and a short sway whose periods share no rhythm, so its path */
/* takes minutes to come round again and never settles on one spot. Both end with the glint off the text, where the */
/* app's reduced-motion rule leaves it. */
@keyframes shimmer-wander {
  0%,
  100% { --shimmer-wander: 85%; }
  18% { --shimmer-wander: 35%; }
  33% { --shimmer-wander: 60%; }
  52% { --shimmer-wander: 15%; }
  70% { --shimmer-wander: 50%; }
  86% { --shimmer-wander: 30%; }
}

@keyframes shimmer-sway {
  from { --shimmer-sway: -18%; }
  to { --shimmer-sway: 18%; }
}

.shimmer {
  --shimmer-glint: color-mix(in oklab, var(--accent-primary) 55%, var(--surface-base));
  --shimmer-cycle: 17s;
  --shimmer-delay: 0s;

  background-image:
    linear-gradient(100deg, transparent 42%, var(--shimmer-glint) 50%, transparent 58%),
    linear-gradient(currentColor, currentColor);
  background-position: calc(var(--shimmer-wander) + var(--shimmer-sway)) 0, 0 0;
  background-repeat: no-repeat;
  background-size: 300% 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    shimmer-wander var(--shimmer-cycle) var(--ease-in-out) var(--shimmer-delay) infinite both,
    shimmer-sway 7s var(--ease-in-out) var(--shimmer-delay) infinite alternate both;
}