/* Keep the header's original position and responsive box in style.css. */
.starry-tales-logo {
  display: inline-flex;
  align-items: center;
  gap: 4%;
  text-decoration: none;
}

.starry-tales-logo > img {
  display: block;
  flex: none;
  height: auto;
}

.starry-tales-logo > .logo-symbol { width: 20%; }
.starry-tales-logo > .logo-wordmark { width: 76%; }

.loading-brand {
  width: min(360px, 64vw);
  margin: 10px 0 24px;
}

#loading.book .loading-brand { display: none; }

/* Keep the first loading view atmospheric even before scene textures arrive. */
#loading:not(.book) {
  --loading-painted-sky: radial-gradient(ellipse at 12% 18%, #677bac55 0, transparent 45%),
    radial-gradient(ellipse at 88% 70%, #6e557655 0, transparent 48%),
    radial-gradient(ellipse at 52% 110%, #b08a5744 0, transparent 52%),
    linear-gradient(145deg, #17273b 0%, #20344b 43%, #24263f 76%, #172338 100%);
  background: var(--loading-painted-sky);
}
#loading:not(.book) .loading-sky { background: var(--loading-painted-sky); }
#loading:not(.book) .loading-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .58;
  background: radial-gradient(circle at 9% 26%, #efdab2 0 1px, transparent 2px),
    radial-gradient(circle at 23% 13%, #edf1fb 0 1px, transparent 2px),
    radial-gradient(circle at 63% 16%, #dce6f8 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 32%, #efdab2 0 1px, transparent 2px),
    radial-gradient(circle at 94% 18%, #efdab2 0 1px, transparent 2px),
    radial-gradient(circle at 13% 76%, #d8e8fa 0 1px, transparent 2px),
    radial-gradient(circle at 72% 83%, #efdab2 0 1px, transparent 2px);
}
@media (prefers-reduced-motion: reduce) {
  #loading:not(.book) .loading-sky::before { animation: none; }
}

.pricing-brand.starry-tales-logo {
  width: 190px;
  height: 44px;
  flex: none;
}

@media (max-width: 600px) {
  .pricing-brand.starry-tales-logo { width: 150px; }
}