/* concepts/baby-zen/app/css/intro.css
   ---------------------------------------------------------------------------
   The first-run animation. JS advances `data-beat` on the layer; everything
   below is what each beat looks like. Nothing here animates a property that
   costs layout or paint — transforms and opacity only.
   --------------------------------------------------------------------------- */

.bz-intro {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.bz-intro[data-running] { opacity: 1; pointer-events: auto; }
.bz-intro.is-dissolving { opacity: 0; transition: opacity 700ms var(--ease); }

/* The main screen waits underneath, already laid out, so the landing has
   somewhere real to land. */
.bz-app[data-intro] .bz-main,
.bz-app[data-intro] .bz-scene { opacity: 0; }
.bz-main, .bz-scene { transition: opacity 620ms var(--ease); }

/* ── Layers ───────────────────────────────────────────────────────────────── */
.bz-intro-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 46% at 50% 40%, #0a1046 0%, rgba(10, 16, 70, 0) 72%),
    radial-gradient(120% 82% at 50% 46%, var(--bg-space-1) 0%, #01031c 62%, var(--bg-space-0) 100%);
  opacity: 0;
  transition: opacity 1200ms var(--ease);
}
.bz-intro[data-beat] .bz-intro-sky { opacity: 1; }

/* The warm wash that seeps in from the edges while the baby is crying. It is
   the only place in the app that leaves the cool palette, which is the point:
   the eye reads it as distress before the caption says so. */
.bz-intro-warm {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 42% at 0% 42%, rgba(244, 130, 106, 0.34) 0%, rgba(244, 130, 106, 0) 70%),
    radial-gradient(60% 42% at 100% 52%, rgba(250, 156, 92, 0.28) 0%, rgba(250, 156, 92, 0) 70%);
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.bz-intro[data-beat='3'] .bz-intro-warm,
.bz-intro[data-beat='4'] .bz-intro-warm { opacity: 1; }
.bz-intro[data-beat='still'] .bz-intro-warm { opacity: 1; }

.bz-intro-stage {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  transition: transform 1100ms var(--ease);
  will-change: transform;
}

/* ── The moon ─────────────────────────────────────────────────────────────── */
.bz-intro-moon {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1400ms var(--ease), transform 1600ms var(--ease);
}
.bz-intro[data-beat='2'] .bz-intro-moon,
.bz-intro[data-beat='3'] .bz-intro-moon,
.bz-intro[data-beat='4'] .bz-intro-moon,
.bz-intro[data-beat='5'] .bz-intro-moon,
.bz-intro[data-beat='6'] .bz-intro-moon,
.bz-intro[data-beat='7'] .bz-intro-moon,
.bz-intro[data-beat^='still'] .bz-intro-moon { opacity: 1; transform: scale(1); }

/* ── Waves ────────────────────────────────────────────────────────────────── */
.bz-intro-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.bz-intro-waves--jagged polyline {
  stroke: rgba(255, 168, 140, 0.75);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: bz-jitter 260ms steps(2, end) infinite alternate;
  animation-delay: calc(var(--i) * -70ms);
}
.bz-intro-waves--calm path {
  stroke: rgba(140, 190, 255, 0.42);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.bz-intro[data-beat='3'] .bz-intro-waves--jagged,
.bz-intro[data-beat='4'] .bz-intro-waves--jagged,
.bz-intro[data-beat='still'] .bz-intro-waves--jagged { opacity: 1; }

.bz-intro[data-beat='2'] .bz-intro-waves--calm,
.bz-intro[data-beat='5'] .bz-intro-waves--calm,
.bz-intro[data-beat='6'] .bz-intro-waves--calm,
.bz-intro[data-beat='7'] .bz-intro-waves--calm,
.bz-intro[data-beat='still-3'] .bz-intro-waves--calm { opacity: 1; }

@keyframes bz-jitter {
  from { transform: translate3d(0, -1px, 0) scaleY(1); }
  to   { transform: translate3d(0, 1px, 0) scaleY(1.035); }
}

/* ── The tap ──────────────────────────────────────────────────────────────── */
/* A fingertip arrives, the Zen ring materialises around it, and the ripple it
   leaves is what smooths the jagged waves in the next beat. */
.bz-intro-tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 226, 255, 0.9) 0%, rgba(120, 190, 255, 0) 68%);
  box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.5), var(--glow-ring);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 420ms var(--ease), transform 520ms var(--ease);
}
.bz-intro[data-beat='4'] .bz-intro-tap,
.bz-intro[data-beat='still-2'] .bz-intro-tap { opacity: 1; transform: scale(1); }

.bz-intro-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(150, 215, 255, 0.6);
  opacity: 0;
}
.bz-intro[data-beat='4'] .bz-intro-ripple { animation: bz-intro-ripple 1400ms var(--ease) 300ms 1 forwards; }

@keyframes bz-intro-ripple {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(9); }
}

/* ── Captions ─────────────────────────────────────────────────────────────── */
.bz-intro-caption {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 22%;
  text-align: center;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.bz-intro[data-beat='3'] [data-line='1'],
.bz-intro[data-beat='4'] [data-line='1'],
.bz-intro[data-beat='still'] [data-line='1'],
.bz-intro[data-beat='5'] [data-line='2'],
.bz-intro[data-beat='still-3'] [data-line='2'] { opacity: 1; transform: none; }

/* ── Skip ─────────────────────────────────────────────────────────────────── */
.bz-intro-skip {
  position: absolute;
  right: 18px;
  bottom: calc(max(var(--safe-bottom), 20px) + 10px);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(126, 140, 224, 0.12);
  border: 1px solid var(--stroke-soft);
  color: var(--ink-dim);
  font-size: 14px;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
/* Only from two seconds in, so it never competes with the opening. */
.bz-intro[data-beat='3'] .bz-intro-skip,
.bz-intro[data-beat='4'] .bz-intro-skip,
.bz-intro[data-beat='5'] .bz-intro-skip,
.bz-intro[data-beat^='still'] .bz-intro-skip { opacity: 1; }
.bz-intro[data-beat='6'] .bz-intro-skip,
.bz-intro[data-beat='7'] .bz-intro-skip { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .bz-intro-waves--jagged polyline { animation: none; }
  .bz-intro-stage { transition-duration: 1ms; }
}