/* src/components/jr/cheer/cheer.css — the three classes her SJCheer sets inline.
   Everything that MOVES is in cheer.js (Web Animations API, so there is no keyframe to ship
   and nothing a re-render can restart halfway through). What is here is only where the
   particles sit and how the praise word is set. */

/* The throwaway layer. It is inside the screen, so a burst is clipped by the tablet frame
   rather than by the browser window. */
.jr-cheer-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* One particle: a star or a scrap of paper. Position and size are per particle, set in JS. */
.jr-cheer-bit {
  position: absolute;
  display: block;
}

/* Her praise word, over the thing that was just answered. */
.jr-cheer-word {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -.02em;
  color: var(--sj-green-ink);
  text-shadow: 0 2px 0 var(--sj-card), 0 6px 18px rgba(22, 33, 28, .22);
}

.jr-cheer-word-big { font-size: 66px; }