/*
 * Plan C — Live View motion (HIG-first).
 *
 * Injected into the Live View WKWebView at document start so the existing
 * server-rendered HTML inherits these animations without HTML/server changes.
 *
 * The selectors use class names already emitted by the live_view template
 * (or attached by the live_view JavaScript). When a class is missing, the
 * effect simply doesn't fire — these rules are additive.
 *
 * All animations honour `prefers-reduced-motion: reduce` by collapsing to
 * 1ms / no transform. Operators who set Reduce Motion in macOS still see the
 * state change, just without the spring.
 */

@media (prefers-reduced-motion: no-preference) {
  /* Tool-call card reveal — slide up + fade.
   * The Live View JS adds `.tool-call` to each tool entry; new entries
   * receive `.tool-call--appearing` momentarily on insertion. */
  .tool-call,
  .tool-call--appearing {
    animation: mugi-tool-card-reveal 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @keyframes mugi-tool-card-reveal {
    from {
      transform: translateY(8px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Active tool — Apple loading-state shimmer (icon only, body unchanged). */
  .tool-call.active .tool-icon,
  .tool-call--active .tool-icon {
    animation: mugi-tool-shimmer 2s ease-in-out infinite;
  }

  @keyframes mugi-tool-shimmer {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1.0; }
  }

  /* Tool-call completion — collapse to summary line. */
  .tool-call.collapsing,
  .tool-call--collapsing {
    transition: max-height 0.34s cubic-bezier(0.2, 0.7, 0.2, 1),
                opacity 0.22s ease-out;
    overflow: hidden;
  }

  /* Streaming output cursor — single 1s blink. */
  .streaming-cursor,
  .stream-cursor {
    animation: mugi-stream-cursor 1s steps(2, start) infinite;
  }

  @keyframes mugi-stream-cursor {
    50% { opacity: 0; }
  }

  /* Display-window image / video reveal — soft scale + fade.
   * Plan D will own the deeper media physics; this is the HIG-first floor. */
  .display-window img,
  .display-window video {
    animation: mugi-media-reveal 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @keyframes mugi-media-reveal {
    from { transform: scale(0.97); opacity: 0; }
    to   { transform: scale(1.00); opacity: 1; }
  }
}

/* Reduce-motion: keep state changes legible, drop the springs. */
@media (prefers-reduced-motion: reduce) {
  .tool-call,
  .tool-call--appearing,
  .tool-call.collapsing,
  .tool-call--collapsing,
  .display-window img,
  .display-window video {
    animation: none !important;
    transition: none !important;
  }
  .tool-call.active .tool-icon,
  .tool-call--active .tool-icon,
  .streaming-cursor,
  .stream-cursor {
    animation: none !important;
    opacity: 1 !important;
  }
}
