/* readalong (round 4): the child reads the words themselves. Silent reading finger (drag along the words:
   the word under the finger lights up), page-finished sparkle. No story audio. */

/* words on the child's card */
.ra-w { display: inline-block; position: relative; padding: 0 .07em; margin: 0 -.03em; border-radius: .22em; transform-origin: 50% 70%;
  transition: background-color .14s ease, box-shadow .14s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.bk-card { position: relative; touch-action: none; }
.bk-card-text { line-height: 1.36; }
.ra-w.said { box-shadow: inset 0 -.09em 0 rgba(0, 194, 129, .55); }
.ra-w.lit { background: #FFD84D; box-shadow: 0 .07em 0 #F2B233; transform: scale(1.12); z-index: 1; }
.bk-card.read { box-shadow: 0 6px 0 rgba(0, 194, 129, .45), 0 0 0 5px rgba(0, 219, 146, .35); }

/* reading finger: rests under the first word, follows the drag */
.ra-finger { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; transform: translate(-50%, 2px); opacity: .55;
  transition: left .12s ease-out, top .12s ease-out, opacity .2s; animation: raBob 1.6s ease-in-out infinite; }
.ra-finger svg { display: block; filter: drop-shadow(0 4px 0 rgba(34, 23, 80, .15)); }
.ra-finger.active { opacity: 1; animation: none; }
@keyframes raBob { 0%, 100% { margin-top: 0; } 50% { margin-top: 8px; } }

/* page-finished sparkle */
.ra-sparkle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 4; }
.ra-sparkle i { position: absolute; left: 0; top: 0; display: block; }
.ra-sparkle svg { display: block; }