/* micro-interactions.css — 버튼, 링크, 카드의 micro-interaction 모음 */

/* 버튼 클릭 피드백 */
.btn:active,
button:active:not(:disabled) {
  transform: scale(0.97);
}

/* 링크 hover */
a:hover {
  opacity: 0.85;
}

/* 카드 hover 리프트 */
.feed-card,
.card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.feed-card:hover,
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 이미지 hover */
img {
  transition: opacity var(--transition-fast);
}

/* 탭 인디케이터 애니메이션 */
.tab-indicator {
  transition: transform var(--transition-base), width var(--transition-base);
}

/* 토글 스위치 */
.toggle-switch {
  transition: background-color var(--transition-fast);
}

/* 체크박스/라디오 scale */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  animation: check-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes check-pop {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* 반응 버튼 */
.reaction-btn:hover {
  transform: scale(1.15);
}
.reaction-btn:active {
  transform: scale(0.9);
}

/* 페이지 전환 */
#app > * {
  animation: fade-in-up 0.2s ease-out;
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 스크롤 최상단 버튼 */
.scroll-top-btn {
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.scroll-top-btn:hover {
  transform: translateY(-3px);
}