@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.shiny-cta {
  /* Defaults (green) — override per-button via inline style or a modifier class. */
  --shiny-cta-bg: #14532d;
  --shiny-cta-bg-subtle: #16a34a;
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: #4ade80;
  --shiny-cta-highlight-subtle: #86efac;
  --shiny-cta-glow-rgb: 74, 222, 128;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.6rem 1.5rem;
  font-family: "Inter", sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  color: var(--shiny-cta-fg);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow:
    inset 0 0.25rem 0.5rem rgba(255, 255, 255, 0.2),
    inset 0 -0.12rem 0.3rem rgba(0, 0, 0, 0.65),
    inset 0 -0.4rem 0.75rem rgba(var(--shiny-cta-glow-rgb), 0.35),
    0 0.5rem 0.85rem -0.3rem rgba(0, 0, 0, 0.55),
    0 0 38px rgba(var(--shiny-cta-glow-rgb), 0.45);
  transition: box-shadow 300ms ease, transform 150ms ease,
    --gradient-angle-offset 800ms, --gradient-percent 800ms, --gradient-shine 800ms;
  animation: gradient-angle var(--duration) linear infinite,
    gradient-angle calc(var(--duration) / 0.4) linear infinite reverse paused;
  animation-composition: add;
}

.shiny-cta:hover {
  transform: translateY(-1px) scale(1.015);
  box-shadow:
    inset 0 0.3rem 0.6rem rgba(255, 255, 255, 0.3),
    inset 0 -0.12rem 0.3rem rgba(0, 0, 0, 0.6),
    inset 0 -0.4rem 0.85rem rgba(var(--shiny-cta-glow-rgb), 0.5),
    0 0.65rem 1rem -0.3rem rgba(0, 0, 0, 0.5),
    0 0 46px rgba(var(--shiny-cta-glow-rgb), 0.55);
}

.shiny-cta:active {
  transform: translateY(3px) scale(0.99);
  box-shadow:
    inset 0 0.15rem 0.35rem rgba(255, 255, 255, 0.15),
    inset 0 -0.08rem 0.2rem rgba(0, 0, 0, 0.7),
    inset 0 -0.25rem 0.5rem rgba(var(--shiny-cta-glow-rgb), 0.3),
    0 0.15rem 0.3rem rgba(0, 0, 0, 0.4);
}

.shiny-cta::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  --position: 2px;
  --space: calc(var(--position) * 2);
  background: radial-gradient(
    circle at var(--position) var(--position),
    white calc(var(--position) / 4),
    transparent 0
  );
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  -webkit-mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.4;
  animation: gradient-angle var(--duration) linear infinite,
    gradient-angle calc(var(--duration) / 0.4) linear infinite reverse paused;
  animation-composition: add;
}

.shiny-cta .shiny-cta-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
  animation-play-state: running;
}

.shiny-cta:is(:hover, :focus-visible)::before {
  animation-play-state: running;
}

.shiny-cta:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.6);
  transform: none;
  animation-play-state: paused;
}

.shiny-cta:disabled:hover {
  transform: none;
  box-shadow:
    inset 0 0.25rem 0.5rem rgba(255, 255, 255, 0.2),
    inset 0 -0.12rem 0.3rem rgba(0, 0, 0, 0.65),
    inset 0 -0.4rem 0.75rem rgba(var(--shiny-cta-glow-rgb), 0.35),
    0 0.5rem 0.85rem -0.3rem rgba(0, 0, 0, 0.55),
    0 0 38px rgba(var(--shiny-cta-glow-rgb), 0.45);
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}

/* Subtle pulsing glow — opt-in per button (sales-page CTAs only). */
.shiny-cta-pulse {
  animation: gradient-angle var(--duration) linear infinite,
    gradient-angle calc(var(--duration) / 0.4) linear infinite reverse paused,
    shiny-cta-pulse-glow 2.4s ease-in-out infinite;
}

@keyframes shiny-cta-pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 0px transparent);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(var(--shiny-cta-glow-rgb), 0.6));
  }
}

/* Same idea as .shiny-cta-pulse but noticeably calmer — for the sticky bar,
   which is already competing for attention with the countdown text. */
.shiny-cta-pulse-subtle {
  animation: gradient-angle var(--duration) linear infinite,
    gradient-angle calc(var(--duration) / 0.4) linear infinite reverse paused,
    shiny-cta-pulse-glow-subtle 3.2s ease-in-out infinite;
}

@keyframes shiny-cta-pulse-glow-subtle {
  0%, 100% {
    filter: drop-shadow(0 0 0px transparent);
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(var(--shiny-cta-glow-rgb), 0.25));
  }
}