/* Levoop mascots (Finn and Loop): animations.
   Individual transform properties (translate/scale/rotate) are used so these
   animations never clash with any transform a layout already applies. */
@keyframes m-enter { 0% { opacity: 0; translate: 0 26px; scale: .85 } 60% { opacity: 1; translate: 0 -6px; scale: 1.03 } 100% { translate: 0 0; scale: 1 } }
@keyframes m-float { 0%, 100% { translate: 0 0 } 50% { translate: 0 -8px } }
@keyframes m-hop { 0%, 100% { translate: 0 0; rotate: 0deg } 30% { translate: 0 -22px; rotate: -4deg } 55% { translate: 0 0; rotate: 0deg } 72% { translate: 0 -8px; rotate: 2deg } }
@keyframes m-pop { 0% { opacity: 0; scale: .4; rotate: -10deg } 70% { opacity: 1; scale: 1.12; rotate: 2deg } 100% { scale: 1; rotate: 0deg } }
@keyframes m-wobble { 0%, 100% { rotate: 0deg } 20% { rotate: -9deg } 40% { rotate: 7deg } 60% { rotate: -4deg } 80% { rotate: 2deg } }
@keyframes m-bubble { 0% { opacity: 0; scale: .8 } 100% { opacity: 1; scale: 1 } }
@keyframes m-confetti {
  0% { opacity: 1; translate: 0 0; rotate: 0deg }
  45% { opacity: 1; translate: var(--x) var(--y) }
  100% { opacity: 0; translate: calc(var(--x) * 1.25) calc(var(--y) + 190px); rotate: var(--r) }
}

/* Section pages */
.hub-mascot { transform-origin: 50% 100%; cursor: pointer; animation: m-enter .75s ease-out both, m-float 4.5s ease-in-out 1s infinite }

/* Home page hero: enters with a bounce, then floats gently. Tap to make it jump. */
.mascot-img { transform-origin: 50% 100%; cursor: pointer; animation: m-enter .75s ease-out both, m-float 4s ease-in-out .9s infinite }
.mascot-bubble { transform-origin: 30% 100%; animation: m-bubble .45s cubic-bezier(.3, 1.5, .5, 1) .55s both }
.mascot-img.ready { animation: m-float 4s ease-in-out infinite }
.hub-mascot.ready { animation: m-float 4.5s ease-in-out infinite }
.mascot-img.hop, .hub-mascot.hop, .card-mascot.hop { animation: m-hop .7s ease-out }

/* Home loop cards: a little hop on hover */
.card-mascot { transform-origin: 50% 100%; cursor: pointer }
@media (hover: hover) { .card:hover .card-mascot { animation: m-hop .7s ease-out } }


/* Practice: reaction after each answer and at the final score */
.fb-mascot { transform-origin: 50% 100% }
.fb-mascot.pop.cheer { animation: m-pop .5s cubic-bezier(.3, 1.6, .5, 1) both, m-hop .7s ease-out .5s }
.fb-mascot.pop.wobble { animation: m-pop .5s cubic-bezier(.3, 1.6, .5, 1) both, m-wobble .8s ease-in-out .45s }
.score { position: relative }
.score-mascot { transform-origin: 50% 100% }
.score-mascot.celebrate { animation: m-pop .6s cubic-bezier(.3, 1.6, .5, 1) both, m-hop .75s ease-out .6s 2 }
.confetti { position: absolute; left: 50%; top: 80px; width: 0; height: 0; pointer-events: none; z-index: 5 }
.confetti i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: m-confetti 1.5s cubic-bezier(.2, .7, .4, 1) forwards }

/* People who ask their device for less motion get still mascots. */
@media (prefers-reduced-motion: reduce) {
  .mascot-img, .mascot-bubble, .card-mascot, .hub-mascot, .fb-mascot, .score-mascot, .confetti i { animation: none !important }
}