/*!
 * BappaSay — the face, the spelling, and the button.
 * https://bappatutions.in
 */

/* ── the character, and how it is said ───────────────────────────────────── */
.bs-char {
  margin: 0;
  font-size: clamp(2.6rem, 12vw, 4.4rem);
  font-weight: 800; line-height: 1; letter-spacing: 0.08em;
  color: #2B2118;
  text-shadow: 0 4px 0 rgb(255 255 255 / 0.8), 0 8px 14px rgb(0 0 0 / 0.14);
}

/* "Bee", "Ay", "Ten" — the sound written in letters a child can hear. This is
   the thing being taught, so it is set larger than the label above it. */
.bs-sayas {
  display: inline-block;
  margin: 0.35rem 0 0.7rem;
  padding: 0.25rem 1.1rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.72);
  border: 3px solid rgb(21 143 65 / 0.28);
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  font-weight: 800; color: #158F41;
}

/* ── the face ────────────────────────────────────────────────────────────── */
/* The face is the drawing, not the box. No background and no clipping here —
   a rounded container behind the jaw would fill the corners with skin and hide
   the very curve that makes it read as a chin. The shadow is on the drawing
   for the same reason: it has to follow the jaw, not a rectangle. */
.bs-face {
  position: relative;
  margin: 0 auto;
  width: min(440px, 92vw);
}
.bs-face .bs-svg {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.22));
  transition: filter 0.25s ease;
}

/* A warm glow while the voice is talking, so it is obvious which thing on the
   screen is making the sound. */
.bs-face.is-speaking .bs-svg {
  filter: drop-shadow(0 0 10px rgb(255 153 51 / 0.9)) drop-shadow(0 10px 14px rgb(0 0 0 / 0.22));
}

.bs-mouth { transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
.bs-teeth, .bs-tongue { transition: opacity 0.18s linear; }

/* f and v: the lower lip rides up under the teeth.
   A big number for a small movement — this element sits inside the group that
   is squashed to a fifth of its height for this shape, so the shift is squashed
   with it and lands as about six units on screen. */
.bs-mouth.is-bite .bs-lips { transform: translateY(30px); }
.bs-lips { transition: transform 0.2s ease; }

/* ── the button ──────────────────────────────────────────────────────────── */
.bs-listen {
  display: block;
  margin: 1rem auto 0;
  padding: 0.85rem 2rem;
  border: 5px solid #fff;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFB24D, #FF8A1F);
  box-shadow: 0 7px 0 rgb(0 0 0 / 0.18), 0 14px 22px rgb(0 0 0 / 0.18);
  font: inherit;
  font-size: clamp(1.05rem, 4.4vw, 1.4rem); font-weight: 800; color: #fff;
  text-shadow: 0 2px 3px rgb(0 0 0 / 0.25);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.bs-listen:active { transform: translateY(5px); box-shadow: 0 2px 0 rgb(0 0 0 / 0.18); }

/* While it is talking the button holds still and dims — pressing again mid-word
   does nothing, and a button that still looks pressable is a button that lies. */
.bs-listen.is-speaking {
  filter: saturate(0.6) brightness(0.95);
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.18);
  cursor: default;
}

/* A ring that breathes, to say "this is the thing to press" without words —
   most of the children playing this cannot read the instruction above it. */
.bs-listen:not(.is-speaking) { animation: bs-beckon 2.4s ease-in-out infinite; }
@keyframes bs-beckon {
  0%, 100% { box-shadow: 0 7px 0 rgb(0 0 0 / 0.18), 0 14px 22px rgb(0 0 0 / 0.18); }
  50% { box-shadow: 0 7px 0 rgb(0 0 0 / 0.18), 0 0 0 10px rgb(255 153 51 / 0.22); }
}

@media (prefers-reduced-motion: reduce) {
  .bs-mouth, .bs-lips, .bs-teeth, .bs-tongue, .bs-listen, .bs-face .bs-svg { transition: none; }
  .bs-listen:not(.is-speaking) { animation: none; }
}