/* Native cross-document fades keep the existing page lifecycle and game saves. */
@view-transition { navigation: auto; }

header { view-transition-name: cafe-header; }
.topbar { view-transition-name: cafe-topbar; }

::view-transition-old(root) { animation: cafe-page-out 180ms ease both; }
::view-transition-new(root) { animation: cafe-page-in 240ms ease both; }
::view-transition-group(cafe-header),
::view-transition-group(cafe-topbar) { animation-duration: 240ms; }
::view-transition-old(cafe-header),
::view-transition-old(cafe-topbar) { animation: cafe-page-out 180ms ease both; }
::view-transition-new(cafe-header),
::view-transition-new(cafe-topbar) { animation: cafe-page-in 240ms ease both; }

@keyframes cafe-page-out { to { opacity: 0; } }
@keyframes cafe-page-in { from { opacity: 0; } to { opacity: 1; } }

/* A real underline element can ease in and out; text-decoration cannot. */
header nav a:not(.nav-cta) { position: relative; text-decoration: none; }
header nav a[aria-current=page] { text-decoration: none; }
header nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
  pointer-events: none;
}
header nav a:not(.nav-cta):is([aria-current=page], :focus-visible)::after {
  transform: scaleX(1);
  opacity: 1;
}
@media (hover: hover) {
  header nav a:not(.nav-cta):hover::after { transform: scaleX(1); opacity: 1; }
}

.filters button, .menu-bottom button, .mobile-toggle {
  transition: color 300ms ease, border-color 300ms ease, background-color 300ms ease;
}
.fav { transition: color 280ms ease, transform 280ms ease; }
.fav:active { transform: scale(.9); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*) { animation-duration: 0s !important; }
  header nav a::after, .filters button, .menu-bottom button, .mobile-toggle,
  .fav { transition: none !important; }
  .fav:active { transform: none; }
  html { scroll-behavior: auto; }
}