/* ── Loading overlay ── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: #000;                    /* or #0f0f0f, #111, whatever matches your vibe */
  z-index: 9999;                       /* stays on top of everything */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;       /* smooth fade-out */
  pointer-events: none;                /* clicks go through after fade (optional) */
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;                  /* completely removes it after fade */
  transition: 
    opacity 0.5s ease,
    visibility 0s linear 0.5s;         /* delay visibility:hidden so fade can finish */
}

.loading-content {
  text-align: center;
  color: white;                        /* or your brand color */
}




.loading-content .melodreams-logo__img {
  width: 70px;
  height: auto;
  margin-bottom: 0.4rem;
  display: block;
  margin-left: auto;
  margin-right: auto;

  /* ── Gentle bouncing animation ── */
  animation: 
    bounce 1.8s infinite ease-in-out,
    subtle-pulse 3s infinite ease-in-out;
}

/* Bouncy up-down motion */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);   /* how high it jumps — 8–15px feels nice */
  }
}

/* Very soft scale pulse to give "breathing" / glowing loading vibe */
@keyframes subtle-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.08);         /* very gentle — 1.05–1.12 range */
    opacity: 1;
  }
}


.loading-content .melodreams-logo__text {
  font-size: 1.4rem;                   /* compact text size */
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0.95;
}