/* ============================================================
   Shimmer border for action buttons — white edge of light that
   races around the button. Vanilla port of the @property/conic
   ShimmerButton. Shared across all pages.
   ============================================================ */

/* Registering --angle lets the browser interpolate it smoothly,
   so the rotation loops seamlessly (no jump at 360°). */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes shimmer-spin { to { --angle: 360deg; } }

/* Applies to the primary call-to-action buttons. */
.btn-primary,
.btn-light {
  position: relative;
  isolation: isolate;
}
.btn-primary::after,
.btn-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                 /* above the fill, below the label (which is z-index:1) */
  border-radius: inherit;
  padding: 1.5px;            /* = thickness of the shimmer ring */
  background: conic-gradient(from var(--angle), transparent 25%, #ffffff 37%, transparent 50%);
  /* show only the 1.5px ring, not the filled centre */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: shimmer-spin 2.5s linear infinite;
  pointer-events: none;
}

/* Calm by default: stop the rotation when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after,
  .btn-light::after { animation: none; }
}