/* Sunburst hover for filled buttons: the achievement rays turn slowly over a soft gold glow behind the label.
   Add .btn-rays to a button or link that has its own background. */
.btn-rays { position: relative; isolation: isolate; overflow: hidden; }
.btn-rays::before, .btn-rays::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.btn-rays::before {
  width: 220%; aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .55) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .4) 34%, transparent 64%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .4) 34%, transparent 64%);
  animation: btnRays 12s linear infinite;
}
.btn-rays::after {
  width: 90%; height: 180%; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 214, 120, .4), rgba(255, 190, 90, .12) 55%, rgba(255, 190, 90, 0));
  animation: btnRaysGlow 3.4s ease-in-out infinite;
}
.btn-rays:not(:disabled):hover::before, .btn-rays:not(:disabled):hover::after, .btn-rays:focus-visible::before, .btn-rays:focus-visible::after { opacity: 1; }
.btn-rays:not(:disabled):hover, .btn-rays:focus-visible { text-shadow: 0 1px 3px rgba(20, 38, 64, .55); }
/* Buttons with dark text on a light fill keep their label crisp with a light halo instead. */
.btn-rays--light:not(:disabled):hover, .btn-rays--light:focus-visible { text-shadow: 0 1px 2px rgba(255, 255, 255, .7); }
.btn-rays:not(:hover):not(:focus-visible)::after { animation: none; }
@keyframes btnRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes btnRaysGlow { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .btn-rays::before, .btn-rays::after { animation: none; } }