/* Сёма: цвета, части и настроения.
   Все движения на transform и opacity, чтобы не дёргать раскладку. */

.mascot { position: relative; width: 120px; aspect-ratio: 200 / 228; flex: none; }
.mascot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.mascot * { transform-box: fill-box; }

/* Цвета A7: глянцевый синий кубик, белые перчатки, оранжевое звено цепи */
.m-shadow { fill: rgba(30, 53, 129, .16); transform-origin: center; }
.m-foot { fill: #14245C; }
.m-arm rect { fill: #1E3581; }
.m-arm circle { fill: url(#m-g-hand); stroke: #C9D1E3; stroke-width: 1.5; }
.m-arm-l { transform-origin: 88% 50%; transform: rotate(-32deg); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.m-arm-r { transform-origin: 12% 50%; transform: rotate(32deg); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.m-front { fill: url(#m-g-front); stroke: url(#m-g-front); }
.m-top { fill: url(#m-g-top); stroke: url(#m-g-top); }
.m-side { fill: url(#m-g-side); stroke: url(#m-g-side); }
.m-shine { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 6; stroke-linecap: round; }
.m-link rect { fill: none; stroke: #FF3801; stroke-width: 6.5; }
.m-link { transform-origin: 50% 100%; }
.m-cheek { fill: #FF6A3D; opacity: .55; }
.m-white { fill: #fff; }
.m-pupil circle { fill: #0E1B4C; }
.m-pupil .m-glint { fill: #fff; }
.m-eye { transform-origin: center; }
.m-eyes-joy path, .m-brow, .m-mouth-smile, .m-mouth-sad {
  fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round;
}
.m-mouth-hole { fill: #0B1540; }
.m-tongue { fill: #FF6A3D; }
.m-mouth-o { fill: #0B1540; }
.m-body, .m-rig { transform-origin: 50% 100%; }
.mascot.no-podium .m-podium { display: none; }

/* По умолчанию: улыбка, обычные глаза, без бровей */
.m-eyes-joy, .m-brows, .m-mouth-open, .m-mouth-sad, .m-mouth-o { opacity: 0; }

/* ── Покой: дыхание и моргание ─────────────────── */
.mascot[data-mood] .m-body { animation: m-breathe 2.6s ease-in-out infinite; }
.mascot[data-mood] .m-eye { animation: m-blink 4.2s infinite; }
.mascot[data-mood] .m-link { animation: m-sway 3.4s ease-in-out infinite; }

@keyframes m-breathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-3px) scale(1.012, .988); }
}
@keyframes m-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(.08); }
}
@keyframes m-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

/* ── Радость: подпрыгнул, рот открыт, глаза дугами ─ */
.mascot[data-mood="happy"] .m-rig { animation: m-hop .62s cubic-bezier(.22, 1, .36, 1) 1; }
.mascot[data-mood="happy"] .m-shadow { animation: m-shadow-hop .62s ease 1; }
.mascot[data-mood="happy"] .m-mouth-smile { opacity: 0; }
.mascot[data-mood="happy"] .m-mouth-open { opacity: 1; }
.mascot[data-mood="happy"] .m-eyes { opacity: 0; }
.mascot[data-mood="happy"] .m-eyes-joy { opacity: 1; }
.mascot[data-mood="happy"] .m-arm-l { animation: m-arm-up-l .5s ease-out forwards; }
.mascot[data-mood="happy"] .m-arm-r { animation: m-arm-up-r .5s ease-out forwards; }

@keyframes m-hop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(2px) scale(1.08, .9); }
  45% { transform: translateY(-26px) scale(.95, 1.06); }
  75% { transform: translateY(0) scale(1.06, .94); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes m-shadow-hop {
  45% { transform: scale(.7); opacity: .5; }
}
@keyframes m-arm-up-l { to { transform: rotate(38deg); } }
@keyframes m-arm-up-r { to { transform: rotate(-38deg); } }

/* ── Грусть: осел, брови домиком, взгляд вниз ───── */
.mascot[data-mood="sad"] .m-rig { animation: m-slump .5s ease-out forwards; }
.mascot[data-mood="sad"] .m-mouth-smile { opacity: 0; }
.mascot[data-mood="sad"] .m-mouth-sad { opacity: 1; }
.mascot[data-mood="sad"] .m-brows { opacity: 1; }
.mascot[data-mood="sad"] .m-brow-l { transform: rotate(-14deg) translateY(2px); transform-origin: 100% 50%; }
.mascot[data-mood="sad"] .m-brow-r { transform: rotate(14deg) translateY(2px); transform-origin: 0% 50%; }
.mascot[data-mood="sad"] .m-pupil { transform: translate(-2px, 5px); }
.mascot[data-mood="sad"] .m-cheek { opacity: .35; }
.mascot[data-mood="sad"] .m-arm-l { transform: rotate(-24deg); }
.mascot[data-mood="sad"] .m-arm-r { transform: rotate(24deg); }
.mascot[data-mood="sad"] .m-link { animation: none; transform: rotate(-22deg); }

@keyframes m-slump {
  0% { transform: translateY(0) scale(1, 1); }
  40% { transform: translateY(3px) scale(1.05, .93); }
  100% { transform: translateY(2px) scale(1.02, .97); }
}

/* ── Раздумье: глаза вверх, бровь поднята, рука у рта ─ */
.mascot[data-mood="think"] .m-pupil { transform: translate(-4px, -7px); transition: transform .3s ease; }
.mascot[data-mood="think"] .m-brows { opacity: 1; }
.mascot[data-mood="think"] .m-brow-r { transform: translateY(-6px) rotate(-8deg); }
.mascot[data-mood="think"] .m-mouth-smile { opacity: 0; }
.mascot[data-mood="think"] .m-mouth-o { opacity: 1; transform: scale(.7); transform-origin: center; }
.mascot[data-mood="think"] .m-arm-r { animation: m-chin .45s ease-out forwards; }
.mascot[data-mood="think"] .m-rig { animation: m-tilt 3s ease-in-out infinite; }

@keyframes m-chin { to { transform: rotate(-120deg) translateX(-4px); } }
@keyframes m-tilt {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* ── Привет: машет правой рукой ───────────────── */
.mascot[data-mood="wave"] .m-arm-r { animation: m-wave 1.1s ease-in-out infinite; }
.mascot[data-mood="wave"] .m-mouth-smile { opacity: 0; }
.mascot[data-mood="wave"] .m-mouth-open { opacity: 1; }

@keyframes m-wave {
  0%, 100% { transform: rotate(-70deg); }
  50% { transform: rotate(-110deg); }
}

/* ── Праздник: прыгает, руки вверх, глаза дугами ── */
.mascot[data-mood="cheer"] .m-rig { animation: m-hop .7s cubic-bezier(.22, 1, .36, 1) infinite; }
.mascot[data-mood="cheer"] .m-shadow { animation: m-shadow-hop .7s ease infinite; }
.mascot[data-mood="cheer"] .m-eyes { opacity: 0; }
.mascot[data-mood="cheer"] .m-eyes-joy { opacity: 1; }
.mascot[data-mood="cheer"] .m-mouth-smile { opacity: 0; }
.mascot[data-mood="cheer"] .m-mouth-open { opacity: 1; }
.mascot[data-mood="cheer"] .m-arm-l { animation: m-cheer-l .35s ease-in-out infinite alternate; }
.mascot[data-mood="cheer"] .m-arm-r { animation: m-cheer-r .35s ease-in-out infinite alternate; }

@keyframes m-cheer-l { from { transform: rotate(50deg); } to { transform: rotate(78deg); } }
@keyframes m-cheer-r { from { transform: rotate(-50deg); } to { transform: rotate(-78deg); } }

/* ── Говорит: рот открывается в такт ──────────── */
.mascot[data-mood="talk"] .m-mouth-smile { opacity: 0; }
.mascot[data-mood="talk"] .m-mouth-open { opacity: 1; animation: m-talk .32s ease-in-out infinite alternate; transform-origin: 50% 0%; }
.mascot[data-mood="talk"] .m-arm-r { transform: rotate(-30deg); }

@keyframes m-talk { from { transform: scaleY(.35); } to { transform: scaleY(1); } }


/* ── Злодей второго экзамена: тёмный двойник Сёмы ── */
.mascot.villain .m-front { fill: url(#v-g-front); stroke: url(#v-g-front); }
.mascot.villain .m-top { fill: url(#v-g-top); stroke: url(#v-g-top); }
.mascot.villain .m-side { fill: url(#v-g-side); stroke: url(#v-g-side); }
.mascot.villain .m-arm rect { fill: #22253D; }
.mascot.villain .m-arm circle { fill: #2E3252; stroke: #15172A; }
.mascot.villain .m-foot { fill: #0A0B16; }
.mascot.villain .m-cheek { opacity: 0; }
.mascot.villain .m-pupil circle { fill: #FF3801; }
.mascot.villain .m-shine { stroke: rgba(255, 255, 255, .2); }
.mascot.villain .m-podium { display: none; }

.mascot[data-mood="angry"] .m-brows { opacity: 1; }
.mascot[data-mood="angry"] .m-brow-l { transform: rotate(18deg) translateY(6px); transform-origin: 100% 50%; }
.mascot[data-mood="angry"] .m-brow-r { transform: rotate(-18deg) translateY(6px); transform-origin: 0% 50%; }
.mascot[data-mood="angry"] .m-pupil { transform: scale(.8); transform-origin: center; }
.mascot[data-mood="angry"] .m-mouth-smile { opacity: 0; }
.mascot[data-mood="angry"] .m-mouth-sad { opacity: 1; transform: scaleX(1.25) translateY(-2px); transform-origin: center; }
.mascot[data-mood="angry"] .m-arm-l { transform: rotate(10deg); }
.mascot[data-mood="angry"] .m-arm-r { transform: rotate(-10deg); }
.mascot[data-mood="angry"] .m-rig { animation: m-menace 1.8s ease-in-out infinite; }
@keyframes m-menace {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mascot *, .mascot[data-mood] * { animation: none !important; }
}