/* Nav Animations */

/* Logo */

@keyframes logoPulse {
  0% {
    box-shadow: 
      0 0 4.5px rgba(0, 255, 255, 0.3),
      0 0 9px rgba(0, 255, 255, 0.2),
      0 0 13.5px rgba(255, 0, 100, 0.25);
  }
  50% {
    box-shadow: 
      0 0 7.5px rgba(0, 255, 255, 0.5),
      0 0 15px rgba(0, 255, 255, 0.35),
      0 0 22.5px rgba(255, 0, 100, 0.4);
  }
  100% {
    box-shadow: 
      0 0 4.5px rgba(0, 255, 255, 0.3),
      0 0 9px rgba(0, 255, 255, 0.2),
      0 0 13.5px rgba(255, 0, 100, 0.25);
  }
}

.nav-logo {

  animation: logoPulse 6s infinite ease-in-out;

}




/* Hero Content Animations */

@keyframes gravityPull {
  0% {
    transform: scale(1.15) translateY(-1rem);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.hero-content {
  animation: gravityPull 1.2s ease-out forwards;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 1rem rgba(255, 255, 255, 0.342);
  }
  50% {
    box-shadow: 0 0 2rem rgba(255, 255, 255, 0.25);
  }
}

.hero-content button {
  animation: glowPulse 3s ease-in-out infinite;
}

.hero-content p {
  animation: fadeInSub 1.5s ease-out forwards;
  animation-delay: 0.6s;
  opacity: 0;
}

@keyframes fadeInSub {
  to {
    opacity: 1;
  }
}

/* Hero H1 Glow */

@keyframes ambientGlow {
  0%, 100% {
    text-shadow: 0 0 0.4rem rgba(255, 255, 255, 0.3),
                 0 0 0.8rem rgba(130, 180, 255, 0.15);
  }
  50% {
    text-shadow: 0 0 0.6rem rgba(255, 255, 255, 0.45),
                 0 0 1rem rgba(130, 180, 255, 0.25);
  }
}

.hero-content h1 {
  animation: ambientGlow 4s ease-in-out infinite;
}


/* Video Animations */


.shooting-star {
  position: absolute;
  width: .5rem;
  height: .5rem;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 0.6rem white;
  animation: shoot 1s ease-out forwards;
  pointer-events: none;
}

@keyframes shoot {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(10rem, 5rem) scale(0.8); /* Adjust direction/speed here */
  }
}


@keyframes star-fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.hero {
  position: relative;
  z-index: 1;
}

/* Why us */

@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-bullet {
  animation: slideUpFade 0.6s ease forwards;
  opacity: 0;
  animation-delay: calc(var(--order) * 0.1s);
}