/* Fast route transition: a seamless curtain with the rotating Brawnd mark. */
.brawnd-route-transition {
  position: fixed;
  inset: 0;
  z-index: 19000;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  --route-enter: translate3d(0, -102%, 0);
  --route-exit: translate3d(0, 102%, 0);
}
.brawnd-route-transition[data-direction="up"] {
  --route-enter: translate3d(0, 102%, 0);
  --route-exit: translate3d(0, -102%, 0);
}
.brawnd-route-transition[data-direction="left"] {
  --route-enter: translate3d(102%, 0, 0);
  --route-exit: translate3d(-102%, 0, 0);
}
.brawnd-route-transition[data-direction="right"] {
  --route-enter: translate3d(-102%, 0, 0);
  --route-exit: translate3d(102%, 0, 0);
}
.brawnd-route-surface {
  position: absolute;
  inset: -1px;
  background: #1b1417;
  transform: var(--route-enter);
  transition: transform 190ms cubic-bezier(.73, 0, .28, 1);
  will-change: transform;
}
.brawnd-route-heading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.brawnd-route-mark {
  display: block;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  background: url("../img/brawnd-intro-mark.svg") center / contain no-repeat;
  opacity: 0;
  transform: rotate(0deg);
}
.brawnd-route-transition.is-active,
html.brawnd-route-incoming .brawnd-route-transition {
  visibility: visible;
  pointer-events: auto;
}
.brawnd-route-transition.is-covering .brawnd-route-surface,
html.brawnd-route-incoming .brawnd-route-surface {
  transform: translate3d(0, 0, 0);
}
.brawnd-route-transition.is-covering .brawnd-route-mark,
html.brawnd-route-incoming .brawnd-route-mark {
  opacity: 1;
  animation: brawnd-route-spin 700ms linear infinite;
}
html.brawnd-route-incoming .brawnd-route-surface { transition: none; }
@keyframes brawnd-route-spin {
  to { transform: rotate(360deg); }
}
.brawnd-route-transition.is-revealing .brawnd-route-surface,
html.brawnd-route-incoming .brawnd-route-transition.is-revealing .brawnd-route-surface {
  transform: var(--route-exit);
  transition: transform 230ms cubic-bezier(.73, 0, .28, 1) 30ms;
}
.brawnd-route-transition.is-revealing .brawnd-route-mark,
html.brawnd-route-incoming .brawnd-route-transition.is-revealing .brawnd-route-mark {
  opacity: 0;
  animation: none;
  transition: opacity 100ms ease;
}
html.brawnd-route-incoming:not(.brawnd-route-revealing) body::before {
  position: fixed;
  z-index: 18999;
  inset: 0;
  background: #1b1417;
  content: '';
  pointer-events: auto;
}
@media (max-width: 480px) {
  .brawnd-route-mark { width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .brawnd-route-transition,
  html.brawnd-route-incoming .brawnd-route-transition { display: none; }
  html.brawnd-route-incoming body::before { display: none; }
}