/* ==========================================================================
   Global motion.

   A quick, consistent fade on every route change so all pages load in smoothly
   the same way. The wrapper `.kk-route-fade` in routes.jsx is keyed by
   pathname, so the animation replays on real navigation but NOT on
   filter/pagination changes (those only change the query string).

   Kept short (0.22s) so it reads as smooth-and-fast, never sluggish.
   ========================================================================== */

/* Opacity-only: the fade wrapper includes the (sticky) navbar, so a translate
   would make the bar visibly jump on every click. A clean fade keeps it steady. */
@keyframes kk-route-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.kk-route-fade {
  animation: kk-route-in 0.22s ease both;
}

/* Accessibility: users who prefer reduced motion get no page/dropdown motion. */
@media (prefers-reduced-motion: reduce) {
  .kk-route-fade,
  .kk-appbar .dropdown-menu {
    animation: none !important;
  }
}