/* ====================================================================
   VipRix — Magic Tab Bar Navbar Effect
   Adapted from Iconic-Magic-Tab-Bar: a sliding ring/frame selector
   that floats to the active navigation link.
   Colors: Cyan in dark mode, Dark navy in light mode
   ==================================================================== */

:root {
  --nav-sel-color: #0ef;
  --nav-sel-glow: rgba(0, 238, 255, 0.5);
  --nav-sel-glow-soft: rgba(0, 238, 255, 0.2);
  --nav-sel-bg: rgba(0, 238, 255, 0.08);
}

/* Header is always black — keep cyan selector in both modes */
html:not([data-theme="dark"]) {
  --nav-sel-color: #0ef;
  --nav-sel-glow: rgba(0, 238, 255, 0.5);
  --nav-sel-glow-soft: rgba(0, 238, 255, 0.2);
  --nav-sel-bg: rgba(0, 238, 255, 0.08);
}

/* ── The nav-links needs relative positioning for the selector (desktop only) ── */
@media (min-width: 769px) {
  .nav-links {
    position: relative;
  }
}

/* ─��� The sliding selector bubble ── */
.nav-magic-selector {
  position: absolute;
  height: 36px;
  border-radius: 50px;
  pointer-events: none;
  z-index: -1;
  transition:
    left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    width 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  opacity: 0;
}

.nav-magic-selector.visible {
  opacity: 1;
}

/* ── Ring frame effect (the "magic" from the tab bar) ── */
.nav-magic-selector::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  border: 2px solid var(--nav-sel-color);
  background: var(--nav-sel-bg);
  box-shadow:
    0 0 8px var(--nav-sel-glow-soft),
    inset 0 0 8px var(--nav-sel-glow-soft);
}

/* ── Outer glow ring ── */
.nav-magic-selector::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50px;
  border: 1.5px solid var(--nav-sel-glow-soft);
  filter: blur(2px);
}

/* ── Active link style enhancements ── */
.header .nav-links a.active {
  font-weight: 700 !important;
  filter: drop-shadow(0 0 6px var(--nav-sel-glow-soft));
}

/* ── Hover glow on non-active links ── */
.header .nav-links a:not(.nav-cta):not(.active):hover {
  font-weight: 700 !important;
  filter: drop-shadow(0 0 4px var(--nav-sel-glow-soft));
}

/* ── The "pop" dot below active link (subtle indicator like the ZIP's glow bar) ── */
.nav-magic-dot {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nav-sel-color);
  box-shadow: 0 0 8px var(--nav-sel-glow), 0 0 16px var(--nav-sel-glow-soft);
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}

.nav-magic-selector.visible .nav-magic-dot {
  opacity: 1;
}

/* ── Mobile: hide the selector on small screens ── */
@media (max-width: 900px) {
  .nav-magic-selector {
    display: none !important;
  }
}