.formatto-home-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  background: var(--color-surface);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.is-home-loading body {
  overflow: hidden;
}

.formatto-home-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: formatto-loader-release 6600ms cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

.formatto-home-loader.is-leaving {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  animation: none;
  transition: opacity 2200ms cubic-bezier(0.45, 0, 0.25, 1), visibility 0s linear 2200ms;
}

.formatto-home-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(80vw, 24rem);
}

.formatto-home-loader__text {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(0.75rem);
}

.formatto-home-loader__logo {
  width: clamp(9.625rem, 12vw, 14.5rem);
  height: auto;
  margin-top: 1.25rem;
  opacity: 0;
  transform: translateY(0.75rem);
}

.formatto-home-loader__bar {
  position: relative;
  width: clamp(9.625rem, 12vw, 14.5rem);
  height: 0.375rem;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 135, 213, 0.14);
  opacity: 0;
}

.formatto-home-loader__bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-blue-600);
  transform: scaleX(0);
  transform-origin: left center;
}

.formatto-home-loader.is-active .formatto-home-loader__text {
  animation: formatto-loader-item-in 700ms ease 120ms forwards, formatto-loader-item-out 650ms ease 5850ms forwards;
}

.formatto-home-loader.is-active .formatto-home-loader__logo {
  animation: formatto-loader-item-in 760ms ease 620ms forwards, formatto-loader-item-out 650ms ease 5850ms forwards;
}

.formatto-home-loader.is-active .formatto-home-loader__bar {
  animation: formatto-loader-fade-in 500ms ease 900ms forwards, formatto-loader-item-out 650ms ease 5850ms forwards;
}

.formatto-home-loader.is-active .formatto-home-loader__bar span {
  animation: formatto-loader-progress 6600ms cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

@keyframes formatto-loader-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes formatto-loader-item-out {
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@keyframes formatto-loader-fade-in {
  to {
    opacity: 1;
  }
}

@keyframes formatto-loader-progress {
  to {
    transform: scaleX(1);
  }
}

@keyframes formatto-loader-release {
  0%,
  66% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .formatto-home-loader__inner {
    width: 76vw;
  }

  .formatto-home-loader__text {
    font-size: 4.071vw;
  }

  .formatto-home-loader__logo {
    width: 39.186vw;
    margin-top: 4.071vw;
  }

  .formatto-home-loader__bar {
    width: 39.186vw;
    height: 1.527vw;
    margin-top: 6.107vw;
  }
}