/* =============================================================
   Shiny call-to-action buttons: a plain-CSS port of the React
   "ShinyButton" component, in FIJI purple. Applies to every
   .btn-primary and the menu's Rush FIJI button (.nav-cta; :is()
   also outweighs the nav's own purple): a light shine circles the border, a faint dot
   pattern and shimmer move inside, and on hover the shine widens
   and the label glows. scroll-fx.js wraps each label in a <span>
   for the glow; without JS the button still shines.
   ============================================================= */
@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; }

:is(.btn-primary, .nav-links a.nav-cta),
:is(.btn-primary, .nav-links a.nav-cta).reveal {
  --shiny-bg: var(--purple, #7B2FBE);
  --shiny-bg-subtle: #9B4FE0;
  --shiny-highlight: #E2CCFF;
  --shiny-highlight-subtle: #F3EBFF;
  --shiny-glow: #B678F7;             /* deeper than the edge shine, so white text stays readable */
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --shiny-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle), 0 10px 30px -12px rgba(123, 47, 190, 0.9);
  transition: opacity 0.7s var(--ease), transform var(--t), box-shadow var(--t),
    --gradient-angle-offset var(--shiny-transition), --gradient-percent var(--shiny-transition), --gradient-shine var(--shiny-transition);
}

:is(.btn-primary, .nav-links a.nav-cta)::before,
:is(.btn-primary, .nav-links a.nav-cta)::after,
:is(.btn-primary, .nav-links a.nav-cta) .btn-label::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

/* Dot pattern that sweeps round with the shine */
:is(.btn-primary, .nav-links a.nav-cta)::before {
  --size: calc(100% - var(--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), white calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: 0.35;
}

/* Inner shimmer */
:is(.btn-primary, .nav-links a.nav-cta)::after {
  --animation: 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: 0.35;
}

:is(.btn-primary, .nav-links a.nav-cta) .btn-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; }

/* Glow that breathes behind the label on hover */
:is(.btn-primary, .nav-links a.nav-cta) .btn-label::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-glow);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: calc(var(--duration) * 1.5) breathe linear infinite;
}

:is(.btn-primary, .nav-links a.nav-cta),
:is(.btn-primary, .nav-links a.nav-cta)::before,
:is(.btn-primary, .nav-links a.nav-cta)::after {
  animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}

:is(.btn-primary, .nav-links a.nav-cta):is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-highlight-subtle);
  background:
    linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
}
:is(.btn-primary, .nav-links a.nav-cta):is(:hover, :focus-visible),
:is(.btn-primary, .nav-links a.nav-cta):is(:hover, :focus-visible)::before,
:is(.btn-primary, .nav-links a.nav-cta):is(:hover, :focus-visible)::after { animation-play-state: running; }
:is(.btn-primary, .nav-links a.nav-cta):is(:hover, :focus-visible) .btn-label::before { opacity: 0.75; }

@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer { to { rotate: 360deg; } }
@keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } }

/* Reduced motion: keep the purple button and a static edge, no spinning. */
@media (prefers-reduced-motion: reduce) {
  :is(.btn-primary, .nav-links a.nav-cta), :is(.btn-primary, .nav-links a.nav-cta)::before, :is(.btn-primary, .nav-links a.nav-cta)::after, :is(.btn-primary, .nav-links a.nav-cta) .btn-label::before { animation: none !important; }
}