/*
 * 화면 전환 + 마이크로 애니메이션 — 공용 모션 레이어.
 * 모든 화면이 tokens.css 바로 뒤에 <link>한다. 픽셀/레이아웃은 건드리지 않는다 —
 * opacity/transform 애니메이션과 transition 만 얹는다. 지속시간·이징은 전부
 * tokens.css 의 --dur-*/--ease-*/--stagger 를 참조한다(수정은 거기 한 곳에서).
 */

/* ---- 화면 전환(MPA, 크로스도큐먼트 View Transitions) ---- */
@view-transition{
  navigation:auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--dur-2);
  animation-timing-function:var(--ease);
}
::view-transition-old(root){ animation-name:cg-leave; }
::view-transition-new(root){ animation-name:cg-enter-page; }

@keyframes cg-leave{
  from{ opacity:1; transform:translateY(0); }
  to{ opacity:0; transform:translateY(-6px); }
}
@keyframes cg-enter-page{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* 사이드바 active 표시 — 화면 사이에 같은 이름으로 이어서, 눌린 자리가 미끄러지듯 옮겨간다 */
.ni.on{ view-transition-name:cg-nav-active; }

/* ---- 인터랙션 피드백(호버/포커스/눌림) — 색은 목업 그대로, 전환만 부드럽게 ---- */
.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)}

/* 표 마크업을 카드 격자로 보여 주는 화면(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;
  }
}