@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/sf-pro-display-400.woff2") format("woff2");
}

@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/sf-pro-display-500.woff2") format("woff2");
}

@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../shared/fonts/sf-pro-display-600.woff2") format("woff2");
}

@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/sf-pro-display-700.woff2") format("woff2");
}

@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/052df74533250c2e.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/68e5e01d6265bd68.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116, U+20BD;
}

.site-transition {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(118, 112, 128, 0.16), transparent 42%),
    #08080d;
  opacity: 1;
  transform: translateZ(0);
  animation: site-transition-first-load 0.28s ease-out 0.02s forwards;
  transition: opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  contain: strict;
  will-change: opacity;
}

.site-transition::before {
  content: "";
  position: absolute;
  inset: -16%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(235, 230, 240, 0.17), rgba(157, 150, 168, 0.05) 30%, transparent 58%);
  opacity: 0.42;
  transform: scale(0.94);
  transition:
    opacity 0.26s ease,
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.is-page-leaving .site-transition {
  animation: none;
  opacity: 1;
  pointer-events: auto;
}

html.is-page-leaving .site-transition::before {
  opacity: 0.82;
  transform: scale(1.025);
}

html.is-page-entering .site-transition {
  animation: site-transition-fade-out 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes site-transition-first-load {
  to { opacity: 0; }
}

@keyframes site-transition-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-transition {
    animation-duration: 0.01ms;
    animation-delay: 0s;
    transition-duration: 0.01ms;
  }

  .site-transition::before {
    animation: none !important;
    transition: none;
  }
}
