/* ═══════════════════════════════════════
   css/animations.css
   Museo Nola - Animazioni e transizioni
   ═══════════════════════════════════════ */
@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes panelSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.panel-animate-in {
  animation: panelSlideIn 0.3s var(--transition) forwards;
}

.panel-animate-out {
  animation: panelSlideOut 0.3s var(--transition) forwards;
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.fade-in-up {
  animation: fadeInUp 0.4s ease forwards;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }