/* Kattika motion: page transitions, the gliding nav marker, logo draw-in.
   All of it is progressive: browsers without View Transitions just navigate normally. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }
.site-nav a { position: relative; }
.site-nav a[aria-current="page"] { border-bottom-color: transparent !important; }
.site-nav .mark { position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--accent, #c2410c); view-transition-name: nav-mark; }
main.page { view-transition-name: page; }

::view-transition-group(nav-mark) { animation-duration: .42s; animation-timing-function: cubic-bezier(.65,0,.25,1); }
::view-transition-old(page) { animation: kt-out .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(page) { animation: kt-in .38s cubic-bezier(0,0,.2,1) .06s both; }
@keyframes kt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes kt-in { from { opacity: 0; transform: translateY(10px); } }

/* logo draws itself once per visit (class added by script) */
.brand.draw .lm-ink { stroke-dasharray: 60; stroke-dashoffset: 60; animation: kt-draw .9s cubic-bezier(.65,0,.35,1) .1s forwards; }
.brand.draw .lm-dot { opacity: 0; animation: kt-pop .35s ease-out .75s forwards; }
.brand.draw .lm-node { opacity: 0; transform-origin: 11px 20px; animation: kt-node .6s cubic-bezier(.2,1.4,.4,1) .95s forwards; }
@keyframes kt-draw { to { stroke-dashoffset: 0; } }
@keyframes kt-pop { to { opacity: 1; } }
@keyframes kt-node { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .brand.draw .lm-ink, .brand.draw .lm-dot, .brand.draw .lm-node { animation: none; opacity: 1; stroke-dashoffset: 0; }
}