/* ============================================================================
 *  ФормулаЦТ — маскот «Гекко» (слоёная 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 .mk-glow { opacity: 0; transition: opacity .3s; }
.mascot[data-mood="think"] .mk-glow { opacity: 1; animation: mkGlow 1.5s ease-in-out infinite; }
@keyframes mkGlow { 0%,100% { opacity: .25 } 50% { opacity: .7 } }

/* Пузырь подсказки рядом с маскотом */
.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; } }