.shiny {
  --bg: #3984ff;
  --bg-hover: #4d93ff;
  --shine-size: 740px;
  --shine-x: 0%;
  --shine-y: 0%;
  overflow: hidden;
  position: relative;
  transition: background 0.25s ease, transform 0.18s ease, box-shadow 0.18s ease;
  /* Respect reduced-motion */
}
.shiny::after {
  content: "";
  position: absolute;
  top: var(--shine-y);
  left: var(--shine-x);
  width: var(--shine-size);
  height: var(--shine-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(217, 70, 239, 0.6) 0%, rgba(139, 92, 246, 0.6) 25%, rgba(var(--si-primary-rgb), 0.6) 45%, rgba(0, 0, 0, 0) 67%);
  opacity: 0.25;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
}
.shiny:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.shiny:hover::after {
  opacity: 0.4;
}
.shiny-button {
  --shine-size: 240px;
}
.shiny-button::after {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 67%);
}
.shiny:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.shiny:active::after {
  opacity: 0.14;
}
@media (prefers-reduced-motion: reduce) {
  .shiny {
    transition: none;
  }
  .shiny:hover, .shiny:active {
    transform: none;
  }
}

/*# sourceMappingURL=shiny-element.css-LTEYCS8.map */