/* Ван alive (js/van.js): the v-* groups of each mascot.svg move. Idle he breathes, blinks and now and then flicks an
   ear, all small. data-mood plays a state: hello, happy, cheer, sad and the answer reactions once (Ван's own animation is
   the longest, its end returns him to idle), think and sleepy for as long as they are set. Sizes and frames stay with each page. */

.van { transform-origin: 50% 100%; }
.van .v-head, .van .v-ear, .van .v-eyes, .van .v-pupils, .van .v-joy, .van .v-brows, .van .v-mouth { transform-box: fill-box; }
.van .v-head { transform-origin: 50% 100%; animation: van-breathe 4.4s ease-in-out infinite; }
.van .v-eyes, .van .v-joy, .van .v-brows { transform-origin: 50% 50%; }
.van .v-eyes { animation: van-blink 5.8s 1.2s infinite; }
.van .v-ear-l { transform-origin: 80% 85%; animation: van-flick-l 11s 3s infinite; }
.van .v-ear-r { transform-origin: 20% 85%; animation: van-flick-r 11s 8.5s infinite; }
.van .v-mouth { transform-origin: 50% 0; }

@keyframes van-breathe { 50% { transform: scale(1.012, 1.02); } }
@keyframes van-blink { 0%, 93%, 97%, 100% { transform: none; } 95% { transform: scaleY(0.1); } }
@keyframes van-flick-l { 0%, 92%, 100% { transform: none; } 93.5% { transform: rotate(-16deg); } 95% { transform: rotate(5deg); } 96.5% { transform: none; } }
@keyframes van-flick-r { 0%, 92%, 100% { transform: none; } 93.5% { transform: rotate(16deg); } 95% { transform: rotate(-5deg); } 96.5% { transform: none; } }

/* joyful moods: the happy closed eyes (v-joy) instead of the open ones */
@keyframes van-joy { 0%, 100% { opacity: 0; } 10%, 82% { opacity: 1; } }
@keyframes van-unjoy { 0%, 100% { opacity: 1; } 10%, 82% { opacity: 0; } }
@keyframes van-smile { 0%, 100% { transform: none; } 15%, 80% { transform: scale(1.18, 1.25); } }
@keyframes van-perk-l { 0%, 100% { transform: none; } 20% { transform: rotate(-14deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } }
@keyframes van-perk-r { 0%, 100% { transform: none; } 20% { transform: rotate(14deg); } 40% { transform: rotate(-7deg); } 60% { transform: rotate(4deg); } }

/* hello: a hop with squash and stretch, the head tilts, ears perk; happy: a smaller hop; cheer: two big ones */
@keyframes van-hop {
  0%, 100% { transform: none; }
  14% { transform: scale(1.06, 0.92); }
  38% { transform: translateY(-14%) scale(0.96, 1.05); }
  60% { transform: translateY(0) scale(1.07, 0.92); }
  76% { transform: scale(0.98, 1.03); }
}
@keyframes van-bob {
  0%, 100% { transform: none; }
  20% { transform: scale(1.04, 0.95); }
  45% { transform: translateY(-8%) scale(0.98, 1.03); }
  70% { transform: translateY(0) scale(1.04, 0.96); }
}
@keyframes van-cheer {
  0%, 100% { transform: none; }
  9% { transform: scale(1.07, 0.9); }
  26% { transform: translateY(-22%) scale(0.94, 1.08) rotate(-5deg); }
  42% { transform: translateY(0) scale(1.08, 0.9); }
  56% { transform: translateY(-13%) scale(0.97, 1.05) rotate(4deg); }
  72% { transform: translateY(0) scale(1.05, 0.94); }
  86% { transform: scale(0.99, 1.02); }
}
@keyframes van-tilt { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-6deg); } }

.van[data-mood="hello"] { animation: van-hop 1.5s cubic-bezier(0.3, 0.7, 0.4, 1); }
.van[data-mood="hello"] .v-head { animation: van-tilt 1.4s ease-in-out; }
.van[data-mood="happy"] { animation: van-bob 1.4s ease-out; }
.van[data-mood="cheer"] { animation: van-cheer 1.6s cubic-bezier(0.3, 0.7, 0.4, 1); }
.van[data-mood="hello"] .v-eyes, .van[data-mood="happy"] .v-eyes { animation: van-unjoy 1.4s ease-out; }
.van[data-mood="hello"] .v-joy, .van[data-mood="happy"] .v-joy { animation: van-joy 1.4s ease-out; }
.van[data-mood="cheer"] .v-eyes { animation: van-unjoy 1.6s ease-out; }
.van[data-mood="cheer"] .v-joy { animation: van-joy 1.6s ease-out; }
.van[data-mood="hello"] .v-mouth, .van[data-mood="happy"] .v-mouth { animation: van-smile 1.4s ease-out; }
.van[data-mood="cheer"] .v-mouth { animation: van-smile 1.6s ease-out; }
.van[data-mood="hello"] .v-ear-l, .van[data-mood="cheer"] .v-ear-l { animation: van-perk-l 0.9s 0.35s ease-out; }
.van[data-mood="hello"] .v-ear-r, .van[data-mood="cheer"] .v-ear-r { animation: van-perk-r 0.9s 0.35s ease-out; }

/* sad (a mistake, a broken series): ears droop, the head dips and shakes a little, brows go up in the middle; kind, short */
@keyframes van-dip { 0%, 100% { transform: none; } 20%, 70% { transform: translateY(3%); } }
@keyframes van-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 35% { transform: rotate(3deg); } 50% { transform: rotate(-2deg); } 65% { transform: none; } }
@keyframes van-droop-l { 0%, 100% { transform: none; } 18%, 72% { transform: rotate(-26deg); } }
@keyframes van-droop-r { 0%, 100% { transform: none; } 18%, 72% { transform: rotate(26deg); } }
@keyframes van-worry { 0%, 100% { transform: none; } 18%, 72% { transform: translateY(-4px) scaleX(0.9); } }
@keyframes van-down { 0%, 100% { transform: none; } 18%, 72% { transform: translateY(1.5px); } }
.van[data-mood="sad"] { animation: van-dip 1.5s ease-in-out; }
.van[data-mood="sad"] .v-head { animation: van-shake 1.1s ease-in-out; }
.van[data-mood="sad"] .v-ear-l { animation: van-droop-l 1.5s ease-in-out; }
.van[data-mood="sad"] .v-ear-r { animation: van-droop-r 1.5s ease-in-out; }
.van[data-mood="sad"] .v-brows { animation: van-worry 1.5s ease-in-out; }
.van[data-mood="sad"] .v-pupils { animation: van-down 1.5s ease-in-out; }

/* answer reactions (study.js): nod, perk (3 in a row), flip (10, 20, 30), relief (right after a miss), cheerup (a miss:
   a moment of «ой», then a nod and a smile), look (a second miss in a row: tilts toward the options, eyes on the right one) */
@keyframes van-yes { 0%, 100% { transform: none; } 18% { transform: translateY(5%) scale(1.02, 0.96); } 36% { transform: none; } 54% { transform: translateY(5%) scale(1.02, 0.96); } 72% { transform: none; } }
@keyframes van-stretch { 0%, 100% { transform: none; } 25% { transform: scale(0.97, 1.05); } 55% { transform: scale(1.02, 0.98); } }
@keyframes van-brows-up { 0%, 100% { transform: none; } 18%, 70% { transform: translateY(-5px); } }
@keyframes van-grin { 0%, 100% { transform: none; } 15%, 80% { transform: scale(1.3, 1.35); } }
@keyframes van-flip { /* every frame names the same functions, so the turn goes one way round */
  0% { transform: translateY(0) rotate(0deg) scale(1, 1); }
  14% { transform: translateY(0) rotate(0deg) scale(1.07, 0.9); }
  34% { transform: translateY(-34%) rotate(-120deg) scale(0.95, 1.05); }
  54% { transform: translateY(-40%) rotate(-260deg) scale(1, 1); }
  74% { transform: translateY(0) rotate(-360deg) scale(1.08, 0.9); }
  88% { transform: translateY(0) rotate(-360deg) scale(0.99, 1.02); }
  100% { transform: translateY(0) rotate(-360deg) scale(1, 1); }
}
@keyframes van-oops { 0%, 100% { transform: none; } 14%, 34% { transform: translateY(3%); } 54% { transform: translateY(-4%) scale(0.98, 1.03); } 68% { transform: translateY(0) scale(1.03, 0.97); } 80% { transform: none; } }
@keyframes van-ear-l-up { 0%, 100% { transform: none; } 14%, 34% { transform: rotate(-24deg); } 54% { transform: rotate(10deg); } 68% { transform: rotate(-4deg); } 80% { transform: none; } }
@keyframes van-ear-r-up { 0%, 100% { transform: none; } 14%, 34% { transform: rotate(24deg); } 54% { transform: rotate(-10deg); } 68% { transform: rotate(4deg); } 80% { transform: none; } }
@keyframes van-worry-short { 0%, 44%, 100% { transform: none; } 12%, 34% { transform: translateY(-4px) scaleX(0.9); } }
@keyframes van-joy-late { 0%, 46%, 100% { opacity: 0; } 56%, 90% { opacity: 1; } }
@keyframes van-unjoy-late { 0%, 46%, 100% { opacity: 1; } 56%, 90% { opacity: 0; } }
@keyframes van-smile-late { 0%, 44%, 100% { transform: none; } 58%, 90% { transform: scale(1.2, 1.28); } }
@keyframes van-tilt-look { 0%, 100% { transform: none; } 16%, 58% { transform: rotate(-7deg); } 72% { transform: none; } }
@keyframes van-eyes-up { 0%, 100% { transform: none; } 16%, 58% { transform: translate(-4px, -3.5px); } 70% { transform: none; } }
@keyframes van-brows-lift { 0%, 100% { transform: none; } 16%, 58% { transform: translateY(-3px); } 70% { transform: none; } }
@keyframes van-nod-late { 0%, 66%, 100% { transform: none; } 76% { transform: translateY(2%); } 88% { transform: none; } }

.van[data-mood="nod"] { animation: van-yes 1.1s ease-in-out; }
.van[data-mood="nod"] .v-eyes, .van[data-mood="perk"] .v-eyes { animation: van-unjoy 1.1s ease-out; }
.van[data-mood="nod"] .v-joy, .van[data-mood="perk"] .v-joy { animation: van-joy 1.1s ease-out; }
.van[data-mood="nod"] .v-mouth { animation: van-smile 1.1s ease-out; }
.van[data-mood="perk"] { animation: van-stretch 1.1s ease-out; }
.van[data-mood="perk"] .v-ear-l { animation: van-perk-l 0.9s ease-out; }
.van[data-mood="perk"] .v-ear-r { animation: van-perk-r 0.9s ease-out; }
.van[data-mood="perk"] .v-brows { animation: van-brows-up 1.1s ease-out; }
.van[data-mood="perk"] .v-mouth { animation: van-grin 1.1s ease-out; }
.van[data-mood="flip"] { transform-origin: 50% 55%; animation: van-flip 1.3s cubic-bezier(0.3, 0.7, 0.4, 1); }
.van[data-mood="flip"] .v-eyes, .van[data-mood="relief"] .v-eyes { animation: van-unjoy 1.3s ease-out; }
.van[data-mood="flip"] .v-joy, .van[data-mood="relief"] .v-joy { animation: van-joy 1.3s ease-out; }
.van[data-mood="flip"] .v-mouth, .van[data-mood="relief"] .v-mouth { animation: van-grin 1.3s ease-out; }
.van[data-mood="relief"] { animation: van-hop 1.3s cubic-bezier(0.3, 0.7, 0.4, 1); }
.van[data-mood="relief"] .v-ear-l { animation: van-perk-l 0.9s 0.2s ease-out; }
.van[data-mood="relief"] .v-ear-r { animation: van-perk-r 0.9s 0.2s ease-out; }
.van[data-mood="cheerup"] { animation: van-oops 1.7s ease-in-out; }
.van[data-mood="cheerup"] .v-ear-l { animation: van-ear-l-up 1.7s ease-in-out; }
.van[data-mood="cheerup"] .v-ear-r { animation: van-ear-r-up 1.7s ease-in-out; }
.van[data-mood="cheerup"] .v-brows { animation: van-worry-short 1.7s ease-in-out; }
.van[data-mood="cheerup"] .v-eyes { animation: van-unjoy-late 1.7s ease-out; }
.van[data-mood="cheerup"] .v-joy { animation: van-joy-late 1.7s ease-out; }
.van[data-mood="cheerup"] .v-mouth { animation: van-smile-late 1.7s ease-out; }
.van[data-mood="look"] { animation: van-nod-late 1.6s ease-in-out; }
.van[data-mood="look"] .v-head { animation: van-tilt-look 1.6s ease-in-out; }
.van[data-mood="look"] .v-pupils { animation: van-eyes-up 1.6s ease-in-out; }
.van[data-mood="look"] .v-brows { animation: van-brows-lift 1.6s ease-in-out; }
.van[data-mood="look"] .v-mouth { animation: van-smile-late 1.6s ease-out; }

/* think (an AI check runs): the head rocks, the eyes look from side to side, a brow goes up */
@keyframes van-ponder { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes van-look { 0%, 12%, 100% { transform: translateX(-2.5px); } 38%, 62% { transform: translateX(2.5px); } 88% { transform: none; } }
@keyframes van-muse { 0%, 100% { transform: none; } 30%, 70% { transform: translateY(-4px); } }
.van[data-mood="think"] .v-head { animation: van-ponder 3.6s ease-in-out infinite; }
.van[data-mood="think"] .v-pupils { animation: van-look 3.6s ease-in-out infinite; }
.van[data-mood="think"] .v-brows { animation: van-muse 3.6s ease-in-out infinite; }

/* sleepy (the day is done): heavy eyelids that close and open again, a slow nod */
@keyframes van-doze { 0%, 100% { transform: scaleY(0.45); } 40%, 60% { transform: scaleY(0.12); } 75% { transform: scaleY(0.55); } }
@keyframes van-nod { 0%, 100% { transform: none; } 45%, 60% { transform: rotate(3deg) translateY(1%); } }
.van[data-mood="sleepy"] .v-eyes { transform-origin: 50% 80%; animation: van-doze 6s ease-in-out infinite; }
.van[data-mood="sleepy"] .v-head { animation: van-nod 6s ease-in-out infinite; }
.van[data-mood="sleepy"] .v-ear { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .van, .van * { animation: none !important; }
}