/*
 * 화면 전환 + 마이크로 애니메이션 — 공용 모션 레이어.
 * 모든 화면이 tokens.css 바로 뒤에 <link>한다. 픽셀/레이아웃은 건드리지 않는다 —
 * opacity/transform 애니메이션과 transition 만 얹는다. 지속시간·이징은 전부
 * tokens.css 의 --dur-N · --ease-* · --stagger 를 참조한다(수정은 거기 한 곳에서).
 * (v3.0 3차-F2) 위 줄에 별표+빗금 짝이 들어가 주석이 일찍 닫혀 바로 아래 @view-transition 이 깨진 규칙으로 버려지던 것
 *   (2026-10-06 부터 쪽 전환이 한 번도 안 돎 — team/plans/domado-motion.md §1 D)을 고침.
 *   쪽 이동 화면 전환(@view-transition · ::view-transition-*)은 모든 쪽이 부르는 css/tokens.css 끝으로 옮김(이 파일이 없는 앱 틀 쪽도 같이).
 *   부품 모션 = 설계 §4 표(220ms 넘지 않음 · 미끄러짐 16px 이하 · 되풀이 없음).
 */

/* (v3.0 3차-F2) 옛 "사이드바 active 표시 — .ni.on{view-transition-name:cg-nav-active}"는 뺌 — 위 메뉴 줄 전환 이름은 css/shell-desktop.css 끝 */

/* ---- 인터랙션 피드백(호버/포커스/눌림) — 색은 목업 그대로, 전환만 부드럽게 ---- */
.btn, .chip, .tab, .ni, .abtn, .opt, .seg a, .seg div, .fseg a, .par, .plink, .tile,
.sib, .m-x, .rate-stars .s, .input, .cb, a.viewall{
  transition:background-color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease),
             box-shadow var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease);
}
.btn:active, .chip:active, .abtn:active, .opt:active,
.seg a:active, .seg div:active, .fseg a:active, .tile:active{
  transform:scale(.97);
}
.ni.on::before{ transition:opacity var(--dur-2) var(--ease); }

/* ---- 카드/행 진입 — 살짝 아래에서 페이드업, 목록은 순서대로 stagger ---- */
.card, tbody tr, .tile, .mrow, .shot{
  animation:cg-enter var(--dur-3) var(--ease-out) backwards;
}
@keyframes cg-enter{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
tbody tr:nth-child(1){animation-delay:calc(var(--stagger) * 0)}
tbody tr:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
tbody tr:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
tbody tr:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
tbody tr:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
tbody tr:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
tbody tr:nth-child(7){animation-delay:calc(var(--stagger) * 6)}
tbody tr:nth-child(8){animation-delay:calc(var(--stagger) * 7)}
tbody tr:nth-child(9){animation-delay:calc(var(--stagger) * 8)}
tbody tr:nth-child(10){animation-delay:calc(var(--stagger) * 9)}
tbody tr:nth-child(11){animation-delay:calc(var(--stagger) * 10)}
tbody tr:nth-child(12){animation-delay:calc(var(--stagger) * 11)}
tbody tr:nth-child(13){animation-delay:calc(var(--stagger) * 12)}
tbody tr:nth-child(14){animation-delay:calc(var(--stagger) * 13)}

.tile:nth-child(1){animation-delay:calc(var(--stagger) * 0)}
.tile:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
.tile:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.tile:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.tile:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
.tile:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
.tile:nth-child(7){animation-delay:calc(var(--stagger) * 6)}
.tile:nth-child(8){animation-delay:calc(var(--stagger) * 7)}
.tile:nth-child(9){animation-delay:calc(var(--stagger) * 8)}
.tile:nth-child(10){animation-delay:calc(var(--stagger) * 9)}
.tile:nth-child(11){animation-delay:calc(var(--stagger) * 10)}
.tile:nth-child(12){animation-delay:calc(var(--stagger) * 11)}

.mrow:nth-child(1){animation-delay:calc(var(--stagger) * 0)}
.mrow:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
.mrow:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.mrow:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.mrow:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
.mrow:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
.mrow:nth-child(7){animation-delay:calc(var(--stagger) * 6)}
.mrow:nth-child(8){animation-delay:calc(var(--stagger) * 7)}
.mrow:nth-child(9){animation-delay:calc(var(--stagger) * 8)}
.mrow:nth-child(10){animation-delay:calc(var(--stagger) * 9)}

.shot:nth-child(1){animation-delay:calc(var(--stagger) * 0)}
.shot:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
.shot:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.shot:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.shot:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
.shot:nth-child(6){animation-delay:calc(var(--stagger) * 5)}

/* (v3.0 3차-F2 · 설계 §4 "목록 처음 그림 — 처음 들어올 때만, 정렬·골라 보기로 다시 그릴 땐 움직임 없이")
   그 목록이 처음 움직인 뒤 부모(tbody·.list 등)에 [data-cg-seen](js/m-shell-paint.js) — 같은 부모에 다시 그린 줄·카드는 바로 보임.
   휴대폰 개체 카드(.g.enter — css/m02-list.css)도 같은 규칙. */
[data-cg-seen] > :is(.card,tr,.tile,.mrow,.shot,.g.enter){animation:none;}
/* 목록 더 불러오기(40장씩) — 새로 붙은 카드·줄만 옅게 나타남(자리 이동 없음 · 160ms) — 목록 JS 가 새 것에만 .cg-appear */
.cg-appear{animation:cg-fade-in 160ms var(--ease) backwards!important;}
/* "불러오는 중…" → 숫자·글 — 그 칸만 옅게 나타남(150ms · 자리 크기 그대로) — js/m-shell-paint.js 가 .cg-in 을 잠깐 붙임 */
.cg-in{animation:cg-fade-in 150ms var(--ease);}
@keyframes cg-fade-in{ from{opacity:0;} to{opacity:1;} }

/* 표 마크업을 카드 격자로 보여 주는 화면(04 .eg-cards · matings .mt) — 행 등장 애니메이션 끔
   (투명하게 시작해 늦게 보이고, 카드 hover 들림 transform 과 겹친다). 카드 자체 hover 전환은 화면 CSS. */
.eg-cards tbody tr, .mt tbody tr{animation:none;}

/* ---- 모달 열림 — 살짝 확대되며 페이드인 ---- */
.ovl{ animation:cg-enter-fade var(--dur-2) var(--ease-out) backwards; }
.modal{ animation:cg-modal-in var(--dur-2) var(--ease-out) backwards; }
@keyframes cg-enter-fade{
  from{ opacity:0; } to{ opacity:1; }
}
@keyframes cg-modal-in{
  from{ opacity:0; transform:scale(.96) translateY(4px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

/* ---- 모션 최소화 ---- */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){
    animation:none !important;
  }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}