/* Shared by the static Operator page and the React component. */
@property --shiny-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --shiny-offset { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --shiny-percent { syntax: '<percentage>'; initial-value: 5%; inherits: false; }
@property --shiny-shine { syntax: '<color>'; initial-value: white; inherits: false; }

.shiny-cta {
  --shiny-bg: #000;
  --shiny-bg-subtle: #1a1818;
  --shiny-highlight: var(--cc-orange, #D97757);
  --shiny-highlight-subtle: color-mix(in srgb, var(--shiny-highlight), white 45%);
  --shiny-animation: shiny-angle linear infinite;
  --shiny-duration: 3s;
  --shiny-transition: 800ms cubic-bezier(.25, 1, .5, 1);
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  min-height: 48px;
  width: 100%;
  padding: 12px 20px;
  font: inherit;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(from calc(var(--shiny-angle) - var(--shiny-offset)),
      transparent, var(--shiny-highlight) var(--shiny-percent),
      var(--shiny-shine) calc(var(--shiny-percent) * 2),
      var(--shiny-highlight) calc(var(--shiny-percent) * 3),
      transparent calc(var(--shiny-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle);
  transition: --shiny-offset var(--shiny-transition), --shiny-percent var(--shiny-transition),
    --shiny-shine var(--shiny-transition), transform .15s;
}
.shiny-cta::before, .shiny-cta::after, .shiny-cta > span::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.shiny-cta:active { transform: scale(.96); }
.shiny-cta::before {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: radial-gradient(circle at 2px 2px, white .5px, transparent 0) padding-box;
  background-size: 4px 4px;
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--shiny-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: .4;
}
.shiny-cta::after {
  --shiny-animation: shiny-shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .6;
}
.shiny-cta > span { z-index: 1; }
.shiny-cta > span::before {
  width: calc(100% + 1rem);
  height: calc(100% + 1rem);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-highlight);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: shiny-breathe calc(var(--shiny-duration) * 1.5) linear infinite;
}
.shiny-cta, .shiny-cta::before, .shiny-cta::after {
  animation: var(--shiny-animation) var(--shiny-duration),
    var(--shiny-animation) calc(var(--shiny-duration) / .4) reverse paused;
  animation-composition: add;
}
.shiny-cta:focus-visible { --shiny-percent: 20%; --shiny-offset: 95deg; --shiny-shine: var(--shiny-highlight-subtle); outline: 3px solid var(--shiny-highlight); }
.shiny-cta:focus-visible, .shiny-cta:focus-visible::before, .shiny-cta:focus-visible::after { animation-play-state: running; }
.shiny-cta:focus-visible > span::before { opacity: 1; }
@media (hover: hover) {
  .shiny-cta:hover { --shiny-percent: 20%; --shiny-offset: 95deg; --shiny-shine: var(--shiny-highlight-subtle); }
  .shiny-cta:hover, .shiny-cta:hover::before, .shiny-cta:hover::after { animation-play-state: running; }
  .shiny-cta:hover > span::before { opacity: 1; }
}
@keyframes shiny-angle { to { --shiny-angle: 360deg; } }
@keyframes shiny-shimmer { to { rotate: 360deg; } }
@keyframes shiny-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) {
  .shiny-cta, .shiny-cta::before, .shiny-cta::after, .shiny-cta > span::before { animation: none !important; transition: none !important; }
  .shiny-cta:active { transform: none; }
}