/* ============================================================================
   ANIMATIONS - Keyframes & Transition Utilities
   ============================================================================

   All @keyframes declarations consolidated in one place.
   Loaded as non-critical CSS (asynchronously).

   Migrated from:
   - components/styles/base.css (@keyframes pulsing)
   - components/styles/accessibility.css (@keyframes spin)
   - components/styles/charger-detail-panel.css (@keyframes rotate, @keyframes spin)
   - components/styles/route-panel.css (@keyframes route-panel-spin, @keyframes user-pulse)

   JS constants absorbed:
   - PANEL_ANIMATION.DURATION -> var(--panel-animation-duration) in 01-tokens/variables.css
   - PANEL_ANIMATION.TIMING -> var(--panel-animation-timing) in 01-tokens/variables.css
   ============================================================================ */

/* ============================================================================
   SPIN - Generic rotation (loading spinners)
   Used by: accessibility loading spinner, charger-detail loading
   ============================================================================ */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Alias used in charger-detail-panel for street view loading SVG */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================================
   ROUTE-PANEL-SPIN - Route panel loading spinner
   Used by: 04-components/route-panel.css (.route-panel__spinner)
   ============================================================================ */

@keyframes route-panel-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   REDUCED MOTION - Accessibility
   Disables or minimizes animations for users who prefer reduced motion.
   ============================================================================ */

/* ============================================================================
   UTILITY: Dimmed State (.is-dimmed)
   Shared opacity toggle for FAB buttons when their associated panel is open.
   Replaces: .style.opacity = "0.7" / "1" in JS — now toggled via
   classList.add("is-dimmed") / classList.remove("is-dimmed").

   Used by: info button, discounts button, filter button, search button
   Migrated from:
     01-project_information.js lines 427, 431
     (and will be reused by filter/search buttons in later sub-tasks)
   ============================================================================ */

.is-dimmed {
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

/* ============================================================================
   UTILITY: Spin Animation (.anim-spin)
   Applies a continuous 1s linear rotation. Used for inline spinner SVGs.
   Replaces: inline style="animation: rotate 1s linear infinite;" on SVGs.

   Migrated from (Priority 7F):
     location-button.js SPINNER_SVG template (line 112)
   ============================================================================ */

.anim-spin {
  animation: rotate 1s linear infinite;
}

/* ============================================================================
   REDUCED MOTION - Accessibility
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .loading-spinner,
  #app-loading .loading-spinner,
  #streetViewLoading svg,
  .route-panel__spinner,
  .anim-spin {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}