.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 14% 78%, rgba(255, 216, 77, .28) 0 9rem, transparent 9.2rem),
    radial-gradient(circle at 90% 18%, rgba(255, 79, 146, .42) 0 10rem, transparent 10.2rem),
    radial-gradient(circle at 20% 20%, rgba(0, 174, 222, .3) 0 12rem, transparent 12.2rem),
    linear-gradient(160deg, #b9efff 0%, #d8f8ff 46%, #c4f3da 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}

body.is-loading {
  overflow: hidden;
}

body.is-ready .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.loader-cloud {
  position: absolute;
  left: -16rem;
  width: 13rem;
  height: 4.8rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 58%, rgba(255,255,255,.96) 0 2.2rem, transparent 2.25rem),
    radial-gradient(circle at 48% 38%, #fff 0 3.3rem, transparent 3.35rem),
    radial-gradient(circle at 78% 62%, rgba(255,255,255,.94) 0 2.1rem, transparent 2.15rem);
  opacity: .86;
  filter: drop-shadow(0 8px 12px rgba(33, 125, 150, .08));
  animation: loaderCloud 14s linear infinite;
}

.loader-cloud-a { top: 14%; }
.loader-cloud-b {
  top: 56%;
  width: 16rem;
  height: 5.8rem;
  opacity: .62;
  animation-duration: 18s;
  animation-delay: -7s;
}
.loader-cloud-c {
  top: 76%;
  width: 10rem;
  height: 4rem;
  opacity: .48;
  animation-duration: 22s;
  animation-delay: -12s;
}

.loader-shape,
.loader-star {
  position: absolute;
  display: block;
}

.loader-sun {
  top: 11%;
  left: 11%;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #ffb347 0 10deg, transparent 10deg 22deg),
    radial-gradient(circle, rgba(255, 226, 117, .58) 0 58%, transparent 60%);
  animation: loaderSpin 12s linear infinite;
}

.loader-balloon-a,
.loader-balloon-b {
  width: 4rem;
  height: 5rem;
  border-radius: 52% 52% 48% 48%;
  animation: loaderFloat 3.2s ease-in-out infinite;
}

.loader-balloon-a {
  right: 12%;
  top: 24%;
  background: linear-gradient(145deg, #ff6b9d, #ff9dd1);
}

.loader-balloon-b {
  left: 18%;
  bottom: 16%;
  width: 3.5rem;
  height: 4.4rem;
  background: linear-gradient(145deg, #00b4d8, #64e7de);
  animation-delay: -1.2s;
}

.loader-balloon-a::after,
.loader-balloon-b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 3.5rem;
  background: rgba(52, 80, 86, .22);
}

.loader-star {
  width: 3.6rem;
  height: 3.6rem;
  background: rgba(255, 226, 117, .62);
  clip-path: polygon(50% 0, 61% 34%, 97% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 3% 35%, 39% 34%);
  opacity: .78;
  animation: loaderTwinkle 1.8s ease-in-out infinite;
}

.loader-star-a { right: 18%; bottom: 18%; }
.loader-star-b {
  left: 29%;
  top: 18%;
  width: 2rem;
  height: 2rem;
  background: #a29bfe;
  animation-delay: -.6s;
}
.loader-star-c {
  right: 31%;
  top: 70%;
  width: 2.4rem;
  height: 2.4rem;
  background: #45c876;
  animation-delay: -1s;
}

.loader-card {
  position: relative;
  z-index: 2;
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
  border: 4px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,253,245,.96)),
    radial-gradient(circle at 20% 0%, rgba(255, 226, 117, .12), transparent 42%);
  box-shadow: 0 22px 48px rgba(33, 125, 150, .22);
  animation: loaderCardPop .7s ease both;
}

.loader-card img {
  width: min(240px, 76vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(33, 125, 150, .16));
  animation: loaderLogoBounce 1.7s ease-in-out infinite;
}

.loader-card p {
  margin: 0;
  color: #345056;
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 800;
  text-align: center;
}

.loader-bar {
  width: min(260px, 72vw);
  height: .65rem;
  overflow: hidden;
  border-radius: 999px;
  background: #d9f3fb;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75);
}

.loader-bar span {
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4f8b, #ffb347, #00b4d8);
  animation: loaderSweep 1.1s ease-in-out infinite;
}

@keyframes loaderCloud {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 34rem)); }
}

@keyframes loaderSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes loaderFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-1rem) rotate(4deg); }
}

@keyframes loaderTwinkle {
  0%, 100% { transform: scale(.88) rotate(0deg); opacity: .45; }
  50% { transform: scale(1.12) rotate(12deg); opacity: .95; }
}

@keyframes loaderCardPop {
  0% { transform: translateY(1rem) scale(.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes loaderLogoBounce {
  0%, 100% { transform: translateY(0); }
  38% { transform: translateY(-.55rem); }
  62% { transform: translateY(.12rem); }
}

@keyframes loaderSweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@media (max-width: 640px) {
  .loader-card {
    padding: 1.35rem;
    border-radius: 24px;
  }

  .loader-card img {
    width: min(210px, 72vw);
  }
}