/* Custom Animations */

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
  animation: fadeInUp 1s ease forwards;
}
.animate-fadeInUp.delay-200 { animation-delay: 0.2s; }
.animate-fadeInUp.delay-400 { animation-delay: 0.4s; }

@keyframes fadeInElegant {
  0% { opacity: 0; transform: translateY(40px) scale(0.98); letter-spacing: 0.1em; }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0em; }
}
.animate-fade-in-elegant {
  animation: fadeInElegant 1.2s ease-out forwards;
}

@keyframes fadeInDelayed {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-delayed {
  animation: fadeInDelayed 1.5s ease-out forwards;
  animation-delay: 0.6s;
}
/* Navbar link hover underline effect */
.nav-link {
  @apply relative flex items-center text-gray-300 hover:text-white font-light 
         text-sm lg:text-base px-3 py-2 rounded-lg transition-all duration-300 hover:bg-white/5;
}

.nav-link span {
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#0f0f0f] to-yellow-400 
         transition-all duration-300;
}

.nav-link:hover span {
  width: 100%;
}

/* Contact button style */
.nav-btn {
  @apply relative ml-4 bg-gradient-to-r from-[#0f0f0f] to-yellow-500 py-2 px-6 rounded-full 
         font-medium text-sm lg:text-base transition-all duration-300 
         hover:shadow-lg hover:shadow-[#5865F2]/25 hover:scale-105 active:scale-95;
}

/* Hamburger button */
.hamburger-btn {
  @apply relative w-12 h-12 flex items-center justify-center rounded-lg hover:bg-white/10 
         transition-all duration-300 z-50;
}

.bar {
  @apply w-full h-0.5 bg-yellow-400 rounded transition-all duration-300;
}

  /* old shimmer animation */
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .shimmer-hover {
    background-size: 200% auto;
    background-image: linear-gradient(to right, #facc15, #fff9c4, #ca8a04, #facc15);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    transition: all 0.4s ease;
  }
  .group:hover .shimmer-hover {
    animation: shimmer 3s linear infinite, glowPulse 2.5s ease-in-out infinite;
  }

  .underline-hover {
    background-size: 200% auto;
    transition: all 0.5s ease;
  }
  .group:hover .underline-hover {
    animation: shimmer 3s linear infinite, underlineGlow 2.5s ease-in-out infinite;
  }
  /* Reusable styles */
  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    color: #d1d5db;
    font-weight: 300;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
  }
  .nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
  }
  .contact-btn {
    margin-left: 1rem;
    background: linear-gradient(to right, #0f0f0f, #facc15);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s;
  }
  .contact-btn:hover {
    background: linear-gradient(to right, #f1c206, #fde047);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(250, 200, 1, 0.3);
  }
  /*  -------------*/
    .perspective {
    perspective: 1500px;
  }
  .slide {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform-style: preserve-3d;
    opacity: 0;
    pointer-events: none;
  }
  .slide.active {
    opacity: 1;
    transform: rotateY(0deg);
    z-index: 10;
    pointer-events: auto;
  }
  .slide.prev {
    transform: rotateY(-180deg);
    opacity: 0;
    z-index: 5;
  }
  .slide.next {
    transform: rotateY(180deg);
    opacity: 0;
    z-index: 5;
  }
  .dot.active {
    background-color: #facc15; /* yellow-400 */
    opacity: 1;
  }