/* A quick editorial shutter between pages. It never changes link semantics. */
html.route-leaving body::before,
html.route-arriving body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: linear-gradient(to bottom, #bd6a50 0 6px, #1b1b18 6px);
  pointer-events: auto;
}

html.route-leaving body::after,
html.route-arriving body::after {
  content: "BetzsBest.";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3001;
  color: #f7f5f0;
  font: 500 clamp(2.8rem, 8vw, 7rem)/1 "Playfair Display", Georgia, serif;
  letter-spacing: -.07em;
  white-space: nowrap;
  pointer-events: none;
}

html.route-leaving body::before {
  animation: bb-page-cover .42s cubic-bezier(.76, 0, .24, 1) both;
}
html.route-leaving body::after {
  animation: bb-page-name-in .28s ease .14s both;
}
html.route-arriving body::before {
  animation: bb-page-reveal .58s cubic-bezier(.76, 0, .24, 1) both;
}
html.route-arriving body::after {
  animation: bb-page-name-out .42s ease both;
}

@keyframes bb-page-cover {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes bb-page-reveal {
  from { transform: translateY(0); }
  to { transform: translateY(-105%); visibility: hidden; }
}
@keyframes bb-page-name-in {
  from { opacity: 0; transform: translate(-50%, -35%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes bb-page-name-out {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, -85%); }
}

@media (prefers-reduced-motion: reduce) {
  html.route-leaving body::before,
  html.route-leaving body::after,
  html.route-arriving body::before,
  html.route-arriving body::after { content: none; animation: none; }
}