/* ============================================================
   TRANSIT transitions layer — 디자인 독립 뷰 트랜지션 배선
   ------------------------------------------------------------
   어떤 디자인의 멀티페이지 사이트에도 이 파일 하나로 전환을 입힌다.
   디자인 CSS 뒤에 <link>로 연결하고, HTML은 아래 계약만 지키면 됨:

   1) 페이지 슬라이드  : <main> 태그가 있으면 자동 적용
   2) 공유 요소 morph  : 두 페이지에서 이어질 요소 쌍에 같은
                         vt-share-N 클래스 (N=1~8, 페이지 내 중복 금지)
   3) 스태거 입장      : 새 페이지에만 있는 요소에 vt-enter-N (N=1~6)

   튜닝: 디자인 CSS의 :root에서 --vt-duration, --vt-distance,
         --vt-ease, --vt-share-duration 을 재정의하면 된다.
   ============================================================ */

:root {
  --vt-duration: 0.45s;
  --vt-distance: 60px;
  --vt-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --vt-share-duration: 0.55s;
  --vt-share-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* --- 크로스 도큐먼트 전환 활성화 --- */
  @view-transition {
    navigation: auto;
  }

  /* --- 1) 페이지 콘텐츠 슬라이드 (네비바 등 공통 요소는 고정) --- */
  main {
    view-transition-name: page-content;
  }

  ::view-transition-group(page-content) {
    animation-duration: var(--vt-duration, 0.45s);
    animation-timing-function: var(--vt-ease, cubic-bezier(0.33, 1, 0.68, 1));
  }

  ::view-transition-old(page-content) {
    animation: var(--vt-duration, 0.45s) var(--vt-ease, cubic-bezier(0.33, 1, 0.68, 1)) both vt-slide-out;
  }

  ::view-transition-new(page-content) {
    animation: var(--vt-duration, 0.45s) var(--vt-ease, cubic-bezier(0.33, 1, 0.68, 1)) both vt-slide-in;
  }

  @keyframes vt-slide-out {
    to { opacity: 0; translate: calc(-1 * var(--vt-distance, 60px)) 0; }
  }

  @keyframes vt-slide-in {
    from { opacity: 0; translate: var(--vt-distance, 60px) 0; }
  }

  /* --- 2) 공유 요소 morph (카드 이미지 → 히어로 등) --- */
  .vt-share-1 { view-transition-name: vt-share-1; }
  .vt-share-2 { view-transition-name: vt-share-2; }
  .vt-share-3 { view-transition-name: vt-share-3; }
  .vt-share-4 { view-transition-name: vt-share-4; }
  .vt-share-5 { view-transition-name: vt-share-5; }
  .vt-share-6 { view-transition-name: vt-share-6; }
  .vt-share-7 { view-transition-name: vt-share-7; }
  .vt-share-8 { view-transition-name: vt-share-8; }

  ::view-transition-group(vt-share-1),
  ::view-transition-group(vt-share-2),
  ::view-transition-group(vt-share-3),
  ::view-transition-group(vt-share-4),
  ::view-transition-group(vt-share-5),
  ::view-transition-group(vt-share-6),
  ::view-transition-group(vt-share-7),
  ::view-transition-group(vt-share-8) {
    animation-duration: var(--vt-share-duration, 0.55s);
    animation-timing-function: var(--vt-share-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  /* --- 3) 스태거 입장 (새 페이지에만 있는 요소는 entry만 받는다) --- */
  .vt-enter-1 { view-transition-name: vt-enter-1; }
  .vt-enter-2 { view-transition-name: vt-enter-2; }
  .vt-enter-3 { view-transition-name: vt-enter-3; }
  .vt-enter-4 { view-transition-name: vt-enter-4; }
  .vt-enter-5 { view-transition-name: vt-enter-5; }
  .vt-enter-6 { view-transition-name: vt-enter-6; }

  ::view-transition-new(vt-enter-1) {
    animation: 0.7s var(--vt-share-ease, cubic-bezier(0.22, 1, 0.36, 1)) both vt-zoom-in;
  }
  ::view-transition-new(vt-enter-2) {
    animation: 0.65s var(--vt-share-ease, cubic-bezier(0.22, 1, 0.36, 1)) both vt-fly-left;
    animation-delay: 0.10s;
  }
  ::view-transition-new(vt-enter-3) {
    animation: 0.65s var(--vt-share-ease, cubic-bezier(0.22, 1, 0.36, 1)) both vt-fly-right;
    animation-delay: 0.18s;
  }
  ::view-transition-new(vt-enter-4) {
    animation: 0.6s var(--vt-share-ease, cubic-bezier(0.22, 1, 0.36, 1)) both vt-fly-up;
    animation-delay: 0.26s;
  }
  ::view-transition-new(vt-enter-5) {
    animation: 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both vt-pop;
    animation-delay: 0.34s;
  }
  ::view-transition-new(vt-enter-6) {
    animation: 0.7s var(--vt-share-ease, cubic-bezier(0.22, 1, 0.36, 1)) both vt-fade-up;
    animation-delay: 0.42s;
  }

  ::view-transition-old(vt-enter-1),
  ::view-transition-old(vt-enter-2),
  ::view-transition-old(vt-enter-3),
  ::view-transition-old(vt-enter-4),
  ::view-transition-old(vt-enter-5),
  ::view-transition-old(vt-enter-6) {
    animation: 0.3s ease-in both vt-sink;
  }

  @keyframes vt-zoom-in {
    from { opacity: 0; scale: 1.25; filter: blur(14px); }
  }

  @keyframes vt-fade-up {
    from { opacity: 0; translate: 0 40px; }
  }

  @keyframes vt-fly-left {
    from { opacity: 0; translate: -120px 30px; rotate: -3deg; }
  }

  @keyframes vt-fly-right {
    from { opacity: 0; translate: 120px 30px; rotate: 3deg; }
  }

  @keyframes vt-fly-up {
    from { opacity: 0; translate: 0 90px; scale: 0.92; }
  }

  @keyframes vt-pop {
    from { opacity: 0; scale: 0.55; }
  }

  @keyframes vt-sink {
    to { opacity: 0; translate: 0 35px; scale: 0.97; }
  }
}