html.bp-page-loading,
html.bp-page-loading body{
  overflow: hidden;
}

.bp-page-loader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fcf9f1;
  transition:
    opacity .55s ease,
    visibility .55s ease;
}

.bp-page-loader__inner{
  display: grid;
  justify-items: center;
  gap: 18px;
}

.bp-page-loader__logo{
  width: clamp(90px, 12vw, 132px);
  height: auto;
  opacity: 0;
  animation:
    bpLogoFade .9s ease forwards,
    bpLogoFloat 2.6s ease-in-out infinite;
}

.bp-page-loader__text{
  margin: 0;
  font-size: clamp(.88rem, 1.4vw, .92rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.46);
  opacity: 0;
  animation: bpLoaderTextFade .9s ease .18s forwards;
}

html:not(.bp-page-loading) .bp-page-loader{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes bpLogoFade{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bpLogoFloat{
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-6px);
  }
}

@keyframes bpLoaderTextFade{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}