@font-face {
  font-display: swap;
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/dm-mono-500.woff2") format("woff2");
}

::view-transition-old(root) {
  animation: language-out 180ms ease both;
}

::view-transition-new(root) {
  animation: language-in 360ms cubic-bezier(.16, 1, .3, 1) both;
}

html.language-leaving body {
  filter: blur(2px);
  opacity: .45;
  transform: translateY(3px);
}

html.language-entering body {
  animation: language-in 360ms cubic-bezier(.16, 1, .3, 1) both;
}

body {
  transition: filter 150ms ease, opacity 150ms ease, transform 150ms ease;
}

@keyframes language-out {
  to {
    filter: blur(3px);
    opacity: 0;
    transform: translateY(-3px);
  }
}

@keyframes language-in {
  from {
    filter: blur(3px);
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.language-entering body {
    animation: none;
  }

  body {
    transition: none;
  }
}