/*!
 * BappaFace — the face, and what a tap does to it. https://bappatutions.in
 */

.bf-stage {
  width: min(100%, 460px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  max-height: 58vh;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 25%, #FFF7E4 0%, #FFE9BE 60%, #FFD98F 100%);
  box-shadow: inset 0 -8px 18px rgb(0 0 0 / 0.06), 0 8px 22px rgb(0 0 0 / 0.12);
  border: 5px solid #fff;
  overflow: hidden;
  /* Fingers land on parts of a face; the page must not slide underneath. */
  touch-action: manipulation;
}

.bf-stage svg { display: block; width: 100%; height: 100%; }

/* Invisible, generous, and the only thing that receives a tap. */
.bf-hit {
  fill: transparent;
  cursor: pointer;
  /* Safari will not deliver a click to a transparent SVG shape without this. */
  pointer-events: all;
}

/* Every drawn part ignores pointers, so a tap always resolves to a target
   above rather than to whichever shape happens to be on top. */
.bf-part, .bf-head, .bf-hair, .bf-tally { pointer-events: none; }

.bf-part {
  transition: transform 0.18s ease, filter 0.18s ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* Found: it lifts slightly and glows, so the child sees which ones they have
   already counted without the shape changing into something else. */
.bf-part.is-found {
  filter: drop-shadow(0 0 10px rgb(21 143 65 / 0.85));
  transform: scale(1.08);
}

.bf-tally { animation: bf-pop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes bf-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bf-part { transition: none; }
  .bf-tally { animation: none; }
}