/* KOG Ops One 모션·마이크로 인터랙션 — 발표 데모용 시각 폴리시 (CSS 전용, 토큰 준수) */

/* ============================================================
   1. 화면/패널 진입 트랜지션
   #main-content innerHTML 교체 직후 콘텐츠가 부드럽게 fade-up.
   JS 트리거 불필요 — innerHTML 교체로 노드가 새로 생기면 애니 재생.
   ============================================================ */
#main-content { animation: page-enter .26s cubic-bezier(.22,.61,.36,1) both; }

/* 패널은 살짝 시차(stagger)로 떠오르게 — 홈 2열 그리드에서 효과적 */
.home-grid > .panel { animation: panel-rise .3s cubic-bezier(.22,.61,.36,1) both; }
.home-grid > .panel:nth-child(2) { animation-delay: .06s; }

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes panel-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   2. 행/카드 hover 리프트 — 클릭 가능 어포던스
   기존 cursor:pointer 행에 미세 상승 + 그림자.
   ============================================================ */
.task-row, .ai-row, .doc-row, .topic-row, .issue-row {
  transition: transform .14s ease, background .14s ease, border-radius .14s ease;
}
/* 구분선 행(border-bottom)은 translateY만 — 카드형은 그림자까지 */
.task-row:hover, .ai-row:hover, .doc-row:hover, .topic-row:hover, .issue-row:hover {
  transform: translateY(-1px);
}

.in-card, .ap-row, .apm-card, .rv-card, .adv-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.in-card:hover, .apm-card:hover, .rv-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* .ap-row는 리스트 내부 행 — 배경+미세 상승만(레이아웃 흔들림 방지) */
.ap-row:hover { background: var(--surface-2); }

/* .trow 데이터테이블 행 — 기존 배경 강조(components.css)에 미세 상승 추가.
   행 사이 구분선 흔들림 방지를 위해 그림자 없이 translateY만. */
.itable .trow { transition: transform .14s ease, background .14s ease; }
.itable .trow:hover { transform: translateY(-1px); }

/* 버튼 눌림 피드백 */
.btn:active { transform: translateY(1px); }

/* ============================================================
   3. 신규 행 등장 — .row-enter
   박과장 JS가 Realtime INSERT 시 새 행에 부여, 애니 끝나면 제거.
   slide-down + fade + 배경 하이라이트 깜빡.
   ============================================================ */
.row-enter { animation: row-enter .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes row-enter {
  0%   { opacity: 0; transform: translateY(-10px); background: var(--primary-soft); }
  60%  { opacity: 1; transform: translateY(0); background: var(--primary-softer); }
  100% { background: transparent; }
}

/* ============================================================
   4. 접근성 — prefers-reduced-motion 존중
   모션 민감 사용자는 애니 제거(상태 변화는 유지).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .task-row:hover, .ai-row:hover, .doc-row:hover, .topic-row:hover,
  .issue-row:hover, .in-card:hover, .apm-card:hover, .rv-card:hover,
  .itable .trow:hover {
    transform: none;
  }
}