/* ── 페이지 전환 (View Transitions API) ──────────────────────────────
 * 내부 라우트 이동 시 콘텐츠(.lpm-page 그룹 = LegacyChrome 의 content div)를
 * 부드럽게 크로스페이드 + 살짝 상승시킨다.
 *
 * PageTransition 의 <ViewTransition default="lpm-page"> 가 전환 의사요소에
 * view-transition-class: lpm-page 를 부여 → ::view-transition-*(.lpm-page) 로 타겟.
 * 헤더/푸터는 이 그룹 바깥(root)이라 위치 변동 없이 고정 유지된다.
 *
 * ⚠ 이 파일은 src/app/globals.css 가 아니라 public/ 에 둔다.
 *   Turbopack 의 Lightning CSS 가 ::view-transition-* 규칙을 빌드 시 드롭하기 때문에
 *   (globals.css 에 넣으면 사라짐), root 레이아웃에서 <link> 로 raw 로드해 우회한다.
 *   미지원 브라우저는 규칙이 무시되고 무애니메이션으로 정상 동작한다.
 */

::view-transition-group(.lpm-page) {
  /* 페이지마다 콘텐츠 높이가 달라도 컨테이너 박스를 모핑(스케일/클립)하지 않고
     old/new 스냅샷을 제자리에 겹쳐 순수 크로스페이드만 하도록 그룹 모션은 끈다. */
  animation: none;
}

::view-transition-old(.lpm-page) {
  animation: 200ms cubic-bezier(0.4, 0, 1, 1) both lpm-page-out;
}

::view-transition-new(.lpm-page) {
  animation: 280ms cubic-bezier(0.16, 1, 0.3, 1) both lpm-page-in;
}

@keyframes lpm-page-out {
  to {
    opacity: 0;
  }
}

@keyframes lpm-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 모션 민감 사용자 — view-transition 의사요소는 globals.css 의 전역 *{} 가드가
   닿지 않으므로 별도 무력화한다. 0s 로 만들면 브라우저 기본인 즉시 스왑으로 떨어진다. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}