/* Container Design System
 * Provides background, shadow, and border styles for container components.
 * These classes create the "levitation" effect where containers appear
 * elevated above the page background (similar to the sidebar).
 */

/* ============================================
   Base Container Variants
   ============================================ */

.container-base {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.container-elevated {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.container-floating {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.container-modal {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
}

.container-premium {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2xl);
}

.container-no-shadow {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: none;
}

/* ============================================
   Glass Variants
   ============================================ */

.container-glass {
  background-color: rgb(var(--glass-bg));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgb(var(--glass-border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.container-glass-elevated {
  background-color: rgb(var(--glass-bg));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgb(var(--glass-border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* ============================================
   Interactive Variants
   ============================================ */

.container-interactive {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.container-interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.container-interactive-elevated {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.container-interactive-elevated:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.container-interactive-floating {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.container-interactive-floating:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}


/* ============================================
   Padding Variants
   ============================================ */

.container-padding-sm {
  padding: 0.5rem;
}

.container-padding-md {
  padding: 1rem;
}

.container-padding-lg {
  padding: 1.5rem;
}

.container-padding-xl {
  padding: 2rem;
}

/* ============================================
   Border Variants
   ============================================ */

.container-border-subtle {
  border-color: hsl(var(--border) / 0.5);
}

.container-border-default {
  border-color: hsl(var(--border));
}

.container-border-strong {
  border-color: hsl(var(--border));
  border-width: 2px;
}

.container-border-accent {
  border-color: hsl(var(--primary) / 0.3);
}

.container-border-success {
  border-color: hsl(var(--success) / 0.3);
}

.container-border-warning {
  border-color: hsl(var(--warning) / 0.3);
}

.container-border-error {
  border-color: hsl(var(--error) / 0.3);
}

/* ============================================
   Gradient Variants
   ============================================ */

.container-gradient-primary {
  background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / 0.05));
}

.container-gradient-success {
  background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--success) / 0.05));
}

.container-gradient-warning {
  background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--warning) / 0.05));
}

.container-gradient-error {
  background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--error) / 0.05));
}

/* ============================================
   Specialized Containers
   ============================================ */

.container-metric {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}

.container-notification {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1rem;
}

.container-feature {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.container-section {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

/* ============================================
   Status Containers
   ============================================ */

.container-success {
  background-color: hsl(var(--success-light));
  border: 1px solid hsl(var(--success) / 0.3);
  border-radius: var(--radius);
  padding: 1rem;
}

.container-warning {
  background-color: hsl(var(--warning-light));
  border: 1px solid hsl(var(--warning) / 0.3);
  border-radius: var(--radius);
  padding: 1rem;
}

.container-error {
  background-color: hsl(var(--error-light));
  border: 1px solid hsl(var(--error) / 0.3);
  border-radius: var(--radius);
  padding: 1rem;
}

.container-info {
  background-color: hsl(var(--ai-blue-light));
  border: 1px solid hsl(var(--ai-blue) / 0.3);
  border-radius: var(--radius);
  padding: 1rem;
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .container-interactive,
  .container-interactive-elevated,
  .container-interactive-floating {
    transition: none;
  }

  .container-interactive:hover,
  .container-interactive-elevated:hover,
  .container-interactive-floating:hover {
    transform: none;
  }
}

/**
 * Mobile Optimizations
 * 
 * This file contains mobile-specific optimizations including:
 * - Touch target size enforcement (44x44px minimum)
 * - Momentum scrolling for iOS
 * - Touch feedback and active states
 * - Mobile-specific layout adjustments
 * 
 * Requirements: 9.1, 9.2, 9.3, 9.4, 9.5
 */

/* ============================================
   Touch Target Size Enforcement (Requirement 9.1)
   Ensures all interactive elements meet 44x44px minimum
   ============================================ */

/* Base touch target class */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Touch target variants */
.touch-target-sm {
  min-height: 40px;
  min-width: 40px;
  touch-action: manipulation;
}

.touch-target-lg {
  min-height: 48px;
  min-width: 48px;
  touch-action: manipulation;
}

/* Ensure all buttons meet touch target requirements */
button:not(.touch-target-override),
[role="button"]:not(.touch-target-override),
a[role="button"]:not(.touch-target-override) {
  touch-action: manipulation;
}

/* Icon-only buttons need explicit width */
button[aria-label]:not([aria-label=""]):not(:has(span)):not(:has(div)),
[role="button"][aria-label]:not([aria-label=""]):not(:has(span)):not(
    :has(div)
  ) {
  min-width: 44px;
}

/* Links should have adequate touch targets */
a:not(.touch-target-override) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  touch-action: manipulation;
}

/* Override for sidebar sub-menu buttons to take full width */
[data-sidebar="menu-sub-button"] {
  display: flex !important;
  width: 100% !important;
}

/* Tab triggers */
[role="tab"] {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Checkbox and radio inputs with labels */
input[type="checkbox"],
input[type="radio"] {
  min-height: 24px;
  min-width: 24px;
  touch-action: manipulation;
}

/* Ensure label click areas are large enough */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  touch-action: manipulation;
}

/* ============================================
     Momentum Scrolling (Requirement 9.2)
     Smooth scrolling on iOS devices
     ============================================ */

/* Enable momentum scrolling globally */
* {
  -webkit-overflow-scrolling: touch;
}

/* Scrollable containers */
.scroll-container,
.overflow-auto,
.overflow-scroll,
.overflow-x-auto,
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Prevent scroll chaining on modals and overlays */
[role="dialog"],
[role="alertdialog"],
.modal,
.drawer {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
     Touch Feedback (Requirement 9.4)
     Visual feedback for touch interactions
     ============================================ */

/* Active state for all interactive elements */
.touch-feedback {
  transition: transform 0.1s ease-out, background-color 0.1s ease-out;
}

.touch-feedback:active {
  transform: scale(0.97);
  background-color: hsl(var(--accent));
}

/* Button active states with scale */
button:not(.no-touch-feedback):active,
[role="button"]:not(.no-touch-feedback):active {
  transform: scale(0.97);
  transition: transform 0.1s ease-out;
}

/* Link active states */
a:not(.no-touch-feedback):active {
  opacity: 0.7;
  transition: opacity 0.1s ease-out;
}

/* Card/container active states */
.card-interactive:active,
.container-interactive:active {
  transform: scale(0.99);
  transition: transform 0.1s ease-out;
}

/* Ripple effect container */
.touch-ripple {
  position: relative;
  overflow: hidden;
}

/* Tab active states */
[role="tab"]:active {
  transform: scale(0.97);
  transition: transform 0.1s ease-out;
}

/* ============================================
     Mobile Layout Optimizations (Requirement 9.3, 9.5)
     Responsive spacing and layout adjustments
     ============================================ */

/* Mobile-specific spacing utilities */
@media (max-width: 768px) {
  /* Reduce padding on mobile */
  .mobile-padding-sm {
    padding: 0.75rem;
  }

  .mobile-padding-md {
    padding: 1rem;
  }

  .mobile-padding-lg {
    padding: 1.5rem;
  }

  /* Adjust container padding */
  .container-padding-md {
    padding: 1rem;
  }

  .container-padding-lg {
    padding: 1.5rem;
  }

  .container-padding-xl {
    padding: 2rem;
  }

  /* Stack elements on mobile */
  .mobile-stack {
    flex-direction: column;
    gap: 1rem;
  }

  /* Full width on mobile */
  .mobile-full-width {
    width: 100%;
  }

  /* Hide on mobile */
  .mobile-hidden {
    display: none;
  }

  /* Show only on mobile */
  .mobile-only {
    display: block;
  }

  /* Adjust text sizes for mobile */
  .text-display-hero {
    font-size: 2rem;
    line-height: 1.2;
  }

  .text-display-large {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  /* Increase touch target spacing */
  .mobile-touch-spacing {
    gap: 0.75rem;
  }

  /* Larger tap targets for critical actions */
  .mobile-primary-action {
    min-height: 48px;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}

/* Hide mobile-only on desktop */
@media (min-width: 769px) {
  .mobile-only {
    display: none;
  }
}

/* ============================================
     Touch-Optimized Components
     ============================================ */

/* Touch-optimized input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
  min-height: 44px;
  font-size: 16px; /* Prevents zoom on iOS */
  touch-action: manipulation;
}

/* Touch-optimized select dropdowns */
select {
  min-height: 44px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  touch-action: manipulation;
}

/* Touch-optimized switches and toggles */
[role="switch"] {
  touch-action: manipulation;
}

/* Touch-optimized sliders */
input[type="range"] {
  min-height: 44px;
  touch-action: manipulation;
}

/* ============================================
     Prevent Unwanted Touch Behaviors
     ============================================ */

/* Prevent text selection on interactive elements */
button,
[role="button"],
[role="tab"],
[role="switch"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent callout on long press */
button,
[role="button"],
a {
  -webkit-touch-callout: none;
}

/* Prevent double-tap zoom on buttons */
button,
[role="button"] {
  touch-action: manipulation;
}

/* ============================================
     Mobile-Specific Hover States
     Only apply hover effects on devices that support hover
     ============================================ */

@media (hover: hover) and (pointer: fine) {
  /* Desktop hover effects */
  .hover-lift:hover {
    transform: translateY(-2px);
  }

  .hover-scale:hover {
    transform: scale(1.02);
  }
}

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .hover-lift:hover,
  .hover-scale:hover {
    transform: none;
  }

  /* Use active states instead */
  .hover-lift:active {
    transform: scale(0.98);
  }

  .hover-scale:active {
    transform: scale(0.98);
  }
}

/* ============================================
     Accessibility Enhancements for Touch
     ============================================ */

/* Focus visible for keyboard navigation */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Remove default focus outline for mouse/touch */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="tab"]:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
     Performance Optimizations for Touch
     ============================================ */

/* GPU acceleration for touch interactions */
button,
[role="button"],
.touch-feedback,
.touch-ripple {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Optimize animations for touch devices */
@media (hover: none) and (pointer: coarse) {
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }

  /* Disable complex animations on mobile */
  .animate-shimmer,
  .animate-gradient-shift,
  .shimmer-gradient {
    animation: none !important;
  }
}

/* ============================================
   Mobile-Specific Utilities
   ============================================ */

/* Touch manipulation utility */
.touch-manipulation {
  touch-action: manipulation;
}

/* Prevent touch actions */
.touch-none {
  touch-action: none;
}

/* Enable pan gestures */
.touch-pan-x {
  touch-action: pan-x;
}

.touch-pan-y {
  touch-action: pan-y;
}

/* Momentum scrolling utility */
.momentum-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent overscroll */
.no-overscroll {
  overscroll-behavior: none;
}

/* Safe area insets for notched devices */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
  padding-left: env(safe-area-inset-left);
}

.safe-area-right {
  padding-right: env(safe-area-inset-right);
}

.safe-area-inset {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/**
 * Animation Utility System
 * 
 * This file provides a comprehensive set of animation utilities for the design system.
 * All animations respect user preferences for reduced motion.
 * 
 * Categories:
 * - Fade animations
 * - Slide animations
 * - Scale animations
 * - Rotate animations
 * - Bounce animations
 * - Duration variants
 * - Easing variants
 * - Delay utilities
 */

/* ============================================
   FADE ANIMATIONS
   ============================================ */

.animate-fade-in-fast {
  animation: fade-in var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.animate-fade-in-base {
  animation: fade-in var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.animate-fade-in-slow {
  animation: fade-in var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.animate-fade-out-fast {
  animation: fade-out var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.animate-fade-out-base {
  animation: fade-out var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* ============================================
     SLIDE ANIMATIONS
     ============================================ */

.animate-slide-up-fast {
  animation: fade-in-up var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-slide-up-base {
  animation: fade-in-up var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-slide-up-slow {
  animation: fade-in-up var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-slide-down-fast {
  animation: slide-down var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-slide-down-base {
  animation: slide-down var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-slide-left-fast {
  animation: slide-in-left var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-slide-left-base {
  animation: slide-in-left var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-slide-right-fast {
  animation: slide-in-right var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-slide-right-base {
  animation: slide-in-right var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ============================================
     SCALE ANIMATIONS
     ============================================ */

.animate-scale-in-fast {
  animation: scale-in var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-scale-in-base {
  animation: scale-in var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-scale-in-slow {
  animation: scale-in var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ============================================
     BOUNCE ANIMATIONS
     ============================================ */

.animate-bounce-in-fast {
  animation: bounce-in 400ms var(--transition-bounce);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-bounce-in-base {
  animation: bounce-in 600ms var(--transition-bounce);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-bounce-in-slow {
  animation: bounce-in 800ms var(--transition-bounce);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-elastic-fast {
  animation: elastic-bounce 600ms var(--transition-elastic);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-elastic-base {
  animation: elastic-bounce 800ms var(--transition-elastic);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ============================================
     ROTATE ANIMATIONS
     ============================================ */

.animate-rotate-in-fast {
  animation: rotate-in var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.animate-rotate-in-base {
  animation: rotate-in var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ============================================
     DURATION UTILITIES
     ============================================ */

.duration-fast {
  animation-duration: var(--transition-fast);
  transition-duration: var(--transition-fast);
}

.duration-base {
  animation-duration: var(--transition-base);
  transition-duration: var(--transition-base);
}

.duration-slow {
  animation-duration: var(--transition-slow);
  transition-duration: var(--transition-slow);
}

.duration-smooth {
  animation-duration: var(--transition-smooth);
  transition-duration: var(--transition-smooth);
}

/* ============================================
     EASING UTILITIES
     ============================================ */

.ease-default {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-bounce {
  animation-timing-function: var(--transition-bounce);
  transition-timing-function: var(--transition-bounce);
}

.ease-elastic {
  animation-timing-function: var(--transition-elastic);
  transition-timing-function: var(--transition-elastic);
}

.ease-spring {
  animation-timing-function: var(--transition-spring);
  transition-timing-function: var(--transition-spring);
}

/* ============================================
     DELAY UTILITIES
     ============================================ */

.delay-0 {
  animation-delay: 0ms;
  transition-delay: 0ms;
}

.delay-75 {
  animation-delay: 75ms;
  transition-delay: 75ms;
}

.delay-150 {
  animation-delay: 150ms;
  transition-delay: 150ms;
}

.delay-300 {
  animation-delay: 300ms;
  transition-delay: 300ms;
}

.delay-500 {
  animation-delay: 500ms;
  transition-delay: 500ms;
}

.delay-700 {
  animation-delay: 700ms;
  transition-delay: 700ms;
}

.delay-1000 {
  animation-delay: 1000ms;
  transition-delay: 1000ms;
}

/* ============================================
     STAGGER UTILITIES (for lists)
     ============================================ */

.stagger-children > * {
  animation: stagger-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.stagger-children > *:nth-child(1) {
  animation-delay: 50ms;
}
.stagger-children > *:nth-child(2) {
  animation-delay: 100ms;
}
.stagger-children > *:nth-child(3) {
  animation-delay: 150ms;
}
.stagger-children > *:nth-child(4) {
  animation-delay: 200ms;
}
.stagger-children > *:nth-child(5) {
  animation-delay: 250ms;
}
.stagger-children > *:nth-child(6) {
  animation-delay: 300ms;
}
.stagger-children > *:nth-child(7) {
  animation-delay: 350ms;
}
.stagger-children > *:nth-child(8) {
  animation-delay: 400ms;
}
.stagger-children > *:nth-child(9) {
  animation-delay: 450ms;
}
.stagger-children > *:nth-child(10) {
  animation-delay: 500ms;
}

/* ============================================
     HOVER ANIMATIONS
     ============================================ */

.hover-lift {
  transition: transform var(--transition-base),
    box-shadow var(--transition-base);
  will-change: transform, box-shadow;
}

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

.hover-lift-lg {
  transition: transform var(--transition-base),
    box-shadow var(--transition-base);
  will-change: transform, box-shadow;
}

.hover-lift-lg:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--transition-base);
  will-change: transform;
  backface-visibility: hidden;
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-scale-lg {
  transition: transform var(--transition-base);
  will-change: transform;
  backface-visibility: hidden;
}

.hover-scale-lg:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow var(--transition-base);
  will-change: box-shadow;
}

.hover-glow:hover {
  box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
}

/* ============================================
     FOCUS ANIMATIONS
     ============================================ */

.focus-ring {
  transition: box-shadow var(--transition-fast);
}

.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
}

.focus-ring-animated:focus-visible {
  outline: none;
  animation: focus-ring-expand 0.3s ease-out;
}

/* ============================================
     ACTIVE STATE ANIMATIONS
     ============================================ */

.active-press {
  transition: transform var(--transition-fast);
  will-change: transform;
  backface-visibility: hidden;
}

.active-press:active {
  transform: scale(0.95);
}

.active-press-lg {
  transition: transform var(--transition-fast);
  will-change: transform;
  backface-visibility: hidden;
}

.active-press-lg:active {
  transform: scale(0.9);
}

/* ============================================
     LOADING ANIMATIONS
     ============================================ */

.animate-pulse-slow {
  animation: pulse-success 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  will-change: opacity, transform;
}

.animate-pulse-base {
  animation: pulse-success 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  will-change: opacity, transform;
}

.animate-pulse-fast {
  animation: pulse-success 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  will-change: opacity, transform;
}

.animate-spin-slow {
  animation: light-ray-rotate 2s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.animate-spin-base {
  animation: light-ray-rotate 1s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.animate-spin-fast {
  animation: light-ray-rotate 0.5s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* ============================================
     REDUCED MOTION SUPPORT
     ============================================ */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reset animated elements to their final state */
  .animate-fade-in-fast,
  .animate-fade-in-base,
  .animate-fade-in-slow,
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-slide-up-fast,
  .animate-slide-up-base,
  .animate-slide-up-slow,
  .animate-slide-down-fast,
  .animate-slide-down-base,
  .animate-slide-left-fast,
  .animate-slide-left-base,
  .animate-slide-right-fast,
  .animate-slide-right-base,
  .animate-slide-in-right,
  .animate-slide-in-left,
  .animate-slide-down,
  .animate-scale-in-fast,
  .animate-scale-in-base,
  .animate-scale-in-slow,
  .animate-scale-in,
  .animate-bounce-in-fast,
  .animate-bounce-in-base,
  .animate-bounce-in-slow,
  .animate-bounce-in,
  .animate-elastic-fast,
  .animate-elastic-base,
  .animate-elastic-bounce,
  .animate-rotate-in-fast,
  .animate-rotate-in-base,
  .animate-rotate-in,
  .animate-page-transition {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  /* Disable hover effects */
  .hover-lift:hover,
  .hover-lift-lg:hover {
    transform: none;
  }

  .hover-scale:hover,
  .hover-scale-lg:hover {
    transform: none;
  }

  /* Disable active effects */
  .active-press:active,
  .active-press-lg:active {
    transform: none;
  }

  /* Keep focus rings for accessibility */
  .focus-ring:focus-visible {
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
  }

  .focus-ring-animated:focus-visible {
    animation: none;
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
  }

  /* Simplify loading animations to opacity changes only */
  .animate-pulse-slow,
  .animate-pulse-base,
  .animate-pulse-fast {
    animation: none !important;
    opacity: 0.7;
  }

  .animate-spin-slow,
  .animate-spin-base,
  .animate-spin-fast {
    animation: none !important;
  }

  /* Disable stagger animations */
  .stagger-children > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}