/* Custom CSS for Typewriter Effect */
#typing-cursor {
    font-weight: 300; 
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Custom CSS for Animated Pulsing Shadow (New) */
.animated-ring-shadow {
    /* Apply the pulsing animation */
    animation: pulse-shadow 2.5s infinite ease-in-out;
    /* Center and size the container */
    width: 128px; /* 120px image + 8px padding/shadow margin */
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

@keyframes pulse-shadow {
    0% {
        /* Start with subtle blue shadow */
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5), 0 0 0 0 rgba(14, 165, 233, 0.4);
    }
    50% {
        /* Pulse out to a wider, transparent shadow with both colors */
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2), 0 0 0 16px rgba(14, 165, 233, 0.05);
    }
    100% {
        /* Return to the starting point */
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5), 0 0 0 0 rgba(14, 165, 233, 0.4);
    }
}

/*  */
@keyframes float {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
}
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pulse-slow {
    0%,100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes particle-move {
    0% { transform: translate(0,0) scale(1); opacity: 1; }
    50% { transform: translate(20px,-30px) scale(1.2); opacity: 0.6; }
    100% { transform: translate(0,0) scale(1); opacity: 1; }
}
@keyframes particle-move-delayed {
    0% { transform: translate(0,0); opacity: 1; }
    50% { transform: translate(-25px,25px); opacity: 0.5; }
    100% { transform: translate(0,0); opacity: 1; }
}
@keyframes particle-move-slow {
    0% { transform: translate(0,0); opacity: 0.8; }
    50% { transform: translate(15px,-20px); opacity: 0.3; }
    100% { transform: translate(0,0); opacity: 0.8; }
}

/* Utility Animations */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 16s linear infinite; }
.animate-pulse-slow { animation: pulse-slow 5s ease-in-out infinite; }
.animate-particle-move { animation: particle-move 4s ease-in-out infinite; }
.animate-particle-move-delayed { animation: particle-move-delayed 6s ease-in-out infinite; }
.animate-particle-move-slow { animation: particle-move-slow 8s ease-in-out infinite; }


/* Navbar Section */
.nav-link {
    position: relative;
    color: white;
    font-weight: 500;
    transition: all 0.3s;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: linear-gradient(90deg, #0ea5e9, #3b82f6);
    transition: width 0.3s;
  }
  .nav-link:hover {
    color: #0ea5e9;
  }
  .nav-link:hover::after {
    width: 100%;
  }
  .mobile-link {
    color: white;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 8px;
    transition: all 0.3s;
  }
  .mobile-link:hover {
    background-color: rgba(14, 165, 233, 0.15);
    color: #0ea5e9;
  }