// ============================================================
// Navigation Component
// Sticky navbar with backdrop blur
// ============================================================

@layer components {
  .cyber-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-bg-secondary);
    backdrop-filter: blur(10px);
  }

  .cyber-nav__brand {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    font-family: Orbitron, var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--cyber-cyan-500);
    text-shadow: var(--glow-text-cyan);

    &::before {
      content: "//";
      color: var(--cyber-magenta-500);
    }
  }

  .cyber-nav__links {
    display: flex;
    gap: var(--space-2xs);
    margin-left: auto;
    list-style: none;
  }

  .cyber-nav__link {
    position: relative;
    padding: var(--space-xs) var(--space-sm);
    overflow: hidden;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    transition: color var(--duration-fast);

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--cyber-cyan-500);
      transform: translateX(-101%);
      transition: transform var(--duration-normal) var(--ease-cyber);
    }

    &:hover,
    &--active {
      color: var(--cyber-cyan-500);
    }

    &:hover::before,
    &--active::before {
      transform: translateX(0);
    }
  }

  // --------------------------------------------------------
  // Status indicator
  // --------------------------------------------------------

  .cyber-status {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border: 1px solid var(--cyber-green-500);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--cyber-green-500);
    background: color-mix(in srgb, var(--cyber-green-500) 15%, transparent);
  }

  .cyber-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyber-green-500);
    animation: pulse-glow 2s infinite;
  }

  @keyframes pulse-glow {
    0%,
    100% {
      box-shadow: 0 0 0 0 var(--cyber-green-500);
    }

    50% {
      box-shadow: 0 0 10px 3px var(--cyber-green-500);
    }
  }
}