/* concepts/baby-zen/app/css/scene.css
   ---------------------------------------------------------------------------
   The backdrop. Never a flat colour (DESIGN-SPEC kap. 1.1): always star field,
   aurora veils and a vignette on top of the gradient.

   The whole layer dims through one custom property, --scene-dim, so the night
   mode in an active session is a single number rather than a set of rules.
   --------------------------------------------------------------------------- */

.bz-scene {
  --scene-dim: 0;
  background: var(--bg-space-0);
}

.bz-scene > * {
  position: absolute;
  inset: 0;
  transition: opacity var(--dur-sheet) var(--ease);
}

/* The sky itself: a lift towards the hero, falling away to near black at the
   corners. Sampled values, not a guess — see dev/MALINGER.md. */
.bz-sky {
  background:
    radial-gradient(78% 38% at 50% 30%, #0a1046 0%, rgba(10, 16, 70, 0) 70%),
    radial-gradient(120% 80% at 50% 46%, var(--bg-space-1) 0%, #01031c 62%, var(--bg-space-0) 100%);
}

.bz-stars {
  width: 100%;
  height: 100%;
  opacity: calc(0.92 - 0.5 * var(--scene-dim));
}

/* Seven stars that breathe, on top of the static field. Cheap, and it stops
   the sky reading as a printed backdrop. */
.bz-twinkle i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f4f6ff;
  box-shadow: 0 0 6px rgba(220, 230, 255, 0.9);
  opacity: 0.25;
  animation: bz-twinkle 5.5s var(--ease) infinite;
  animation-delay: calc(var(--i) * -0.83s);
}
.bz-twinkle i:nth-child(1) { top: 9%;  left: 16%; }
.bz-twinkle i:nth-child(2) { top: 6%;  left: 74%; }
.bz-twinkle i:nth-child(3) { top: 21%; left: 88%; }
.bz-twinkle i:nth-child(4) { top: 34%; left: 7%;  }
.bz-twinkle i:nth-child(5) { top: 57%; left: 92%; }
.bz-twinkle i:nth-child(6) { top: 70%; left: 11%; }
.bz-twinkle i:nth-child(7) { top: 15%; left: 43%; }

@keyframes bz-twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.8); }
  50%      { opacity: 0.95; transform: scale(1.25); }
}

/* Two aurora veils, teal on the left and violet on the right, sitting behind
   the hero at about a tenth opacity. In the fasit they read as a wash rather
   than as shapes, so they are heavily blurred and never animate quickly. */
.bz-aurora {
  filter: blur(48px);
  opacity: calc(0.8 - 0.4 * var(--scene-dim));
  animation: bz-drift 26s ease-in-out infinite alternate;
}
/* Sampled positions, not composed ones: the teal veil's core sits at about
   (25, 169) on a 390 x 844 screen and the violet's at (362, 228) — both level
   with the hero, not below it. An earlier version had them a third of a screen
   too low, which left the moon sitting in a black hole and put a wash under
   the bottom cards where the fasit has none. */
.bz-aurora--teal {
  background: radial-gradient(44% 20% at 5% 21%, #0f74c0 0%,
    rgba(0, 56, 110, 0.5) 42%, rgba(0, 56, 110, 0) 76%);
}
.bz-aurora--violet {
  background: radial-gradient(50% 26% at 97% 29%, #5f27b3 0%,
    rgba(45, 17, 98, 0.55) 42%, rgba(45, 17, 98, 0) 76%);
  animation-delay: -13s;
}

@keyframes bz-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -14px, 0) scale(1.06); }
}

/* Darkening at the edges, so the composition holds the eye in the middle. */
.bz-vignette {
  background: radial-gradient(112% 74% at 50% 44%, rgba(0, 0, 0, 0) 52%, rgba(0, 1, 12, 0.75) 100%);
}

/* ── Nursery variant ────────────────────────────────────────────────────────
   Only the top third is ever uncovered by the Settings sheet, and the fasit
   shows it soft and out of focus behind the glass. */
.bz-nursery {
  opacity: 0;
  pointer-events: none;
}
.bz-nursery svg {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 300;
  /* The fasit is shot with a shallow depth of field: soft, but the cot and the
     crescent still read as objects. Much past 1.5 px and they turn into a
     smudge, which is what the first attempt looked like. */
  filter: blur(1.3px);
  /* Settings.png is a photo of a phone whose screen aspect is 0.431 rather
     than 0.462, so normalising it stretches the mockup about 7 % vertically
     (deviation A8). At the height of the crescent that is roughly eight
     points, and this is a backdrop, not a control — matching what the eye
     sees is worth more here than matching a coordinate. */
  transform: translate3d(0, 8px, 0);
}
.bz-scene[data-variant='nursery'] .bz-nursery { opacity: 1; }
.bz-scene[data-variant='nursery'] .bz-aurora  { opacity: 0.25; }
.bz-scene[data-variant='nursery'] .bz-stars   { opacity: 0.35; }
/* The space vignette is tuned for the main screen, where the hero sits in the
   middle and the corners should fall away. Over the nursery it just eats the
   moon, so it steps back. */
.bz-scene[data-variant='nursery'] .bz-vignette { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .bz-twinkle i, .bz-aurora { animation: none; }
}