/* Mouse Glow */
.rotator-item {
  height: 3.5rem; /* exact height of container for mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}

@keyframes word-carousel {
  0%,
  20% {
    transform: translateY(0);
  }
  25%,
  45% {
    transform: translateY(-3.5rem);
  } /* move exactly 1 item */
  50%,
  70% {
    transform: translateY(-7rem);
  } /* 2 items */
  75%,
  100% {
    transform: translateY(-10.5rem);
  } /* 3 items */
}

@media (min-width: 768px) {
  .rotator-item {
    height: 5rem; /* match desktop container height */
    font-size: 1.75rem;
  }

  @keyframes word-carousel {
    0%,
    20% {
      transform: translateY(0);
    }
    25%,
    45% {
      transform: translateY(-5rem);
    }
    50%,
    70% {
      transform: translateY(-10rem);
    }
    75%,
    100% {
      transform: translateY(-15rem);
    }
  }
}

.animate-word-carousel {
  animation: word-carousel 5s infinite cubic-bezier(0.8, 0, 0.2, 1);
}

@media (min-width: 768px) {
  .rotator-item {
    height: 5rem; /* match desktop container height */
    font-size: 1.75rem;
  }
}

#mouse-glow {
  background: radial-gradient(
    800px circle at var(--x, 50%) var(--y, 50%),
    rgba(0, 210, 255, 0.15),
    transparent 80%
  );
}

/* Badge Pulse */

@keyframes badge-pulse {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 rgba(0, 210, 255, 0);
  }
  50% {
    border-color: rgba(0, 210, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
  }
}
.animate-badge-glow {
  animation: badge-pulse 3s infinite ease-in-out;
}

/* Shimmer effect for gradients */
@keyframes shimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}
.animate-shimmer {
  background-size: 200% auto;
  animation: shimmer 5s linear infinite;
}

/* Glow Sphere Pulse */
@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.3;
  }
}
.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fade-up 1s ease-out forwards;
}

@keyframes gradient-shimmer {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}

.hero-title-gradient {
  background: linear-gradient(90deg, #00d2ff, #ffffff, #00d2ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-style: italic;
  animation: gradient-shimmer 5s ease infinite, fade-up 1s ease-out forwards;
}

#navbar-container {
  min-height: 80px; /* Match the actual height of your navbar */
  display: block;
  background-color: #ffffff; /* Use your navbar's background color */
}