/* Live audience tiles — reaction animations for the interactive room.
   Pure CSS keyframes, no JS animation library, no build step. lib/audience.js
   toggles the react-* / speaking / ambient classes; the motion lives here. */

.aud-tile {
  position: relative;
  width: 9.5rem;
  border: 2px solid #525248;          /* pond-500 */
  border-radius: 1rem;
  background: #1A1A14;                 /* pond-700 */
  padding: 1rem 0.75rem;
  text-align: center;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.65);  /* floats above the pond ambient */
  transition: transform .35s ease, opacity .35s ease,
              border-color .35s ease, box-shadow .35s ease;
}
.aud-face { font-size: 2.5rem; line-height: 1; }
.aud-face img {
  width: 4rem; height: 4rem;
  margin: 0 auto;
  border-radius: 9999px;
  background: #26261E;                 /* warm circle behind the sketch */
  box-shadow: inset 0 0 0 1px #33332A;
}
.aud-name { color: #fff; font-weight: 600; font-size: .9rem; margin-top: .35rem; }
.aud-role { color: #A3A39A; font-size: .72rem; }

/* Reaction badge — shows ✋ / 📱 in the corner for those two reactions. */
.aud-badge {
  position: absolute;
  top: -.55rem; right: -.55rem;
  width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  border-radius: 9999px;
  background: #0A0A06;
  border: 1px solid #525248;
  opacity: 0; transform: scale(.5);
  transition: opacity .25s ease, transform .25s ease;
}
.aud-tile.react-raise_hand  .aud-badge,
.aud-tile.react-check_phone .aud-badge { opacity: 1; transform: scale(1); }
.aud-tile.react-raise_hand  .aud-badge::before { content: '✋'; }
.aud-tile.react-check_phone .aud-badge::before { content: '📱'; }

/* ── Reactions ───────────────────────────────────────────────────── */

/* nod — a couple of agreeable vertical bobs */
@keyframes audNod {
  0%,100% { transform: translateY(0); }
  25%     { transform: translateY(5px); }
  60%     { transform: translateY(2px); }
}
.aud-tile.react-nod { animation: audNod 1s ease-in-out 2; border-color: #6Fae6f; }

/* lean_in — engaged: scales up and holds, warm border */
.aud-tile.react-lean_in {
  transform: scale(1.07) translateY(-3px);
  border-color: #FF8F4A;               /* koi-400 */
}

/* frown — unconvinced: a small disapproving tilt-shake, cool border */
@keyframes audFrown {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(-2.5deg); }
  75%     { transform: rotate(2.5deg); }
}
.aud-tile.react-frown {
  animation: audFrown .5s ease-in-out 2;
  border-color: #7C8BA1;
  filter: saturate(.65);
}

/* raise_hand — about to ask: an attention-grabbing bob */
@keyframes audRaise {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}
.aud-tile.react-raise_hand {
  animation: audRaise .9s ease-in-out infinite;
  border-color: #FF6B1E;               /* koi-500 */
}

/* check_phone — bored: dims out and shrinks slightly */
.aud-tile.react-check_phone {
  opacity: .5;
  transform: scale(.96);
  filter: grayscale(.5);
}

/* ── Active speaker ──────────────────────────────────────────────── */
@keyframes audSpeak {
  0%,100% { box-shadow: 0 0 0 0   rgba(255,107,30,.5); }
  50%     { box-shadow: 0 0 0 16px rgba(255,107,30,0); }
}
.aud-tile.speaking {
  border-color: #FF6B1E;
  animation: audSpeak 1.6s ease-out infinite;
}

/* ── Ambient idle micro-motion ───────────────────────────────────── */
@keyframes audAmbient {
  0%,100% { transform: translateY(0)   scale(1); }
  50%     { transform: translateY(-2px) scale(1.015); }
}
.aud-tile.ambient { animation: audAmbient .7s ease-in-out; }