/* ============================================================================
 *  ГеккоЦТ — маскот «Гекко» (слоёная SVG-анимация)
 *  Персонаж собран из отдельных слоёв: хвост, тело, лапы, голова, веки,
 *  зрачки, рот, академическая шапка с кисточкой. Каждый слой анимируется
 *  независимо — за счёт этого персонаж «живёт».
 * ==========================================================================*/
.mascot { display: block; overflow: visible; }
.mascot * { transform-box: fill-box; }

/* Дыхание тела */
.mascot .mk-body { transform-origin: 50% 85%; animation: mkBreathe 3.4s ease-in-out infinite; }
@keyframes mkBreathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.018, .982); }
}

/* Хвост покачивается */
.mascot .mk-tail { transform-origin: 12% 50%; animation: mkTail 2.6s ease-in-out infinite; }
@keyframes mkTail {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(9deg); }
}

/* Голова: лёгкое покачивание + поворот к курсору через CSS-переменные */
.mascot .mk-head {
  transform-origin: 50% 90%;
  animation: mkHeadBob 3.4s ease-in-out infinite;
  transition: transform .18s ease-out;
}
@keyframes mkHeadBob {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}
.mascot.is-looking .mk-head {
  transform: translate(calc(var(--look-x, 0) * 3px), calc(var(--look-y, 0) * 2px))
             rotate(calc(var(--look-x, 0) * 2.4deg));
  animation: none;
}

/* Зрачки следят за курсором */
.mascot .mk-pupil { transition: transform .16s ease-out; }
.mascot.is-looking .mk-pupil { transform: translate(calc(var(--look-x, 0) * 3.2px), calc(var(--look-y, 0) * 2.6px)); }

/* Мигание: веко съезжает сверху */
.mascot .mk-lid { transform: translateY(-102%); }
.mascot.is-blinking .mk-lid { animation: mkBlink .16s ease-in-out; }
@keyframes mkBlink {
  0%   { transform: translateY(-102%); }
  45%  { transform: translateY(0); }
  100% { transform: translateY(-102%); }
}
.mascot--sleepy .mk-lid { transform: translateY(-42%); }

/* Рот: меняем состояние через классы */
.mascot .mk-mouth { transition: d .18s ease; }
.mascot[data-mood="happy"] .mk-mouth-happy,
.mascot[data-mood="idle"] .mk-mouth-idle,
.mascot[data-mood="sad"] .mk-mouth-sad,
.mascot[data-mood="think"] .mk-mouth-think,
.mascot[data-mood="talk"] .mk-mouth-talk { display: block; }
.mascot .mk-mouth-happy, .mascot .mk-mouth-sad,
.mascot .mk-mouth-think, .mascot .mk-mouth-talk { display: none; }

/* Кисточка академической шапки */
.mascot .mk-tassel { transform-origin: 8% 4%; animation: mkTassel 2.1s ease-in-out infinite; }
@keyframes mkTassel {
  0%, 100% { transform: rotate(-9deg); }
  50%      { transform: rotate(11deg); }
}

/* Машущая лапа */
.mascot .mk-arm-wave { transform-origin: 18% 80%; }
.mascot.is-waving .mk-arm-wave { animation: mkWave .62s ease-in-out 3; }
@keyframes mkWave {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-46deg); }
}

/* Прыжок при радости */
.mascot.is-jumping .mk-body { animation: mkJump .55s cubic-bezier(.34,1.56,.64,1) 2; }
@keyframes mkJump {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-14px) scale(1.03, .97); }
  70%      { transform: translateY(0) scale(.98, 1.03); }
}

/* Свечение вокруг при «мышлении» */

/* Пузырь подсказки рядом с маскотом */
.mascot-bubble {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--sh-2); font-size: 14.5px; font-weight: 600; color: var(--fg-2);
  max-width: 320px;
}
.mascot-bubble::after {
  content: ''; position: absolute; left: 34px; bottom: -9px;
  width: 16px; height: 16px; background: var(--surface);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.mascot-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.mascot-stage--row { flex-direction: row; align-items: flex-end; }

/* Размеры */
.mascot--xs { width: 46px; }
.mascot--sm { width: 84px; }
.mascot--md { width: 132px; }
.mascot--lg { width: 190px; }
.mascot--xl { width: 240px; }
@media (max-width: 420px) { .mascot--xl { width: 190px; } .mascot--lg { width: 156px; } }

/* ------------------------- мягкая тень и искры -------------------------- */
.mascot .mk-shadow { transform-origin: 50% 50%; animation: mkShadow 3.6s ease-in-out infinite; }
@keyframes mkShadow { 0%,100% { transform: scale(1); opacity: .16; } 50% { transform: scale(.94); opacity: .11; } }

.mascot .mk-sparkle { transform-origin: 50% 50%; animation: mkTwinkle 2.9s ease-in-out infinite; }
.mascot .mk-sp2 { animation-delay: -.95s; }
.mascot .mk-sp3 { animation-delay: -1.9s; }
@keyframes mkTwinkle {
  0%, 100% { transform: scale(.55) rotate(0deg); opacity: .15; }
  50%      { transform: scale(1.05) rotate(45deg); opacity: .95; }
}

/* ======================= ПОЛНАЯ АНИМАЦИЯ ПО НАЖАТИЮ ====================== */
.mascot.is-playing .mk-body { animation: mkPlayBody 1.05s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes mkPlayBody {
  0%   { transform: translateY(0) scale(1); }
  22%  { transform: translateY(-16px) scale(1.04,.96); }
  44%  { transform: translateY(0) scale(.97,1.04); }
  62%  { transform: translateY(-8px) scale(1.02,.98); }
  82%  { transform: translateY(0) scale(.99,1.01); }
  100% { transform: translateY(0) scale(1); }
}
.mascot.is-playing .mk-head { animation: mkPlayHead 1.05s ease-in-out 1; }
@keyframes mkPlayHead {
  0%,100% { transform: rotate(0) translateY(0); }
  20%     { transform: rotate(-7deg) translateY(-2px); }
  45%     { transform: rotate(4deg) translateY(1px); }
  70%     { transform: rotate(-3deg) translateY(-1px); }
}
.mascot.is-playing .mk-cap { animation: mkPlayCap 1.1s cubic-bezier(.34,1.56,.64,1) 1; transform-origin: 50% 100%; }
@keyframes mkPlayCap {
  0%,100% { transform: translateY(0) rotate(0); }
  20%     { transform: translateY(-10px) rotate(-11deg); }
  42%     { transform: translateY(1px) rotate(5deg); }
  65%     { transform: translateY(-4px) rotate(-2deg); }
}
.mascot.is-playing .mk-tassel { animation: mkPlayTassel .55s ease-in-out 3; }
@keyframes mkPlayTassel {
  0%,100% { transform: rotate(-10deg); }
  50%     { transform: rotate(26deg); }
}
.mascot.is-playing .mk-tail { animation: mkPlayTail .42s ease-in-out 4; }
@keyframes mkPlayTail {
  0%,100% { transform: rotate(-8deg); }
  50%     { transform: rotate(14deg); }
}
.mascot.is-playing .mk-arm-wave { animation: mkWave .42s ease-in-out 4; }
.mascot.is-playing .mk-arm-left { animation: mkArmLeft .42s ease-in-out 4; transform-origin: 80% 20%; }
@keyframes mkArmLeft {
  0%,100% { transform: rotate(0); }
  50%     { transform: rotate(18deg); }
}
.mascot.is-playing .mk-feet { animation: mkPlayFeet .52s ease-in-out 2; transform-origin: 50% 80%; }
@keyframes mkPlayFeet {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(3px) scaleX(1.02); }
}
.mascot.is-playing .mk-sparkles { animation: mkSparkBurst .9s ease-out 2; transform-origin: 50% 50%; }
@keyframes mkSparkBurst {
  0%   { opacity: .2; transform: scale(.6); }
  45%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: .2; transform: scale(.85); }
}
.mascot.is-playing .mk-pupil { animation: mkPupilPlay .5s ease-in-out 2; }
@keyframes mkPupilPlay {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-1.6px) scale(1.08); }
}