/* ============================================================================
  CTA HEADER STYLESHEET
  Purpose: Header/nav CTA enhancements only
  ============================================================================ */

.nav-item.cta {
  position: relative;
  overflow: visible !important;
  --nav-cta-orbit-dot-size: 4px;
  --nav-cta-orbit-dot-offset: calc(var(--nav-cta-orbit-dot-size) / 2);
  --nav-cta-orbit-outset: 2px;
}

.nav-item.cta a {
  position: relative;
  padding: calc(var(--space-xs) + 3px) var(--space-md);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.26),
              0 0 20px rgba(138, 43, 226, 0.12),
              0 2px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(186, 129, 236, 0.54);
  overflow: hidden;
  animation: nav-border-pulse 3s ease-in-out infinite;
}

.nav-item.cta a:hover,
.nav-item.cta a:focus-visible {
  box-shadow: 0 0 16px rgba(138, 43, 226, 0.34),
              0 0 28px rgba(138, 43, 226, 0.18),
              0 4px 12px rgba(0, 0, 0, 0.24);
  border-color: rgba(206, 168, 243, 0.72);
  outline: 2px solid rgba(206, 168, 243, 0.48);
  outline-offset: 2px;
}

.nav-item.cta a::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px solid rgba(138, 43, 226, 0.8);
  border-radius: var(--radius-md);
  z-index: -1;
  opacity: 0;
  animation: nav-outline-glow 2s ease-in-out infinite;
}

.nav-item.cta a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: nav-shimmer 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.nav-item.cta::before {
  content: none !important;
  animation: none !important;
}

.nav-item.cta::after {
  content: "";
  position: absolute;
  width: var(--nav-cta-orbit-dot-size);
  height: var(--nav-cta-orbit-dot-size);
  border-radius: 50%;
  top: calc(-1 * (var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset)));
  left: calc(-1 * (var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset)));
  right: auto;
  bottom: auto;
  background: radial-gradient(circle, rgba(236, 198, 255, 0.82) 0%, rgba(196, 129, 245, 0.72) 56%, rgba(166, 97, 226, 0.16) 80%, rgba(166, 97, 226, 0) 100%);
  box-shadow: 0 0 7px rgba(214, 161, 248, 0.7), 0 0 11px rgba(181, 108, 236, 0.43);
  opacity: 0.86 !important;
  display: block;
  visibility: visible;
  pointer-events: none;
  z-index: 4;
  animation: nav-cta-orbit-dot 8.3s linear infinite;
}

.nav-item.cta:hover::after,
.nav-item.cta:focus-within::after {
  opacity: 0.92 !important;
  filter: brightness(1.08);
  box-shadow: 0 0 9px rgba(214, 161, 248, 0.78), 0 0 13px rgba(181, 108, 236, 0.5);
}

.header {
  overflow-x: visible;
}

.header-content {
  overflow-x: visible;
}

.nav-list {
  overflow-x: visible;
}

.nav-item.cta {
  overflow: visible !important;
}

@keyframes nav-border-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.26),
                0 0 20px rgba(138, 43, 226, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.2);
    border-color: rgba(186, 129, 236, 0.54);
  }
  50% {
    box-shadow: 0 0 16px rgba(138, 43, 226, 0.34),
                0 0 28px rgba(138, 43, 226, 0.18),
                0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(206, 168, 243, 0.72);
  }
}

@keyframes nav-outline-glow {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

@keyframes nav-shimmer {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes nav-cta-orbit-dot {
  0% {
    top: calc(-1 * (var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset)));
    left: calc(-1 * (var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset)));
  }
  25% {
    top: calc(100% - var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset));
    left: calc(-1 * (var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset)));
  }
  50% {
    top: calc(100% - var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset));
    left: calc(100% - var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset));
  }
  75% {
    top: calc(-1 * (var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset)));
    left: calc(100% - var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset));
  }
  100% {
    top: calc(-1 * (var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset)));
    left: calc(-1 * (var(--nav-cta-orbit-dot-offset) + var(--nav-cta-orbit-outset)));
  }
}

@media (max-width: 767px) {
  .nav-item.cta a::after {
    display: none;
  }

  .nav-item.cta::before {
    display: none;
  }

  .nav-item.cta::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item.cta a,
  .nav-item.cta a::before,
  .nav-item.cta a::after,
  .nav-item.cta::after {
    animation: none !important;
  }
}