/**
 * animations.css — 可重用動畫與 Transition Utilities
 * Phase 0: 基礎建設
 * 所有 keyframes 與 transition utilities 集中管理
 * 支援 prefers-reduced-motion
 */

@layer animations {
  /* ============================================================
   * Keyframes — 入場/離場/狀態動畫
   * ============================================================ */

  /* Fade */
  @keyframes ui-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes ui-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  /* Slide */
  @keyframes ui-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes ui-slide-down {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes ui-slide-in-left {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes ui-slide-out-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-24px); }
  }

  @keyframes ui-slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes ui-slide-out-right {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
  }

  /* Scale */
  @keyframes ui-scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes ui-scale-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.92); }
  }

  /* Pulse / Loading */
  @keyframes ui-pulse {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1; }
  }

  @keyframes ui-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
  }

  @keyframes ui-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  @keyframes ui-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ============================================================
   * Utility Classes — 直接套用於元素
   * ============================================================ */

  /* Entrance */
  .ui-fade-in       { animation: ui-fade-in       var(--duration-normal) var(--ease-out) forwards; }
  .ui-fade-out      { animation: ui-fade-out      var(--duration-fast)  var(--ease-in-out) forwards; }
  .ui-slide-up      { animation: ui-slide-up      var(--duration-normal) var(--ease-out) forwards; }
  .ui-slide-down    { animation: ui-slide-down    var(--duration-normal) var(--ease-out) forwards; }
  .ui-slide-in-left  { animation: ui-slide-in-left  var(--duration-normal) var(--ease-out) forwards; }
  .ui-slide-out-left { animation: ui-slide-out-left var(--duration-normal) var(--ease-in-out) forwards; }
  .ui-slide-in-right { animation: ui-slide-in-right var(--duration-normal) var(--ease-out) forwards; }
  .ui-slide-out-right{ animation: ui-slide-out-right var(--duration-normal) var(--ease-in-out) forwards; }
  .ui-scale-in      { animation: ui-scale-in      var(--duration-normal) var(--ease-out) forwards; }
  .ui-scale-out     { animation: ui-scale-out     var(--duration-fast)  var(--ease-in-out) forwards; }

  /* States */
  .ui-pulse         { animation: ui-pulse 1.4s ease-in-out infinite; }
  .ui-blink         { animation: ui-blink 1s ease-in-out infinite; }
  .ui-spin          { animation: ui-spin 0.8s linear infinite; }
  .ui-shimmer       { animation: ui-shimmer 1.5s ease-in-out infinite; }

  /* Delay utilities */
  .ui-delay-1  { animation-delay: 0.05s; }
  .ui-delay-2  { animation-delay: 0.1s; }
  .ui-delay-3  { animation-delay: 0.15s; }
  .ui-delay-4  { animation-delay: 0.2s; }

  /* ============================================================
   * Transition Utilities — 通用 transition 組合
   * ============================================================ */

  .ui-transition-fast {
    transition: all var(--duration-fast) var(--ease-out);
  }

  .ui-transition-normal {
    transition: all var(--duration-normal) var(--ease-out);
  }

  .ui-transition-slow {
    transition: all var(--duration-slow) var(--ease-out);
  }

  .ui-transition-colors {
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }

  .ui-transition-transform {
    transition: transform var(--duration-normal) var(--ease-out),
                opacity var(--duration-normal) var(--ease-out);
  }

  .ui-transition-shadow {
    transition: box-shadow var(--duration-normal) var(--ease-out);
  }

  /* ============================================================
   * Reduced Motion — 尊重使用者偏好
   * ============================================================ */

  @media (prefers-reduced-motion: reduce) {
    /* 關閉所有 animations.css 定義的動畫 */
    .ui-fade-in,
    .ui-fade-out,
    .ui-slide-up,
    .ui-slide-down,
    .ui-slide-in-left,
    .ui-slide-out-left,
    .ui-slide-in-right,
    .ui-slide-out-right,
    .ui-scale-in,
    .ui-scale-out,
    .ui-pulse,
    .ui-blink,
    .ui-spin,
    .ui-shimmer {
      animation: none !important;
      transition: none !important;
    }

    /* 關閉所有 transition utilities */
    .ui-transition-fast,
    .ui-transition-normal,
    .ui-transition-slow,
    .ui-transition-colors,
    .ui-transition-transform,
    .ui-transition-shadow {
      transition: none !important;
    }

    /* 針對特定元件的強制關閉 */
    .thinking-dots span {
      animation: none !important;
      opacity: 1;
      transform: none;
    }

    .streaming-cursor {
      animation: none !important;
      opacity: 1;
    }

    .toast {
      animation: none !important;
      opacity: 1;
      transform: none;
    }

    .drawer,
    .drawer-overlay,
    .sheet,
    .sheet-overlay {
      transition: none !important;
    }

    /* 確保即時顯示/隱藏 */
    .drawer.open { transform: none !important; }
    .drawer-overlay.visible { opacity: 1 !important; visibility: visible !important; }
    .sheet.open { transform: none !important; }
    .sheet-overlay.visible { opacity: 1 !important; visibility: visible !important; }
  }

  /* ============================================================
   * Focus Visible — 統一焦點樣式
   * ============================================================ */

  .ui-focus-visible:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* 移除預設 outline，僅保留 focus-visible */
  .ui-focus-visible:focus:not(:focus-visible) {
    outline: none;
  }

  /* ============================================================
   * Scrollbar — 細捲軸 (可選)
   * ============================================================ */

  .ui-thin-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
  }

  .ui-thin-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .ui-thin-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .ui-thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--surface-3);
    border-radius: 3px;
  }

  .ui-thin-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-strong);
  }

  /* ============================================================
   * Selection — 選取色
   * ============================================================ */

  ::selection {
    background-color: var(--color-primary-light);
    color: var(--color-primary-hover);
  }

  ::-moz-selection {
    background-color: var(--color-primary-light);
    color: var(--color-primary-hover);
  }
}