/* 페이지 넘김 (View Transitions) — 문서 38 구현 순서 7 (2026-10-28)

   사이트 설정 site.motion.vt 를 고른 사이트만 이 파일을 싣는다(gl-render.js siteMotionAssets).
   같은 사이트 안에서 화면을 옮기면 이전 화면이 녹듯이(fade) · 올라오며(slide) 바뀐다.

   🔴 문서 간 전환(@view-transition { navigation: auto })은 «나가는 화면 · 들어오는 화면» 둘 다 이것을 실어야 돈다 —
      그래서 위젯이 아니라 사이트 설정이다. 다른 사이트로 가는 링크 · 새 창은 돌지 않는다(브라우저 규칙).
   🔴 미지원 브라우저(Firefox 등)는 이 규칙을 모른 채 그냥 이동한다 — 손해가 없다. 스크립트를 쓰지 않는다.
   🔴 «움직임 줄이기» 에서는 전환 자체를 켜지 않는다(@media 안에만 둔다) — 화면이 바로 바뀐다.
   🔴 움직이는 것은 opacity · transform 뿐이다(브라우저가 찍어 둔 그림을 옮긴다 — 레이아웃이 다시 계산되지 않는다).
   상단바는 제자리에 둔다(view-transition-name) — 화면마다 같은 막대가 깜빡이지 않게. 낭독기 · 키보드 초점은 브라우저가 새 화면 기준으로 그대로 다룬다. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

:root[data-gl-vt] [data-gl-nav-bar] { view-transition-name: gl-vt-nav; }

:root[data-gl-vt="fade"]::view-transition-old(root),
:root[data-gl-vt="fade"]::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: ease; }

:root[data-gl-vt="slide"]::view-transition-old(root) { animation: gl-vt-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
:root[data-gl-vt="slide"]::view-transition-new(root) { animation: gl-vt-in 0.4s cubic-bezier(0, 0, 0.2, 1) both; }
@keyframes gl-vt-out { to { opacity: 0; transform: translateY(-18px); } }
@keyframes gl-vt-in { from { opacity: 0; transform: translateY(28px); } }

/* ── 화면 커튼 전환 — 문서 41 구현 순서 36 (curtain · 2026-10-29) ─────────────────────────────
   site.motion.vt 의 모양 셋 더: wipe(왼쪽에서 걷힘) · iris(가운데서 둥글게 열림) · blinds(가로 띠 다섯이 한꺼번에 내려옴).
   이전 화면(old)은 그대로 두고 새 화면(new)을 clip-path 로 드러낸다 — 둘 다 브라우저가 찍어 둔 그림이라 레이아웃은 다시 계산되지 않는다.
   🔴 겹쳐 더하기(plus-lighter 기본)를 끈다(mix-blend-mode: normal) — 안 끄면 드러나는 자리에서 두 화면 색이 더해져 하얗게 번쩍인다.
   🔴 움직임 줄이기 · 미지원 브라우저는 위의 @media 가 전환 자체를 켜지 않아 바로 바뀐다. 상단바(gl-vt-nav)는 커튼 밖에서 제자리다. */
:root:is([data-gl-vt="wipe"], [data-gl-vt="iris"], [data-gl-vt="blinds"])::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
:root:is([data-gl-vt="wipe"], [data-gl-vt="iris"], [data-gl-vt="blinds"])::view-transition-new(root) {
  mix-blend-mode: normal; animation-duration: 0.62s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-fill-mode: both;
}
:root[data-gl-vt="wipe"]::view-transition-new(root) { animation-name: gl-curtain-wipe; }
:root[data-gl-vt="iris"]::view-transition-new(root) { animation-name: gl-curtain-iris; }
:root[data-gl-vt="blinds"]::view-transition-new(root) { animation-name: gl-curtain-blinds; }
@keyframes gl-curtain-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gl-curtain-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(72% at 50% 50%); } }
/* 띠 다섯 — 한 다각형으로 그린다(띠 사이는 x=0 선 위로만 이어 넓이 0). 꼭짓점 수가 같아야 사이 값이 이어진다(20개) */
@keyframes gl-curtain-blinds {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 20%, 100% 20%, 100% 20%, 0 20%, 0 40%, 100% 40%, 100% 40%, 0 40%, 0 60%, 100% 60%, 100% 60%, 0 60%, 0 80%, 100% 80%, 100% 80%, 0 80%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%, 0 20%, 100% 20%, 100% 40%, 0 40%, 0 40%, 100% 40%, 100% 60%, 0 60%, 0 60%, 100% 60%, 100% 80%, 0 80%, 0 80%, 100% 80%, 100% 100%, 0 100%); }
}

/* ── 카드가 커져 상세로 — 문서 41 구현 순서 34 (vtshare · 공유 요소 전환 · 2026-10-29) ─────────────────────
   site.motion.vtshare = "on". gl-vtshare.js 가 «누른 목록 카드의 사진» 과 «들어간 상세 화면의 첫 사진» 에만 같은 이름(gl-vtshare)을 잠깐 단다.
   브라우저가 두 사진 사이의 자리 · 크기를 이어 그려 카드가 커지며 상세로 넘어간다(뒤로 가면 거꾸로 줄어든다).
   🔴 이름은 한 화면에 하나만 — 카드마다 미리 달면 이름이 겹쳐 전환 전체가 꺼진다. 그래서 스크립트가 넘어가는 순간에만 단다.
   🔴 스크립트가 없거나 · 짝을 못 찾거나 · 움직임 줄이기 · 미지원 브라우저는 그냥 넘어간다(위 페이지 넘김 그대로). */
::view-transition-group(gl-vtshare) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
::view-transition-old(gl-vtshare),
::view-transition-new(gl-vtshare) { height: 100%; object-fit: cover; overflow: clip; }