/*!
 * BappaScene — the picture, and what a tap does to a group.
 * https://bappatutions.in
 */

.bs-stage {
  width: 100%;
  aspect-ratio: 600 / 520;
  max-height: 58vh;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  border: 6px solid #8A5A2B;
  box-shadow: 0 10px 0 #6B4A22, 0 18px 26px rgb(0 0 0 / 0.3);
  touch-action: manipulation;
}

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

/* Invisible and generous. The child is choosing a branch, not aiming at a bird. */
.bs-hit { fill: transparent; pointer-events: all; }

.bs-group {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.bs-group:hover { filter: drop-shadow(0 0 8px rgb(255 255 255 / 0.9)); }

.bs-group.is-right {
  filter: drop-shadow(0 0 14px rgb(21 143 65 / 0.95));
  animation: bs-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.bs-group.is-wrong { animation: bs-wobble 0.4s; }

@keyframes bs-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes bs-wobble {
  20%  { transform: translateX(-8px); }
  60%  { transform: translateX(8px); }
  100% { transform: none; }
}

/* A gentle idle bob, so the birds look alive rather than pasted on. */
.bs-bird { animation: bs-bob 3.2s ease-in-out infinite; }
.bs-group:nth-child(odd) .bs-bird { animation-delay: 0.6s; }

@keyframes bs-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .bs-bird, .bs-group { animation: none; transition: none; }
}