/* frontend/css/nav-transition.css — 문서 간 전환(index.html ↔ korzina.html).
   정본: ~/Desktop/control/KORZINA-WEB-PARITY.md §15 결정 2.

   iOS는 단어장 흐름을 formSheet로 띄운다(Sources/RootContainerViewController.swift) —
   들어갈 때 아래에서 위로 올라오고, 닫을 때 아래로 내려간다. 뒤 화면은 제자리에 머문다
   (앱은 뒤 화면이 살짝 줄며 어두워지지만 웹에서는 재현하지 않는다 — §15 비범위 6).

   이 파일은 index.html과 korzina.html 두 곳에서만 읽는다. 문서 간 전환은 '양쪽 문서가
   모두 @view-transition을 선언'해야 성립하므로, 다른 페이지로의 이동에는 아무 영향이 없다.
   그래도 index → index(재적재) 같은 짝은 성립하므로, 실제 적용 여부와 방향 판정은
   js/nav-transition.js가 한다(korzina 왕복이 아니면 skipTransition).
   미지원 브라우저(크로스 도큐먼트 View Transition 이전)는 그냥 즉시 이동한다 —
   흰 반짝임 제거(결정 1)가 우선이고 그것은 이 파일과 무관하게 동작한다. */

@view-transition { navigation: auto; }

/* 기본 = 애니메이션 없음. UA 기본 크로스페이드도 쓰지 않는다(방향 없는 이동 = 즉시 교체). */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* 진입(→ 단어장): 새 문서가 아래에서 위로 덮는다. */
html[data-nav-vt="up"]::view-transition-new(root) {
  z-index: 2;
  animation: kz-vt-slide-up 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
html[data-nav-vt="up"]::view-transition-old(root) { z-index: 1; }

/* 이탈(단어장 →): 옛 문서가 아래로 내려가며 뒤 문서를 드러낸다. */
html[data-nav-vt="down"]::view-transition-old(root) {
  z-index: 2;
  animation: kz-vt-slide-down 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
html[data-nav-vt="down"]::view-transition-new(root) { z-index: 1; }

@keyframes kz-vt-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes kz-vt-slide-down {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

/* ===== K-P3(§16 결정 6) — 터치 기기: 시트만 미끄러지고 띠는 페이드 =====
   앱의 formSheet 등장과 같아진다(시트가 아래에서 올라오고, 그 바깥 어두운 띠는 서서히 나타난다).
   시트에 이름을 주면 그 요소는 root 스냅샷에서 빠지므로, root = 띠(+시트 밖 요소)가 된다.
   index.html에는 #kz-sheet가 없어 이 이름은 단어장 쪽에만 생긴다(진입=new만·이탈=old만).
   PC는 이름이 붙지 않아 위의 root 슬라이드 그대로다. */
html.kz-touch #kz-sheet { view-transition-name: kz-sheet; }

html.kz-touch[data-nav-vt="up"]::view-transition-new(kz-sheet) {
  z-index: 3;
  animation: kz-vt-slide-up 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
html.kz-touch[data-nav-vt="up"]::view-transition-new(root) {
  z-index: 2;
  animation: kz-vt-fade-in 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
html.kz-touch[data-nav-vt="up"]::view-transition-old(root) { z-index: 1; animation: none; }

html.kz-touch[data-nav-vt="down"]::view-transition-old(kz-sheet) {
  z-index: 3;
  animation: kz-vt-slide-down 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
html.kz-touch[data-nav-vt="down"]::view-transition-old(root) {
  z-index: 2;
  animation: kz-vt-fade-out 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
html.kz-touch[data-nav-vt="down"]::view-transition-new(root) { z-index: 1; animation: none; }

/* K-6(§21 결정 4a) — 검색 바는 시트 밖(body 직계)으로 나왔다. 이름이 없으면 root(띠)와 함께 페이드되어
   시트와 따로 논다 → 자기 이름으로 떼어 내 시트와 같은 거리(= 시트 높이 = 100vh − 띠)만큼 함께 미끄러뜨린다.
   이미지 의사 요소의 translateY(100%)는 자기 높이(46px) 기준이라 거리를 직접 준다. */
html.kz-touch #kz-search { view-transition-name: kz-search; }
html.kz-touch[data-nav-vt="up"]::view-transition-new(kz-search) {
  z-index: 4;
  animation: kz-vt-search-up 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
html.kz-touch[data-nav-vt="down"]::view-transition-old(kz-search) {
  z-index: 4;
  animation: kz-vt-search-down 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
@keyframes kz-vt-search-up {
  from { transform: translateY(calc(100vh - var(--kz-band-h, 6px))); }
  to { transform: translateY(0); }
}
@keyframes kz-vt-search-down {
  from { transform: translateY(0); }
  to { transform: translateY(calc(100vh - var(--kz-band-h, 6px))); }
}

@keyframes kz-vt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kz-vt-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* 접근성 — 움직임 줄이기(§15 결정 5). js 쪽에서도 skipTransition 한다(이중 안전). */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(kz-sheet),
  ::view-transition-new(kz-sheet),
  ::view-transition-old(kz-search),
  ::view-transition-new(kz-search) { animation: none !important; }
}