/* Lyrics word animations (separate from the lyrics "style" menu).
   Add to index.html AFTER /lyrics-styles.css:
     <link rel="stylesheet" href="/lyrics-animations.css">
   and add this after the app.js line:
     <script src="/lyrics-animations.js" defer></script>                      */

/* ---------- header button and menu ----------
   The sparkle button is sized and coloured by the same rule as the gear and close buttons
   (.lyrics-drawer .drawer-head button in lyrics-styles.css), and the menu is the same
   .lyrics-style-menu box, so they match automatically. Only small extras are needed here. */
#lyrics-anim svg{display:block}
#lyrics-anim-menu .lyrics-anim-note{font-size:11px;line-height:1.5;color:#8f8994;margin:12px 2px 2px}

/* ---------- animated words ---------- */
.lyrics-body .lw{display:inline-block;white-space:pre-wrap}

@keyframes lyr-bounce{0%{opacity:0;transform:translateY(-.9em)}45%{opacity:1;transform:translateY(.22em)}65%{transform:translateY(-.12em)}82%{transform:translateY(.05em)}}
@keyframes lyr-bounce-line{0%{opacity:0;transform:translateY(-.5em)}45%{opacity:1;transform:translateY(.1em)}70%{transform:translateY(-.04em)}}
@keyframes lyr-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.18)}80%{transform:scale(.96)}}
@keyframes lyr-pop-line{0%{opacity:0;transform:scale(.88)}60%{opacity:1;transform:scale(1.04)}80%{transform:scale(.99)}}
@keyframes lyr-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-.22em)}}
@keyframes lyr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.1em)}}
@keyframes lyr-slideup{0%{opacity:0;transform:translateY(1.1em)}}
@keyframes lyr-slidein{0%{opacity:0;transform:translateX(-1.4em)}}
@keyframes lyr-fade{0%{opacity:0}}
@keyframes lyr-glow{0%,100%{filter:drop-shadow(0 0 0 #e9a38100)}50%{filter:drop-shadow(0 0 .35em #e9a381bb)}}
@keyframes lyr-wobble{0%{transform:rotate(0)}15%{transform:rotate(-3.5deg)}30%{transform:rotate(3deg)}45%{transform:rotate(-2deg)}60%{transform:rotate(1.2deg)}75%{transform:rotate(-.6deg)}}
@keyframes lyr-flip{0%{opacity:0;transform:perspective(500px) rotateX(-85deg)}60%{opacity:1;transform:perspective(500px) rotateX(12deg)}}
@keyframes lyr-focusin{0%{opacity:0;filter:blur(.45em);transform:scale(1.06)}}

/* Per-word animations: bounce, pop, wave (words are split by lyrics-animations.js).
   In Karaoke Fill and Typewriter Reveal the whole line moves instead. */
.lyrics-anim-bounce .lyric-line.active.has-words .lw,
.lyrics-anim-bounce .lyrics-stage-current.has-words .lw{animation:lyr-bounce .7s cubic-bezier(.3,.7,.4,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
.lyrics-anim-bounce .lyric-line.active:not(.has-words),
.lyrics-anim-bounce .lyrics-stage-current:not(.has-words){animation:lyr-bounce-line .7s cubic-bezier(.3,.7,.4,1) backwards}

.lyrics-anim-pop .lyric-line.active.has-words .lw,
.lyrics-anim-pop .lyrics-stage-current.has-words .lw{animation:lyr-pop .5s cubic-bezier(.3,.8,.4,1.2) backwards;animation-delay:calc(var(--i,0)*60ms)}
.lyrics-anim-pop .lyric-line.active:not(.has-words),
.lyrics-anim-pop .lyrics-stage-current:not(.has-words){animation:lyr-pop-line .5s cubic-bezier(.3,.8,.4,1.2) backwards}

.lyrics-anim-wave .lyric-line.active.has-words .lw,
.lyrics-anim-wave .lyrics-stage-current.has-words .lw{animation:lyr-wave 1.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*120ms)}
.lyrics-anim-wave .lyric-line.active:not(.has-words),
.lyrics-anim-wave .lyrics-stage-current:not(.has-words){animation:lyr-float 2.4s ease-in-out infinite}

/* Whole-line animations */
.lyrics-anim-slideup .lyric-line.active,.lyrics-anim-slideup .lyrics-stage-current{animation:lyr-slideup .5s cubic-bezier(.2,.8,.3,1) backwards}
.lyrics-anim-slidein .lyric-line.active,.lyrics-anim-slidein .lyrics-stage-current{animation:lyr-slidein .5s cubic-bezier(.2,.8,.3,1) backwards}
.lyrics-anim-fade .lyric-line.active,.lyrics-anim-fade .lyrics-stage-current{animation:lyr-fade .7s ease-out backwards}
.lyrics-anim-glow .lyric-line.active,.lyrics-anim-glow .lyrics-stage-current{animation:lyr-glow 1.8s ease-in-out infinite}
.lyrics-anim-wobble .lyric-line.active,.lyrics-anim-wobble .lyrics-stage-current{animation:lyr-wobble .8s ease-out backwards}
.lyrics-anim-flip .lyric-line.active,.lyrics-anim-flip .lyrics-stage-current{animation:lyr-flip .6s cubic-bezier(.2,.8,.3,1) backwards}
.lyrics-anim-focusin .lyric-line.active,.lyrics-anim-focusin .lyrics-stage-current{animation:lyr-focusin .7s ease-out backwards}

/* Anyone who asks their device to reduce motion gets no animation */
@media (prefers-reduced-motion:reduce){
  .lyrics-body[class*="lyrics-anim-"] .lyric-line.active,
  .lyrics-body[class*="lyrics-anim-"] .lyrics-stage-current,
  .lyrics-body[class*="lyrics-anim-"] .lw{animation:none!important}
}