html.is-loading-ready body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: block;
  background: #e7f2ef url(../images/img_topLoading-bg.jpg) center / cover no-repeat;
  pointer-events: none;
  animation: loadingScreenOut 0.55s ease-out 2.35s forwards;
}

html.is-loading-ready .loading__screen {
  z-index: 9999;
}
.loading__screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  overflow: hidden;
  background: #e7f2ef;
  opacity: 1;
  visibility: visible;
}

.is-loading-ready,
.is-loading-ready body {
  overflow: hidden;
}

.is-loading-ready .loading__screen {
  display: grid;
  animation: loadingScreenOut 0.55s ease-out 2.35s forwards;
}

.is-loading-done .loading__screen,
.is-loading-skip .loading__screen {
  display: none;
}

.loading__screen::before,
.loading__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.loading__screen::before {
  background: url("../images/img_topLoading-bg.jpg") center/cover no-repeat;
  transform: scale(1.04);
}

.loading__screen::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 164, 157, 0.2)),
    rgba(255, 255, 255, 0.16);
}

.is-loading-ready .loading__screen::before {
  animation: loadingBgZoom 2.9s ease-out forwards;
}

.loading__logo {
  position: relative;
  z-index: 1;
  width: min(206px, 38vw);
  aspect-ratio: 206 / 137;
  filter: drop-shadow(0 12px 24px rgba(0, 72, 58, 0.16));
}

.loading__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.is-loading-ready .loading__logo {
  animation: loadingLogo 2.15s ease-in-out forwards;
}

@keyframes loadingLogo {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  30% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  72% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.16);
  }
}

@keyframes loadingBgZoom {
  0% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes loadingScreenOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-loading-ready .loading__screen,
  .is-loading-ready .loading__screen::before,
  .is-loading-ready .loading__logo {
    animation-duration: 0.01ms;
    animation-delay: 0s;
  }
}