/* Adapted from the supplied ShinyButton: rotating arc, speckle and sheen. */
@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: #fffbe8;
  inherits: false;
}

.theme-apple .shiny-button {
  --gleam-base: var(--apple-accent-dark);
  --gleam-inset: var(--apple-accent);
  --gleam-label: var(--apple-surface-warm);
  --gleam-accent: #b75c76;
  --gleam-accent-soft: #e8b9ab;
  --gleam-animation: shiny-angle linear infinite;
  --gleam-duration: 3s;
  --gleam-shadow-size: 2px;
  --gleam-transition: .8s cubic-bezier(.25, 1, .5, 1);
}

.theme-apple .shiny-button,
.theme-apple .shiny-button:is(:hover, :focus-visible) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 32px;
  color: var(--gleam-label);
  background:
    linear-gradient(var(--gleam-base), var(--gleam-base)) padding-box,
    conic-gradient(
      from calc(var(--shiny-angle) - var(--shiny-offset)),
      transparent,
      var(--gleam-accent) var(--shiny-percent),
      var(--shiny-shine) calc(var(--shiny-percent) * 2),
      var(--gleam-accent) calc(var(--shiny-percent) * 3),
      transparent calc(var(--shiny-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--gleam-inset);
  cursor: pointer;
  outline-offset: 4px;
  transition: var(--gleam-transition);
  transition-property: --shiny-offset, --shiny-percent, --shiny-shine;
}

.theme-apple .shiny-button::before,
.theme-apple .shiny-button::after,
.theme-apple .shiny-button span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.theme-apple .shiny-button:active { translate: 0 1px; }

.theme-apple .shiny-button::before {
  --size: calc(100% - var(--gleam-shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), var(--gleam-label) calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--shiny-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: .4;
}

.theme-apple .shiny-button::after {
  --gleam-animation: shiny-shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--gleam-accent), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .6;
}

.theme-apple .shiny-button span,
.theme-apple .shiny-button > svg { z-index: 1; }

.theme-apple .shiny-button span::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--gleam-accent);
  opacity: 0;
  transition: opacity var(--gleam-transition);
  animation: calc(var(--gleam-duration) * 1.5) shiny-breathe linear infinite paused;
}

.theme-apple .shiny-button,
.theme-apple .shiny-button::before,
.theme-apple .shiny-button::after {
  animation: var(--gleam-animation) var(--gleam-duration), var(--gleam-animation) calc(var(--gleam-duration) / .4) reverse paused;
  animation-composition: add;
  animation-play-state: paused, paused;
}

.theme-apple .shiny-button.is-visible,
.theme-apple .shiny-button.is-visible::before,
.theme-apple .shiny-button.is-visible::after { animation-play-state: running, paused; }

.theme-apple .shiny-button.is-visible span::before { animation-play-state: running; }

.theme-apple .shiny-button:focus-visible {
  --shiny-percent: 20%;
  --shiny-offset: 95deg;
  --shiny-shine: var(--gleam-accent-soft);
  outline: 3px solid var(--apple-accent);
}

.theme-apple .shiny-button.is-visible:focus-visible,
.theme-apple .shiny-button.is-visible:focus-visible::before,
.theme-apple .shiny-button.is-visible:focus-visible::after { animation-play-state: running, running; }

.theme-apple .shiny-button:focus-visible span::before { opacity: 1; }

@media (hover: hover) {
  .theme-apple .shiny-button:hover {
    --shiny-percent: 20%;
    --shiny-offset: 95deg;
    --shiny-shine: var(--gleam-accent-soft);
  }
  .theme-apple .shiny-button.is-visible:hover,
  .theme-apple .shiny-button.is-visible:hover::before,
  .theme-apple .shiny-button.is-visible:hover::after { animation-play-state: running, running; }
  .theme-apple .shiny-button: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; }
}

/* Inverted CTA palettes keep the reflection coordinated with the fill. */
.theme-apple .shiny-button--light,
.theme-apple .shiny-button--invert:focus-visible {
  --gleam-base: var(--apple-surface);
  --gleam-inset: #dec3c8;
  --gleam-label: var(--apple-accent-dark);
  --gleam-accent: #9b6171;
  --gleam-accent-soft: var(--apple-accent);
  --shiny-shine: var(--apple-accent);
}

.theme-apple .shiny-button--light:focus-visible {
  --gleam-base: var(--apple-accent-dark);
  --gleam-inset: #b75c76;
  --gleam-label: var(--apple-surface-warm);
  --gleam-accent: #b75c76;
  --gleam-accent-soft: #e8b9ab;
  --shiny-shine: var(--gleam-accent-soft);
  outline-color: var(--apple-surface-warm);
}

@media (hover: hover) {
  .theme-apple .shiny-button--invert:hover {
    --gleam-base: var(--apple-surface);
    --gleam-inset: #dec3c8;
    --gleam-label: var(--apple-accent-dark);
    --gleam-accent: #9b6171;
    --gleam-accent-soft: var(--apple-accent);
    --shiny-shine: var(--apple-accent);
  }
  .theme-apple .shiny-button--light:hover {
    --gleam-base: var(--apple-accent-dark);
    --gleam-inset: #b75c76;
    --gleam-label: var(--apple-surface-warm);
    --gleam-accent: #b75c76;
    --gleam-accent-soft: #e8b9ab;
    --shiny-shine: var(--gleam-accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-apple .shiny-button,
  .theme-apple .shiny-button:is(:hover, :focus-visible),
  .theme-apple .shiny-button::before,
  .theme-apple .shiny-button::after,
  .theme-apple .shiny-button span::before {
    animation: none;
    transition: none;
  }
  .theme-apple .shiny-button:is(:hover, :focus-visible) span::before { opacity: 0; }
}