/* knowit.kr — page-to-page transitions (export/build.py, VT_CSS). On knowit.kr and the two clinic pages. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@keyframes k-fade-in { from { opacity: 0; } }
@keyframes k-fade-out { to { opacity: 0; } }

/* any other move between these pages: a short crossfade */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }

/* a · 로고 이어받기: the logo flies to its place on the clinic page; the old and new pictures of it swap early, so it stays
   sharp while it grows */
html:active-view-transition-type(k-a)::view-transition-group(k-logo) { animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
html:active-view-transition-type(k-a)::view-transition-old(k-logo),
html:active-view-transition-type(k-a)::view-transition-new(k-logo) { animation-duration: 0.24s; animation-timing-function: ease-out; }
html:active-view-transition-type(k-a)::view-transition-old(root),
html:active-view-transition-type(k-a)::view-transition-new(root) { animation-duration: 0.62s; animation-timing-function: ease; }

/* b · 판 펼치기: on knowit.kr the pressed door widens to the whole screen and empties (.ks--open, before leaving) */
.ks.ks--open .ks-side.ks-side--kr { flex-grow: 1; }
.ks.ks--open .ks-side.ks-side--gl { flex-grow: 0; }
.ks.ks--open .ks-side { transition: flex-grow 0.56s cubic-bezier(0.65, 0, 0.35, 1), min-height 0.56s cubic-bezier(0.65, 0, 0.35, 1); }
.ks.ks--open .ks-side--kr .ks-in, .ks.ks--open .ks-side--gl .ks-in, .ks.ks--open .ks-brand, .ks.ks--open .ks-foot { opacity: 0; transition: opacity 0.28s ease; }
.ks.ks--open .ks-side.ks-side--kr .ks-veil { background: rgba(246, 252, 250, 0.42); transition: background-color 0.56s ease; }
/* and a slow step into the room while the clinic page loads, so the open door never looks frozen */
.ks.ks--open .ks-side--kr .ks-bg { transform: translateX(-50%) scale(1.06); transition: transform 1.6s cubic-bezier(0.2, 0, 0, 1); }
@media (max-width: 760px) {
  .ks.ks--open .ks-side.ks-side--kr { min-height: 100vh; min-height: 100svh; }
  .ks.ks--open .ks-side.ks-side--gl { min-height: 0; flex-basis: 0; }
  .ks.ks--open .ks-side--kr .ks-bg { transform: scale(1.06); }     /* phones: the picture is not centred by a shift */
}
html:active-view-transition-type(k-b)::view-transition-old(root),
html:active-view-transition-type(k-b)::view-transition-new(root) { animation-duration: 0.42s; animation-timing-function: ease; }

/* c · 원으로 열기: the clinic page opens in a circle from the point that was pressed (--vt-x, --vt-y) over the door, which
   dims a little */
@keyframes k-circle { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); } }
@keyframes k-dim { to { filter: brightness(0.9) saturate(0.9); } }
html:active-view-transition-type(k-c)::view-transition-old(root) { animation: k-dim 0.74s ease both; }
html:active-view-transition-type(k-c)::view-transition-new(root) { animation: k-circle 0.74s cubic-bezier(0.7, 0, 0.25, 1) both; mix-blend-mode: normal; }