/**
 * Motion — 動畫 keyframes + utility class
 * ============================================
 * 低調但有質感的微互動，避免浮誇。
 * 全部尊重 prefers-reduced-motion（無障礙）
 */

/* ============= Keyframes ============= */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

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

@keyframes ripple {
  to { transform: scale(2.5); opacity: 0; }
}


/* ============= Utility class ============= */

.anim-fade-in     { animation: fadeIn 180ms var(--ease-emphasized) both; }
.anim-fade-in-up  { animation: fadeInUp 200ms var(--ease-emphasized) both; }
.anim-scale-in    { animation: scaleIn 160ms var(--ease-out-back) both; }
.anim-pulse       { animation: pulse 1.6s ease-in-out infinite; }
.anim-spin        { animation: spin 1s linear infinite; }


/* ============= Stagger (子元素依序出現 — 速度感優先) ============= */
.stagger > * {
  animation: fadeInUp 220ms var(--ease-emphasized) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 30ms; }
.stagger > *:nth-child(3) { animation-delay: 60ms; }
.stagger > *:nth-child(4) { animation-delay: 90ms; }
.stagger > *:nth-child(5) { animation-delay: 120ms; }
.stagger > *:nth-child(6) { animation-delay: 150ms; }
.stagger > *:nth-child(7) { animation-delay: 180ms; }
.stagger > *:nth-child(8) { animation-delay: 210ms; }


/* ============= Skeleton（載入中骨架） ============= */
.skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--color-divider) 0%,
    #F8F8F8 50%,
    var(--color-divider) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
.skeleton--line { height: 1em; min-width: 80px; }
.skeleton--block { display: block; height: 80px; width: 100%; }


/* ============= Ripple（按鈕點擊水波） ============= */
.has-ripple {
  position: relative;
  overflow: hidden;
}
.has-ripple .ripple-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 540ms var(--ease-emphasized) both;
}


/* ============= Reduce Motion 友善設定 ============= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}