/* ════════════════════════════════════════════════
   PIANO SUITE — ANIMATIONS
   ════════════════════════════════════════════════ */

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-10px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.95); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(0,71,225,0); }
  50%     { box-shadow:0 0 0 4px rgba(0,71,225,0.12); }
}
@keyframes gradientShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%     { opacity:0.4; }
}
@keyframes shimmer {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(200%); }
}
@keyframes rippleAnim {
  to { transform:scale(1); opacity:0; }
}

/* Auth-specific */
@keyframes authIn {
  from { opacity:0; transform:scale(0.94) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes authOut {
  from { opacity:1; transform:scale(1); }
  to   { opacity:0; transform:scale(1.03); }
}
@keyframes lockBounce {
  0%,100% { transform:translateY(0); }
  40%     { transform:translateY(-6px); }
  70%     { transform:translateY(-2px); }
}
@keyframes shakeX {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-8px); }
  40%     { transform:translateX(8px); }
  60%     { transform:translateX(-6px); }
  80%     { transform:translateX(5px); }
}
@keyframes dotPop {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.6); }
  100% { transform:scale(1); }
}
@keyframes unlockSpin {
  from { transform:rotate(0deg) scale(1); }
  to   { transform:rotate(360deg) scale(0); }
}
@keyframes overlayFade {
  from { opacity:1; }
  to   { opacity:0; pointer-events:none; }
}
@keyframes scanLine {
  0%   { top:-4%; }
  100% { top:104%; }
}
@keyframes glowPulse {
  0%,100% { box-shadow:0 0 24px rgba(0,71,225,0.20); }
  50%     { box-shadow:0 0 48px rgba(0,71,225,0.45), 0 0 80px rgba(0,183,211,0.15); }
}