/* 페이지 전환 애니메이션(슬라이드 플립) — Chrome 126+/Edge의 Cross-Document View Transitions API를
   쓴다. 처음엔 각 페이지 <head>의 <meta name="view-transition" content="same-origin">이 켜주는
   줄 알았는데, 그건 기능이 실험 단계였을 때 쓰던 임시 문법이고 Chrome 126부터 정식 문법은 CSS
   @view-transition at-rule이다(메타태그는 더 이상 아무 효과가 없음 — 그래서 실제로 안 켜져
   있었다). 이 파일이 모든 페이지에 이미 링크돼 있어서 여기 한 번만 선언하면 전체 사이트에 적용된다.
   미지원 브라우저(구버전 사파리·파이어폭스)는 이 CSS가 그냥 무시되고 평소처럼 즉시 전환된다 —
   점진적 향상이라 깨지지 않는다.
   ponytail: 진짜 3D 종이 말림(perspective+rotateY)은 뷰 트랜지션 내부 구조에서 브라우저마다
   미묘하게 다르게 보일 수 있어, 2D 변형(슬라이드+스케일)만으로 "책장 넘기는" 느낌을 낸다 —
   더 가볍고 안정적. 진짜 입체 종이 곡률이 꼭 필요해지면 그때 3D로 업그레이드. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: page-flip-out .32s cubic-bezier(.4, 0, .2, 1) both;
  }
  ::view-transition-new(root) {
    animation: page-flip-in .32s cubic-bezier(.4, 0, .2, 1) both;
  }
}

@keyframes page-flip-out {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to { transform: translateX(-16%) scale(.96); opacity: 0; }
}
@keyframes page-flip-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}