frontend/src/scss/components/_navbar.scss

// Cyberpunk color variables
$neon-pink: #ff2a6d;
$neon-blue: #05d9e8;
$neon-purple: #d300c5;
$neon-yellow: #f7f500;
$dark-bg: #0d0221;
$cyber-black: #1a1a1a;

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 25%,
      0 25%,
      0 30%,
      100% 30%,
      100% 50%,
      0 50%,
      0 60%,
      100% 60%,
      100% 75%,
      0 75%,
      0 100%,
      100% 100%
    );
  }
  25% {
    text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 35%,
      0 35%,
      0 65%,
      100% 65%,
      100% 85%,
      0 85%,
      0 100%,
      100% 100%
    );
  }
  50% {
    text-shadow: 0.025em 0.05em 0 $neon-blue, -0.05em -0.05em 0 $neon-pink;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 15%,
      0 15%,
      0 40%,
      100% 40%,
      100% 55%,
      0 55%,
      0 70%,
      100% 70%,
      100% 100%,
      0 100%
    );
  }
  75% {
    text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 45%,
      0 45%,
      0 50%,
      100% 50%,
      100% 70%,
      0 70%,
      0 80%,
      100% 80%,
      100% 100%,
      0 100%
    );
  }
  100% {
    text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 25%,
      0 25%,
      0 30%,
      100% 30%,
      100% 50%,
      0 50%,
      0 60%,
      100% 60%,
      100% 75%,
      0 75%,
      0 100%,
      100% 100%
    );
  }
}

@keyframes neon-flicker {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    opacity: 0.99;
    filter: drop-shadow(0 0 1px rgba($neon-pink, 0.95))
      drop-shadow(0 0 4px rgba($neon-pink, 0.6))
      drop-shadow(0 0 8px rgba($neon-pink, 0.4));
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.4;
    filter: none;
  }
}

@keyframes hover-glow {
  0% {
    box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue, 0 0 15px $neon-blue,
      0 0 20px $neon-blue;
  }
  100% {
    box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue,
      0 0 40px $neon-blue;
  }
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba($cyber-black, 0.85);
  padding: 0.8rem 2rem;
  color: white;
  box-shadow: 0 0 10px $neon-purple, 0 0 20px rgba($neon-purple, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  border-bottom: 1px solid $neon-pink;
  backdrop-filter: blur(5px);

  // Glitch effect for the navbar
  &--glitch {
    animation: glitch 0.2s linear;
  }

  &__logo {
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0.5rem 1rem;
    border: 1px solid $neon-pink;
    border-radius: 4px;
    background-color: rgba($dark-bg, 0.7);

    &-text {
      color: white;
      letter-spacing: 2px;
      animation: neon-flicker 5s infinite alternate;
    }

    &-highlight {
      color: $neon-pink;
      text-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
    }

    &-scanner {
      position: absolute;
      height: 2px;
      width: 100%;
      background: linear-gradient(90deg, transparent, $neon-blue, transparent);
      animation: scanline 2s linear infinite;
    }
  }

  &__greeting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid $neon-blue;
    border-radius: 4px;
    background-color: rgba($dark-bg, 0.7);
    position: absolute;
    left: 40%;
    transform: translateX(-50%);
    overflow: hidden;

    &-text {
      color: $neon-blue;
      font-size: 0.9rem;
      font-weight: bold;
      letter-spacing: 2px;
      text-shadow: 0 0 5px rgba($neon-blue, 0.7);
    }

    &-name {
      color: white;
      font-size: 1.2rem;
      font-weight: bold;
      letter-spacing: 2px;
      animation: neon-flicker 5s infinite alternate;
      text-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
    }

    &::before {
      content: "";
      position: absolute;
      height: 2px;
      width: 100%;
      background: linear-gradient(90deg, transparent, $neon-blue, transparent);
      animation: scanline 2s linear infinite;
    }
  }

  &__links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 0.8rem;
    }

    li {
      position: relative;
    }
  }

  &__link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-weight: 500;
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    letter-spacing: 1px;

    &-icon {
      margin-right: 0.5rem;
      font-size: 1.2rem;
    }

    &-text {
      position: relative;
      z-index: 2;
    }

    &-hover {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: $neon-blue;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    &:hover {
      color: $neon-blue;
      text-shadow: 0 0 5px rgba($neon-blue, 0.7);

      .navbar__link-hover {
        transform: scaleX(1);
        box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue;
      }
    }

    &--active {
      color: $neon-pink;
      text-shadow: 0 0 5px rgba($neon-pink, 0.7);
      border: 1px solid $neon-pink;
      background-color: rgba($neon-pink, 0.1);

      &:hover {
        color: $neon-pink;
      }

      .navbar__link-hover {
        background-color: $neon-pink;
        transform: scaleX(1);
        box-shadow: 0 0 10px $neon-pink, 0 0 20px $neon-pink;
      }
    }
  }
}