/* =========================================================================
   Keylo — персонаж (SVG + CSS, без JS и библиотек)
   Состояние задаётся классом на <svg>:
   kl-mascot--idle | hello | working | search | done | fire | alert | night | report
   Смена состояния = смена класса; глаза появляются с мягкой анимацией.
   Размер: --kl-mascot-size (по умолчанию 120px).
   ========================================================================= */

.kl-mascot {
  display: block;
  width: var(--kl-mascot-size, 120px);
  height: auto;
  overflow: visible;
  flex: none;
}

/* ---- Части ---- */
.kl-mascot .kl-m-body {
  fill: var(--kl-mascot-body);
  stroke: var(--kl-mascot-edge);
  stroke-width: 1.5;
}
.kl-mascot .kl-m-ear,
.kl-mascot .kl-m-leg,
.kl-mascot .kl-m-arm rect { fill: var(--kl-mascot-body); stroke: var(--kl-mascot-edge); stroke-width: 1.5; }
.kl-mascot .kl-m-screen { fill: var(--kl-mascot-screen); stroke: var(--kl-mascot-screen-edge); stroke-width: 1.5; }
.kl-mascot .kl-m-ring { fill: none; stroke: var(--kl-brass); stroke-width: 5.5; }
.kl-mascot .kl-m-key-shaft { fill: none; stroke: var(--kl-brass); stroke-width: 4.5; stroke-linecap: round; }
.kl-mascot .kl-m-keyhole { fill: var(--kl-brass); }
.kl-mascot .kl-m-check circle { fill: var(--kl-mint); }
.kl-mascot .kl-m-check path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Глаза: латунь по умолчанию */
.kl-mascot .kl-m-eyes { display: none; fill: var(--kl-brass); stroke: var(--kl-brass); stroke-width: 0; }
.kl-mascot .kl-m-eyes path { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.kl-mascot .kl-m-eyes--search .kl-m-lens { fill: none; stroke-width: 2.8; stroke-linecap: round; }
.kl-mascot .kl-m-eyes--working .kl-m-dot { stroke: none; }
.kl-mascot .kl-m-eyes--fire .kl-m-flame { fill: var(--kl-coral); stroke: none; }
.kl-mascot .kl-m-eyes--fire .kl-m-flame-core { fill: var(--kl-brass); stroke: none; }
.kl-mascot .kl-m-eyes--alert { fill: var(--kl-coral); }
.kl-mascot .kl-m-eyes--report { fill: var(--kl-mint); }
.kl-mascot .kl-m-eyes--night .kl-m-moon { fill: var(--kl-brass); stroke: none; }
.kl-mascot .kl-m-eyes--night .kl-m-star { fill: var(--kl-cream); stroke: none; }

/* Скрытые по умолчанию детали */
.kl-mascot .kl-m-arm,
.kl-mascot .kl-m-check { display: none; }

/* ---- Состояние → видимые глаза ---- */
.kl-mascot--idle    .kl-m-eyes--idle,
.kl-mascot--hello   .kl-m-eyes--hello,
.kl-mascot--working .kl-m-eyes--working,
.kl-mascot--search  .kl-m-eyes--search,
.kl-mascot--done    .kl-m-eyes--done,
.kl-mascot--fire    .kl-m-eyes--fire,
.kl-mascot--alert   .kl-m-eyes--alert,
.kl-mascot--night   .kl-m-eyes--night,
.kl-mascot--report  .kl-m-eyes--report { display: inline; }

.kl-mascot--hello .kl-m-arm,
.kl-mascot--done  .kl-m-check { display: inline; }

/* ---- Анимации ---- */
/* точки поворота считаем в координатах viewBox */
.kl-mascot .kl-m-key,
.kl-mascot .kl-m-arm,
.kl-mascot .kl-m-root,
.kl-mascot .kl-m-check { transform-box: view-box; }

.kl-mascot .kl-m-key { transform-origin: 54px 16px; }
.kl-mascot .kl-m-arm { transform-origin: 99.5px 58px; }
.kl-mascot .kl-m-root { transform-origin: 60px 107px; }
.kl-mascot .kl-m-check { transform-origin: 95px 31px; }
.kl-mascot .kl-m-eyes { transform-box: fill-box; transform-origin: center; }

/* появление глаз при смене состояния */
.kl-mascot .kl-m-eyes { animation: kl-m-eyes-in var(--kl-dur-base) var(--kl-ease) both; }

/* idle: моргание + ключ слегка покачивается */
.kl-mascot--idle .kl-m-eyes--idle,
.kl-mascot--night .kl-m-eyes--night > circle:not(.kl-m-star) {
  animation: kl-m-eyes-in var(--kl-dur-base) var(--kl-ease) both, kl-m-blink 5.2s 1s infinite;
  transform-box: fill-box; transform-origin: center;
}
.kl-mascot--idle .kl-m-key { animation: kl-m-sway 4s ease-in-out infinite; }

/* hello: машет рукой, ключ покачивается */
.kl-mascot--hello .kl-m-arm { animation: kl-m-wave 1.4s ease-in-out infinite; }
.kl-mascot--hello .kl-m-key { animation: kl-m-sway 2.8s ease-in-out infinite; }

/* working: ключ качается активно, точки загрузки бегут */
.kl-mascot--working .kl-m-key { animation: kl-m-swing 1.1s ease-in-out infinite; }
.kl-mascot--working .kl-m-dot { animation: kl-m-dot 1.2s ease-in-out infinite; }
.kl-mascot--working .kl-m-dot:nth-of-type(2) { animation-delay: .15s; }
.kl-mascot--working .kl-m-dot:nth-of-type(3) { animation-delay: .3s; }

/* search: взгляд «сканирует» влево-вправо */
.kl-mascot--search .kl-m-scan { animation: kl-m-scan 1.8s ease-in-out infinite; }
.kl-mascot--search .kl-m-key { animation: kl-m-sway 3s ease-in-out infinite; }

/* done: подскок + галочка с пружиной (один раз) */
.kl-mascot--done .kl-m-root { animation: kl-m-hop .6s var(--kl-ease-spring) both; }
.kl-mascot--done .kl-m-check { animation: kl-m-pop .45s .25s var(--kl-ease-spring) both; }

/* fire: огоньки мерцают */
.kl-mascot--fire .kl-m-flame,
.kl-mascot--fire .kl-m-flame-core { transform-box: fill-box; transform-origin: 50% 100%; animation: kl-m-flicker .9s ease-in-out infinite alternate; }
.kl-mascot--fire g[transform] > .kl-m-flame { animation-delay: .2s; }
.kl-mascot--fire .kl-m-key { animation: kl-m-swing 1.6s ease-in-out infinite; }

/* alert: короткое покачивание каждые 3 секунды */
.kl-mascot--alert .kl-m-root { animation: kl-m-shake 3s ease-in-out infinite; }

/* night: луна плавает, звёзды мерцают */
.kl-mascot--night .kl-m-moon { transform-box: fill-box; transform-origin: center; animation: kl-m-float 3.5s ease-in-out infinite; }
.kl-mascot--night .kl-m-star { animation: kl-m-twinkle 2.4s ease-in-out infinite; }
.kl-mascot--night .kl-m-star--2 { animation-delay: 1.1s; }

/* report: столбики растут по очереди */
.kl-mascot--report .kl-m-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: kl-m-grow 2.4s var(--kl-ease) infinite; }
.kl-mascot--report .kl-m-bars rect:nth-child(2) { animation-delay: .12s; }
.kl-mascot--report .kl-m-bars rect:nth-child(3) { animation-delay: .24s; }
.kl-mascot--report .kl-m-bars--2 rect { animation-delay: .36s; }

@keyframes kl-m-eyes-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes kl-m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes kl-m-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes kl-m-swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes kl-m-wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 60% { transform: rotate(8deg); } }
@keyframes kl-m-dot { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes kl-m-scan { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes kl-m-hop { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-8px) scale(.97, 1.03); } 60% { transform: translateY(0) scale(1.03, .97); } 100% { transform: none; } }
@keyframes kl-m-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes kl-m-flicker { from { transform: scale(1, 1); opacity: 1; } to { transform: scale(.88, 1.1); opacity: .85; } }
@keyframes kl-m-shake { 0%, 12%, 100% { transform: rotate(0); } 3% { transform: rotate(-4deg); } 6% { transform: rotate(4deg); } 9% { transform: rotate(-2deg); } }
@keyframes kl-m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes kl-m-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes kl-m-grow { 0% { transform: scaleY(.2); } 25%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.2); } }

/* ---- Аватар: персонаж в круге (тёмный / латунь) ---- */
.kl-mascot-avatar {
  display: inline-grid;
  place-items: center;
  width: var(--kl-avatar-size, 48px);
  height: var(--kl-avatar-size, 48px);
  border-radius: 50%;
  background: var(--kl-ink);
  overflow: hidden;
  flex: none;
}
.kl-mascot-avatar--brass { background: var(--kl-brass); }
.kl-mascot-avatar .kl-mascot { width: 92%; margin-top: 8%; --kl-mascot-edge: transparent; }

/* ---- Уважение к настройке «уменьшить движение» ---- */
@media (prefers-reduced-motion: reduce) {
  .kl-mascot *, .kl-mascot { animation: none !important; }
}