/* concepts/baby-zen/app/css/base.css
   ---------------------------------------------------------------------------
   Reset, the app frame, and the two things every screen shares: the safe-area
   padding and the stacking order of the layers.

   The app is a fixed, non-scrolling 100dvh frame. Sheets scroll internally;
   the page behind them never does. That is what makes it feel native rather
   than like a web page with a modal on top.
   --------------------------------------------------------------------------- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg-space-0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.bz-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── The frame ──────────────────────────────────────────────────────────────
   Layer order, back to front: scene → main screen → sheets → intro. Each layer
   owns its own stylesheet; base.css only decides where they sit. */
.bz-app {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.bz-scene   { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bz-main    { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; }
.bz-sheets  { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bz-intro   { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* A sheet being open claims pointer events for its own layer only. */
.bz-sheets[data-open] { pointer-events: auto; }
.bz-intro[data-running] { pointer-events: auto; }

/* What sits behind a sheet is not the same in the two fasit images, and the
   difference is deliberate. Sound.png keeps the hero visible behind the Music
   sheet, just quieter — you are choosing a sound for *that* moon. Settings.png
   shows a night nursery instead, with no app chrome at all. So Music dims the
   main screen and Settings replaces it. */
.bz-app[data-sheet] .bz-main {
  filter: brightness(0.62);
}
.bz-app[data-sheet='music'] .bz-main {
  filter: brightness(0.88);
}
.bz-app[data-sheet='settings'] .bz-main {
  opacity: 0;
  pointer-events: none;
}
.bz-main {
  transition: filter var(--dur-sheet) var(--ease), opacity var(--dur-sheet) var(--ease);
}