/* ===== UTILS STYLES ===== */
/**
 * @file: utils/animations
 * @description: 애니메이션 관련 스타일
 * @components: 언더라인 이동 애니메이션, 트랜지션 효과
 * @usage: 전역적으로 사용되는 애니메이션 정의
 */
@keyframes moveUnderline {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 100%;
    left: 50%;
  }
}

/* ===== UTILS STYLES ===== */
/**
 * @file: utils/animations.css
 * @description: 애니메이션 관련 스타일
 * @components: 로더 아이콘
 * @usage: 진행 상황을 시각적으로 표시
 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== UTILS STYLES ===== */
/**
 * @file: utils/animations.css
 * @description: 애니메이션 관련 스타일
 * @components: 페이드인, 슬라이드인
 * @usage: 모달, 툴팁 등 다양한 요소에 애니메이션 효과 적용
 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 모달 슬라이드인 애니메이션 */
@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== UTILITIES STYLES ===== */
/**
 * @file: utilities/animations.css
 * @description: 회원 정보 폼 애니메이션 스타일
 * @components: 회원 정보 폼 애니메이션
 * @usage: 회원 정보 폼 애니메이션 스타일링
 */

/* 폼 애니메이션 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== UTILITIES STYLES ===== */
/**
 * @file: utilities/animations.css
 * @description: 애니메이션 스타일
 * @components: 애니메이션
 * @usage: 토스트 애니메이션 스타일링
 */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== UTILITIES STYLES ===== */
/**
 * @file: utilities/animations.css
 * @description: 애니메이션 스타일
 * @components: 애니메이션
 * @usage: 토스트 애니메이션 스타일링
 */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ===== UTILITIES STYLES ===== */
/**
 * @file: utils/animations.css
 * @description: 애니메이션 관련 스타일
 * @components: 애니메이션
 * @usage: 새 글 작성 버튼 호버 애니메이션
 */
@keyframes buttonPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ===== UTILITIES STYLES ===== */
/**
 * @file: utils/animations.css
 * @description: 애니메이션 관련 스타일
 * @components: 애니메이션
 * @usage: 애니메이션 최적화
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}