/* Loading overlay for "The Spread Beneath the Stars" */
#preload-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, #1b1740 0%, #0b0a1c 55%, #05040d 100%);
  color: #efe6cf;
  font-family: 'Cormorant Garamond', Georgia, serif;
  opacity: 1;
  transition: opacity 0.6s ease;
  padding: 24px;
  box-sizing: border-box;
}
#preload-overlay.pl-out {
  opacity: 0;
  pointer-events: none;
}
#preload-overlay .pl-inner {
  position: relative;
  width: 100%;
  max-width: 460px;
  text-align: center;
}
#preload-overlay .pl-stars {
  position: absolute;
  inset: -60px -40px 40px;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 250, 230, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255, 250, 230, 0.75), transparent),
    radial-gradient(1px 1px at 34% 64%, rgba(255, 250, 230, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(255, 250, 230, 0.8), transparent),
    radial-gradient(1px 1px at 56% 38%, rgba(255, 250, 230, 0.55), transparent),
    radial-gradient(1px 1px at 22% 88%, rgba(255, 250, 230, 0.5), transparent);
  animation: pl-twinkle 4s ease-in-out infinite;
}
@keyframes pl-twinkle {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
#preload-overlay .pl-title {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.35rem, 5.5vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  color: #f4e9c8;
  text-shadow: 0 0 18px rgba(212, 175, 90, 0.45);
}
#preload-overlay .pl-sub {
  margin: 0 0 1.6rem;
  font-size: 0.98rem;
  font-style: italic;
  color: rgba(239, 230, 207, 0.72);
  letter-spacing: 0.04em;
}
#preload-overlay .pl-track {
  height: 3px;
  width: 100%;
  background: rgba(239, 230, 207, 0.16);
  border-radius: 999px;
  overflow: hidden;
}
#preload-overlay .pl-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8d7bd4, #d4af5a 65%, #f6e4ae);
  box-shadow: 0 0 12px rgba(212, 175, 90, 0.7);
  transition: width 0.35s ease;
}
#preload-overlay .pl-pct {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: rgba(239, 230, 207, 0.62);
}
@media (prefers-reduced-motion: reduce) {
  #preload-overlay .pl-stars { animation: none; }
  #preload-overlay, #preload-overlay .pl-bar { transition: none; }
}