/* ===== KEYBOARD EFFECTS / ANIMATIONS ===== */

@keyframes rgb-pulse {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 0 rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2), 0 0 0 0 rgba(120, 160, 255, 0.25); }
  50% { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 0 rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2), 0 0 12px 2px rgba(120, 160, 255, 0.5); }
}

@keyframes rgb-breathe {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 0 rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2), 0 0 0 0 rgba(100, 200, 255, 0.15); }
  50% { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 0 rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2), 0 0 16px 3px rgba(100, 200, 255, 0.4); }
}

@keyframes rgb-wave-glow {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 0 rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2), 0 0 0 0 rgba(150, 100, 255, 0); }
  50% { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 0 rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2), 0 0 10px 2px rgba(150, 100, 255, 0.5); }
}

@keyframes rgb-rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

#main-keyboard.effect-pulse .key:not(.key-spacer) {
  animation: rgb-pulse 1.8s ease-in-out infinite;
}

#main-keyboard.effect-breathe .key:not(.key-spacer) {
  animation: rgb-breathe 3s ease-in-out infinite;
}

#main-keyboard.effect-wave .keyboard-row .key:not(.key-spacer) {
  animation: rgb-wave-glow 2s ease-in-out infinite;
}

#main-keyboard.effect-wave .keyboard-row:nth-child(1) .key:not(.key-spacer) { animation-delay: 0s; }
#main-keyboard.effect-wave .keyboard-row:nth-child(2) .key:not(.key-spacer) { animation-delay: 0.15s; }
#main-keyboard.effect-wave .keyboard-row:nth-child(3) .key:not(.key-spacer) { animation-delay: 0.3s; }
#main-keyboard.effect-wave .keyboard-row:nth-child(4) .key:not(.key-spacer) { animation-delay: 0.45s; }
#main-keyboard.effect-wave .keyboard-row:nth-child(5) .key:not(.key-spacer) { animation-delay: 0.6s; }
#main-keyboard.effect-wave .keyboard-row:nth-child(6) .key:not(.key-spacer) { animation-delay: 0.75s; }

#main-keyboard.effect-rainbow {
  animation: rgb-rainbow 8s linear infinite;
}

/* Effects also apply to nav and numpad keyboards */
.keyboard.effect-pulse .key:not(.key-spacer) {
  animation: rgb-pulse 1.8s ease-in-out infinite;
}

.keyboard.effect-breathe .key:not(.key-spacer) {
  animation: rgb-breathe 3s ease-in-out infinite;
}

.keyboard.effect-wave .keyboard-row .key:not(.key-spacer) {
  animation: rgb-wave-glow 2s ease-in-out infinite;
}

.keyboard.effect-rainbow {
  animation: rgb-rainbow 8s linear infinite;
}