/**
 * AIAgens Motion Optimization System
 * Version: 1.0.0
 * Date: 2025-12-25
 *
 * Enterprise-grade performance optimization for homepage animations.
 *
 * Features:
 * - prefers-reduced-motion support (WCAG 2.1 compliance)
 * - Viewport-based animation pausing (IntersectionObserver-ready)
 * - Mobile battery optimization
 * - will-change management
 *
 * Load order: AFTER home-premium.css, BEFORE animation-controller.js
 */

/* ========================================================================
   1. REDUCED MOTION - WCAG 2.1 ACCESSIBILITY COMPLIANCE
   ======================================================================== */

/**
 * Respects user's motion preference (OS-level setting)
 * - macOS: System Preferences > Accessibility > Display > Reduce motion
 * - Windows: Settings > Ease of Access > Display > Show animations
 * - iOS: Settings > Accessibility > Motion > Reduce Motion
 */
@media (prefers-reduced-motion: reduce) {
  /* Hero wave animations - CRITICAL: instant transition */
  .hero-v171::before,
  .hero-v171::after {
    animation: none !important;
    transform: none !important;
  }

  /* Glow shift animations */
  .btn-hero-primary.hp-pulse,
  .hero-video-v171 .player-wrapper {
    animation: none !important;
    box-shadow: 0 20px 40px rgba(99,102,241,0.14) !important;
  }

  /* Float chip animations (feature strip) */
  .feature-strip-v171 .feat {
    animation: none !important;
    transform: none !important;
  }

  /* Scroll cue */
  .scroll-cue {
    animation: none !important;
    transform: translateX(-50%) !important;
  }

  /* Hero button ripple */
  .btn-hero-primary:focus-visible {
    animation: none !important;
  }

  /* Blob animations (hero-live-demo.css) */
  .blob-layer-1,
  .blob-layer-2,
  .blob-layer-3,
  .blob-glow,
  .demo-orb-active .blob-layer-1,
  .demo-orb-active .blob-layer-2,
  .demo-orb-active .blob-layer-3,
  .demo-orb-active .blob-glow {
    animation: none !important;
    transform: scale(1) !important;
  }

  /* Reveal-on-scroll */
  .hp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* All premium animations via opt-in flag */
  body[data-premium-anim="on"] .hero-v171::before,
  body[data-premium-anim="on"] .hero-v171::after,
  body[data-premium-anim="on"] .btn-hero-primary.hp-pulse,
  body[data-premium-anim="on"] .hero-video-v171 .player-wrapper,
  body[data-premium-anim="on"] .feature-strip-v171 .feat,
  body[data-premium-anim="on"] .scroll-cue {
    animation: none !important;
  }
}

/* ========================================================================
   2. VIEWPORT-BASED ANIMATION PAUSING (IntersectionObserver)
   ======================================================================== */

/**
 * These classes are toggled by AnimationController.js
 * when elements enter/leave viewport
 */

/* Pause state - applied when element is out of viewport */
.anim-paused {
  animation-play-state: paused !important;
}

/* Resume state - applied when element enters viewport */
.anim-running {
  animation-play-state: running !important;
}

/* Container-level pause (pauses all descendant animations) */
.anim-container-paused,
.anim-container-paused * {
  animation-play-state: paused !important;
}

/* Lazy animation start - animation begins only when visible */
.anim-lazy {
  animation-play-state: paused;
}

.anim-lazy.anim-visible {
  animation-play-state: running;
}

/* ========================================================================
   3. MOBILE BATTERY OPTIMIZATION
   ======================================================================== */

/**
 * On mobile devices:
 * - Disable complex infinite animations (battery drain)
 * - Simplify blur effects (GPU intensive)
 * - Reduce animation duration
 */
@media (max-width: 768px) {
  /* Disable hero wave animations on mobile */
  body[data-premium-anim="on"] .hero-v171::before,
  body[data-premium-anim="on"] .hero-v171::after {
    animation: none !important;
  }

  /* Disable glow shift (box-shadow animation is expensive) */
  body[data-premium-anim="on"] .btn-hero-primary.hp-pulse {
    animation: none !important;
    box-shadow: 0 16px 36px rgba(99,102,241,0.25) !important;
  }

  body[data-premium-anim="on"] .hero-video-v171 .player-wrapper {
    animation: none !important;
  }

  /* Simplify feature strip float animation */
  body[data-premium-anim="on"] .feature-strip-v171 .feat:nth-child(odd),
  body[data-premium-anim="on"] .feature-strip-v171 .feat:nth-child(even) {
    animation: none !important;
  }

  /* Simplify blob animations - keep only main layer */
  .blob-layer-2,
  .blob-layer-3 {
    animation-duration: 12s !important; /* Slow down secondary layers */
  }

  /* Reduce scroll cue animation speed */
  .scroll-cue {
    animation-duration: 4s !important;
  }

  /* Reduce blur on mobile (GPU intensive) */
  .blob-layer-2 {
    filter: blur(2px) !important;
  }

  .blob-layer-3 {
    filter: blur(4px) !important;
  }

  .blob-glow {
    filter: blur(6px) !important;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Reduce animation complexity but keep some effects */
  body[data-premium-anim="on"] .hero-v171::before {
    animation-duration: 20s !important; /* Slower = less repaints */
  }

  body[data-premium-anim="on"] .hero-v171::after {
    animation-duration: 16s !important;
  }
}

/* ========================================================================
   4. WILL-CHANGE OPTIMIZATION
   ======================================================================== */

/**
 * will-change hints the browser to optimize for upcoming animations.
 * BUT: overuse causes memory bloat and layers explosion.
 *
 * Strategy:
 * - Apply only to actively animating elements
 * - Remove when animation is paused (via JS)
 */

/* Active animation state - JS adds .will-change-active */
.will-change-active {
  will-change: transform, opacity;
}

/* Remove will-change when paused */
.anim-paused {
  will-change: auto !important;
}

/* Specific will-change for complex animations */
body[data-premium-anim="on"] .hero-v171::before,
body[data-premium-anim="on"] .hero-v171::after {
  will-change: transform, opacity;
}

body[data-premium-anim="on"] .btn-hero-primary.hp-pulse {
  will-change: box-shadow;
}

/* Blob layers need will-change for smooth transforms */
.blob-layer-1,
.blob-layer-2,
.blob-layer-3,
.blob-glow {
  will-change: transform, opacity;
}

/* Clean up will-change on inactive blobs */
.demo-orb.anim-paused .blob-layer-1,
.demo-orb.anim-paused .blob-layer-2,
.demo-orb.anim-paused .blob-layer-3,
.demo-orb.anim-paused .blob-glow {
  will-change: auto !important;
}

/* ========================================================================
   5. LOW POWER MODE / BATTERY SAVER
   ======================================================================== */

/**
 * Detect low power mode (experimental - not all browsers support)
 * Future-proofing for when this becomes standard
 */
@media (prefers-reduced-data: reduce) {
  /* Disable all decorative animations */
  .hero-v171::before,
  .hero-v171::after,
  .btn-hero-primary.hp-pulse,
  .feature-strip-v171 .feat,
  .scroll-cue,
  .blob-layer-1,
  .blob-layer-2,
  .blob-layer-3,
  .blob-glow {
    animation: none !important;
  }
}

/* ========================================================================
   6. PRINT OPTIMIZATION
   ======================================================================== */

@media print {
  /* Disable all animations for print */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Show static state for animated elements */
  .hp-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hide decorative animations */
  .scroll-cue,
  .blob-glow {
    display: none !important;
  }
}

/* ========================================================================
   7. HIGH CONTRAST MODE
   ======================================================================== */

@media (prefers-contrast: more) {
  /* Simplify glow effects for better visibility */
  .btn-hero-primary.hp-pulse,
  .hero-video-v171 .player-wrapper {
    animation: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  }

  /* Remove blur which can affect readability */
  .blob-layer-2,
  .blob-layer-3,
  .blob-glow {
    filter: none !important;
  }
}

/* ========================================================================
   8. PERFORMANCE CLASSES (JS-controlled)
   ======================================================================== */

/**
 * Performance tier classes applied by JS based on device capability
 */

/* Tier 1: High performance (desktop with GPU) */
body.perf-tier-high [data-anim] {
  /* All animations enabled at full quality */
}

/* Tier 2: Medium performance (tablet, mid-range mobile) */
body.perf-tier-medium .hero-v171::before,
body.perf-tier-medium .hero-v171::after {
  animation-duration: 24s !important;
}

body.perf-tier-medium .blob-layer-2,
body.perf-tier-medium .blob-layer-3 {
  animation-duration: 10s !important;
}

/* Tier 3: Low performance (older devices) */
body.perf-tier-low .hero-v171::before,
body.perf-tier-low .hero-v171::after,
body.perf-tier-low .btn-hero-primary.hp-pulse,
body.perf-tier-low .feature-strip-v171 .feat,
body.perf-tier-low .blob-layer-2,
body.perf-tier-low .blob-layer-3,
body.perf-tier-low .blob-glow {
  animation: none !important;
}

/* Only keep essential blob animation */
body.perf-tier-low .blob-layer-1 {
  animation-duration: 8s !important;
}