/* === UNIQUE ICON ANIMATIONS - SLOWER & SMOOTHER === */

/* Base hover state for all nav items */
.nav-item:hover {
  background-color: rgba(var(--md-sys-color-primary), 0.12);
}

/* 1. About (Person): Friendly Wave + Bounce */
@keyframes icon-wave-bounce {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  15% { transform: rotate(-15deg) translateY(-3px); }
  30% { transform: rotate(15deg) translateY(0); }
  45% { transform: rotate(-10deg) translateY(-2px); }
  60% { transform: rotate(10deg) translateY(0); }
}
a[href="#about"]:hover .nav-icon {
  animation: icon-wave-bounce 1.2s ease-in-out infinite;
  color: var(--md-sys-color-primary);
}

/* 2. Skills (Brain): Thinking Pulse + Glow */
@keyframes icon-pulse-glow {
  0%, 100% { 
    transform: scale(1); 
    filter: brightness(1) drop-shadow(0 0 0px var(--md-sys-color-primary));
  }
  50% { 
    transform: scale(1.25); 
    filter: brightness(1.3) drop-shadow(0 0 6px var(--md-sys-color-primary));
  }
}
a[href="#skills"]:hover .nav-icon {
  animation: icon-pulse-glow 2s ease-in-out infinite;
  color: var(--md-sys-color-primary);
}

/* 3. Projects (Rocket): Shake + Lift Off */
@keyframes icon-rocket-shake {
  0% { transform: translateY(0) rotate(0deg); }
  10% { transform: translateY(0) rotate(-3deg); }
  20% { transform: translateY(0) rotate(3deg); }
  30% { transform: translateY(0) rotate(-3deg); }
  40% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-2px) rotate(0deg); }
  60% { transform: translateY(-5px) rotate(-2deg); }
  70% { transform: translateY(-8px) rotate(2deg); }
  80% { transform: translateY(-10px) rotate(0deg); }
  90% { transform: translateY(-8px) rotate(0deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
a[href="#projects"]:hover .nav-icon {
  animation: icon-rocket-shake 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  color: var(--md-sys-color-primary);
}

/* 4. Blog (Article): Page Flip */
@keyframes icon-flip-float {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  25% { transform: translateY(-4px) rotateY(180deg); }
  50% { transform: translateY(-6px) rotateY(360deg); }
  75% { transform: translateY(-4px) rotateY(180deg); }
}
a[href="#blog"]:hover .nav-icon {
  animation: icon-flip-float 2.5s ease-in-out infinite;
  color: var(--md-sys-color-primary);
}

/* 5. Gallery (Image): Camera Shutter Snap */
@keyframes icon-shutter-snap {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  20% { transform: scale(0.7) rotate(-8deg); opacity: 0.8; }
  40% { transform: scale(1.2) rotate(8deg); opacity: 1; }
  60% { transform: scale(0.9) rotate(-4deg); opacity: 0.9; }
  80% { transform: scale(1.1) rotate(4deg); opacity: 1; }
}
a[href="#gallery"]:hover .nav-icon {
  animation: icon-shutter-snap 1.2s ease-in-out infinite;
  color: var(--md-sys-color-primary);
}

/* 6. Contact (Mail): Envelope Swing */
@keyframes icon-mail-swing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-15deg) scale(0.95); }
  30% { transform: rotate(15deg) scale(1.05); }
  50% { transform: rotate(-10deg) scale(0.98); }
  70% { transform: rotate(10deg) scale(1.02); }
  90% { transform: rotate(-5deg) scale(1); }
}
a[href="#contact"]:hover .nav-icon {
  animation: icon-mail-swing 1.5s ease-in-out infinite;
  color: var(--md-sys-color-primary);
}

/* Home (House): Bounce */
@keyframes icon-home-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-4px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-2px); }
}

.home-dock-btn:hover .material-symbols-outlined {
  animation: icon-home-bounce 1s ease-in-out infinite;
  color: var(--md-sys-color-primary);
}

a[href="#home"]:hover .nav-icon {
  animation: icon-home-bounce 1s ease-in-out infinite;
  color: var(--md-sys-color-primary);
}