/* ============================================================
   Level 1 — screen composition & success sequence.

   PLACEMENT LAW: the button IS the anchor of the game. The
   button slot is centered in the play stage and the bubble is
   positioned as an offset FROM the button — the button lands at
   the exact same viewport position as on the home screen.
   ============================================================ */

/* Anchor container: centers its lone in-flow child (the button). */
.level1 {
  position: relative;
  display: grid;
  place-items: center;
}

.level1__button-slot {
  position: relative; /* anchors the celebration burst to the button */
}

.level1__button-slot .celebration-burst {
  inset: 0;
}

/* The bubble anchor + hover excitement live with the SpeechBubble
   component (css) so every screen shares them. */

/* Bubble transitions (bows out on success, pops back after reset) */
.bubble-pop-enter-active,
.bubble-pop-leave-active {
  transition: opacity 240ms ease, transform 300ms var(--ease-bounce);
}
.bubble-pop-enter-from,
.bubble-pop-leave-to {
  opacity: 0;
  transform: translateY(0.6em) scale(0.75);
}

/* ---- Very subtle screen feedback on press --------------------------- */
/* (The warm screen-flash lives in css/base.css — shared by all screens.) */

/* Play area gives the tiniest appreciative nod */
.level1-screen.is-hit .game-area__stage {
  animation: stage-nod 220ms ease-out both;
}

@keyframes stage-nod {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* ---- Success: stage bows out, completion panel takes over ----------- */

.level1-screen.is-leaving .game-area__stage {
  animation: stage-leave 500ms ease-in both;
}

.level1-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vmin, 32px);
}

@keyframes stage-leave {
  to {
    opacity: 0;
    transform: scale(0.985);
  }
}