/* NOCTURNE — CTA button glow & circling light effect
   Applies to .btn-primary, .btn-gold, .nav-cta */

@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.btn-primary,
.btn-gold,
.nav-cta {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  z-index: 1;
}

/* Soft pulsing glow underneath the button */
.btn-primary::after,
.btn-gold::after,
.nav-cta::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.45) 0%, rgba(var(--accent-rgb), 0.18) 35%, transparent 70%);
  filter: blur(12px);
  z-index: -2;
  opacity: 0.7;
  animation: glowPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 0.95; transform: scale(1.06); }
}

/* Circling light around the button */
.btn-primary::before,
.btn-gold::before,
.nav-cta::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0%,
    rgba(var(--accent-rgb), 0.9) 18%,
    rgba(255, 240, 200, 1) 25%,
    rgba(var(--accent-rgb), 0.9) 32%,
    transparent 50%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  z-index: -1;
  animation: rotateGlow 3.5s linear infinite;
  pointer-events: none;
}

@keyframes rotateGlow {
  to { --glow-angle: 360deg; }
}

/* Stronger hover: intensify both effects */
.btn-primary:hover::after,
.btn-gold:hover::after,
.nav-cta:hover::after {
  opacity: 1;
  animation-duration: 1.2s;
}
.btn-primary:hover::before,
.btn-gold:hover::before,
.nav-cta:hover::before {
  animation-duration: 1.5s;
}

/* Fallback for browsers without @property support — static gradient still visible */
@supports not (background: conic-gradient(from 0deg, red)) {
  .btn-primary::before,
  .btn-gold::before,
  .nav-cta::before {
    background: linear-gradient(45deg, transparent, rgba(var(--accent-rgb), 0.8), transparent);
  }
}