/**
 * DarkHoster Motion & Animations System
 * Micro-interactions, subtle transitions, and strict prefers-reduced-motion support
 */

/* Fade-in & Fade-up utilities */
.dh-fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.dh-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay classes */
.dh-delay-100 { transition-delay: 100ms; }
.dh-delay-200 { transition-delay: 200ms; }
.dh-delay-300 { transition-delay: 300ms; }

/* Interactive Hover Lift */
.dh-hover-lift {
  transition: transform var(--dh-transition-fast), box-shadow var(--dh-transition-fast);
}

.dh-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--dh-shadow-sm);
}

/* 
 * Reduced Motion Override
 * NOTE on !important: Used strictly and exclusively here under WCAG 2.1 SC 2.3.3.
 * !important is required to globally override component-level animation/transition 
 * specificity across all selectors when users request reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .dh-fade-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .dh-status-dot-pulse {
    animation: none !important;
  }

  .dh-spinner {
    animation-duration: 1.5s !important;
  }
}