/* ==========================================================================
   animations.css — General UI motion for the application shell
   (panel switches, subtle hovers, loading states).

   NOTE: Clip animation presets (Slide, Fade, Bounce, Zoom, Spin, Shake,
   Wiggle, Flip, Fly In/Out, Elastic, Pulse, etc.) belong to the
   effects/image-animation feature module and will be added to this file
   when that module is implemented — keeping all keyframes centralised
   here for reuse across the image, text and effects panels.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .panel-view {
    animation: panel-fade-in 0.12s ease;
  }

  .rail-tab,
  .icon-btn,
  .btn {
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }

  .icon-btn--play:active {
    transform: scale(0.92);
  }
}

@keyframes panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes save-status-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect reduced-motion preference across the whole shell */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Reserved keyframes for future clip animation presets ------------------------
   (left as named, empty hooks so effects/ImageAnimations.js can target
   consistent class names once implemented)
   .fx-slide-left, .fx-slide-right, .fx-slide-up, .fx-slide-down,
   .fx-fade, .fx-pop, .fx-bounce, .fx-zoom, .fx-rotate, .fx-spin,
   .fx-shake, .fx-wiggle, .fx-flip, .fx-fly-in, .fx-fly-out,
   .fx-elastic, .fx-pulse
   ------------------------------------------------------------------------------- */