/* Background only: existing content keeps its geometry, type and artwork. */
:root {
  --night-frame-bleed: 20px;
  --night-wide-frame: min(1320px, calc(100% - 40px));
}

body {
  isolation: isolate;
  background: linear-gradient(115deg, #15234f 0%, #16275d 52%, #1b2d65 100%);
}

/* Two small composited layers, below the UI. No images, canvas or scripts. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
}

body::before {
  background-image:
    radial-gradient(circle 1px at 1.2% 14%, #fff5dc 70%, transparent 100%),
    radial-gradient(circle 1.3px at 97.8% 28%, #f5d793 70%, transparent 100%),
    radial-gradient(circle 1px at 3.1% 57%, #fff7e8 70%, transparent 100%),
    radial-gradient(circle 1.2px at 99.2% 79%, #f5d793 70%, transparent 100%),
    radial-gradient(circle 1px at 37% 42%, #fff5dc 70%, transparent 100%),
    radial-gradient(circle 1px at 72% 92%, #fff7e8 70%, transparent 100%);
  opacity: .6;
  animation: bedtime-stars-a 9s ease-in-out -3s infinite alternate;
}

body::after {
  background-image:
    radial-gradient(circle 1px at 98.7% 61%, #fff7e8 70%, transparent 100%),
    radial-gradient(circle 1.2px at .7% 88%, #f5d793 70%, transparent 100%),
    radial-gradient(circle 1px at 5.4% 35%, #fff5dc 70%, transparent 100%),
    radial-gradient(circle 1px at 91.4% 10%, #fff7e8 70%, transparent 100%),
    radial-gradient(circle 1.1px at 21% 73%, #f5d793 70%, transparent 100%);
  opacity: .45;
  animation: bedtime-stars-b 14s ease-in-out -8s infinite alternate;
}

@keyframes bedtime-stars-a { from { opacity: .38; } to { opacity: .78; } }
@keyframes bedtime-stars-b { from { opacity: .28; } to { opacity: .66; } }

/* Paint light frames behind the current sections, using the existing gutters.
   Pseudo-elements add no padding, margins, height or scrollable width. */
#main > section.container,
.reading-section,
.keepsake-section,
.cast-section {
  position: relative;
  isolation: isolate;
}

#main > section.container::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--night-frame-bleed));
  z-index: -1;
  pointer-events: none;
  border-radius: 18px;
  background: var(--cream);
}

.reading-section,
.keepsake-section,
.cast-section { background: transparent; }

.reading-section::before,
.keepsake-section::before,
.cast-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--night-wide-frame);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  border-radius: 18px;
}

.reading-section::before { background: linear-gradient(120deg, #eee8f4, #fbf0f4); }
.keepsake-section::before { background: #f4ebeb; }
.cast-section::before { background: #f2edf4; }

/* Keep the same sky around the book and footer; light book pages stay intact. */
#app.book-is-open,
footer { background: transparent; }

@media (max-width: 1100px) {
  :root { --night-frame-bleed: 12px; --night-wide-frame: calc(100% - 26px); }
}
@media (max-width: 800px) {
  :root { --night-frame-bleed: 10px; --night-wide-frame: calc(100% - 18px); }
}
@media (max-width: 520px) {
  :root { --night-frame-bleed: 8px; --night-wide-frame: calc(100% - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; opacity: .55; }
}