/* Page-to-page motion between 一齊開班 / 學校課程 and a class page (cross-document view transitions; Chrome, Edge and
   Safari 18.2+, elsewhere an ordinary page load). Only these pages load this file, so only they opt in. The card's photo
   and the class page's first photo share a name (kx-photo-<id>), so the photo grows into place while the rest of the
   page fades and rises; the site header stays put. Reduced motion, or 特效 off: no movement. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.site-header{view-transition-name:kx-header}
.kx-photo img,.kc-tile:first-child img{view-transition-class:kx-photo}
::view-transition-old(root){animation:kvt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:kvt-in .5s cubic-bezier(.2,.8,.2,1) .06s both}
::view-transition-group(*.kx-photo){animation-duration:.62s;animation-timing-function:cubic-bezier(.22,.9,.24,1)}
::view-transition-old(*.kx-photo),::view-transition-new(*.kx-photo){height:100%;object-fit:cover;overflow:clip}
::view-transition-group(kx-header){animation:none}
::view-transition-old(kx-header){display:none}
::view-transition-new(kx-header){animation:none}
@keyframes kvt-out{to{opacity:0}}
@keyframes kvt-in{from{opacity:0;transform:translateY(18px)}}
:root.reduceMotion::view-transition-group(*),:root.reduceMotion::view-transition-old(*),:root.reduceMotion::view-transition-new(*){animation:none!important}