모션

듀레이션 토큰, Apple 스타일 이징, 그리고 reduced-motion 계약.

듀레이션

Token	Value	Use	Anchor
duration-fast	200ms	hover color and transform	bg:motion:duration-fast
duration-normal	300ms	card hover, FAQ answer collapse	bg:motion:duration-normal
duration-slow	600ms	scroll-reveal transitions	bg:motion:duration-slow
duration-colors	150ms	quick color flips	bg:motion:duration-colors

이징 커브

ease-out

bg:motion:ease-out

ease-apple

cubic-bezier(0.32, 0.72, 0, 1)

bg:motion:ease-apple

카드 리프트

card-lift-sm	translateY(-2px)	bg:motion:card-lift-sm
card-lift-md	translateY(-4px)	bg:motion:card-lift-md

리듀스드 모션

강제 규칙. 모든 애니메이션은 @media (prefers-reduced-motion: reduce) 오버라이드를 포함해야 하며, 이를 통해 비활성화하거나 정적 상태로 대체해야 합니다. base.css의 기본 리셋은 reduced-motion 사용자에 대해 모든 transition을 이미 중립화합니다. 컴포넌트별 애니메이션은 추가로 호버 시 transform을 제거해야 합니다.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}