.logo {
  display: flex;
  gap: 16px;
  align-items: center;
}

.logo a {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--text-primary);
  text-decoration: none;
}

.ai-orb {
  width: 150px;
  height: 150px;
  margin: 0 auto 30px;
  background: #000;
  border-radius: 50%;
  overflow: hidden;
  /* The blur is essential for the fluid blending effect */
  filter: blur(1px);
  transform: scale(1); /* Base transform for the pulse animation */
  animation: orbPulse 6s infinite cubic-bezier(0.5, 0, 0.5, 1);
  box-shadow: 0 0 40px #9b51e0, 0 0 80px #5d54ff;
}

.logo .ai-orb {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.ai-orb:hover {
  animation-play-state: paused; /* Pause the animation on hover for interactivity */
  filter: blur(0px); /* Slightly reduce blur on hover for clarity */
  transform: scale(1.2); /* Slightly enlarge on hover for emphasis */
  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for hover effects */
  cursor: pointer;
  box-shadow: 0 0 60px #9b51e0, 0 0 100px #5d54ff;
}

.orb-layer {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  mix-blend-mode: screen; /* Blends the light from each layer */
}

/* THE FIX: Instead of one large gradient, each layer now has multiple smaller,
positioned radial gradients. This creates distinct color "blobs" that
flow over each other instead of washing out to white.
*/

.layer-1 {
  background: 
        /* Pink blob */ radial-gradient(
      circle at 20% 20%,
      #e91e63 0%,
      transparent 40%
    ),
    /* Purple blob */
      radial-gradient(circle at 80% 70%, #9c27b0 0%, transparent 40%);
  animation: rotate-1 10s infinite linear;
}

.layer-2 {
  background:
        /* Light Blue blob */ radial-gradient(
      circle at 70% 30%,
      #03a9f4 0%,
      transparent 40%
    ),
    /* Indigo blob */
      radial-gradient(circle at 30% 80%, #3f51b5 0%, transparent 40%);
  animation: rotate-2 12s infinite linear reverse;
}

.layer-3 {
  background:
        /* Cyan blob */ radial-gradient(
      circle at 50% 80%,
      #00bcd4 0%,
      transparent 40%
    ),
    /* Green blob */
      radial-gradient(circle at 10% 10%, #4caf50 0%, transparent 40%);
  animation: rotate-3 15s infinite linear;
}

/* Keyframes remain the same, but now they move the blobs around */
@keyframes rotate-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes orbPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.alert {
  position: fixed;
  z-index: 999;
  right: 20px;
  bottom: 0px;
  min-width: 350px;
  animation: bounceIn 1.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.5);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-dropdown-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.custom-dropdown-option {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}