/**
 * WaMax Design System — Motion & Micro-interactions
 * From WaMax-Brand-Kit/css/motion.css with accessibility & reduced-motion support
 */

@keyframes wamax-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wamax-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

@keyframes wamax-load {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.brand-enter {
  animation: wamax-enter 420ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
}

.heading-enter {
  animation: wamax-enter 320ms var(--ease, ease-out) both;
}

.pulse-animate {
  animation: wamax-pulse 2s infinite ease-in-out;
}

.loading-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.loading-dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: wamax-load 1.2s ease-in-out infinite;
}

.loading-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.loading-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

/* Accessibility: strictly honor user reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .brand-enter,
  .heading-enter,
  .pulse-animate,
  .loading-dots i {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .btn,
  .tab-btn,
  .form-control {
    transition: none !important;
  }
  .btn:hover,
  .tab-btn:hover {
    transform: none !important;
  }
}