/* Маскот Лаб — размеры, цвет, анимация. Один файл, без зависимостей. */

:root {
  --lab-ink: oklch(22% 0.03 255);      /* масса колбы на светлом фоне */
  --lab-ink-invert: oklch(97% 0.005 255); /* масса на тёмном фоне */
  --lab-accent: oklch(58% 0.15 200);   /* пробка и акцентный слой */
  --lab-min: 40px;                     /* рабочий минимум для лица */
}

.lab { color: var(--lab-ink); width: 64px; height: 64px; display: block; transform-box: view-box }
.lab--invert { color: var(--lab-ink-invert) }
.lab--sm { width: var(--lab-min); height: var(--lab-min) }
.lab--md { width: 64px; height: 64px }
.lab--lg { width: 120px; height: 120px }
/* Ниже 40 px лицо не используем: ставим знак без лица. */

@keyframes lab-rock {
  0%, 100% { transform: rotate(-1.6deg) }
  50% { transform: rotate(1.6deg) }
}
@keyframes lab-bubble {
  0% { opacity: 0; transform: translateY(7px) scale(.6) }
  28% { opacity: 1; transform: translateY(0) scale(1) }
  64% { opacity: 1; transform: translateY(-2px) scale(1) }
  100% { opacity: 0; transform: translateY(-8px) scale(.85) }
}
@keyframes lab-breathe {
  0%, 100% { transform: scaleY(1) }
  50% { transform: scaleY(1.028) }
}
@keyframes lab-float {
  0% { opacity: 0; transform: translate(0, 8px) scale(.8) }
  22% { opacity: 1; transform: translate(1px, 2px) scale(1) }
  100% { opacity: 0; transform: translate(7px, -16px) scale(1.05) }
}
@keyframes lab-bow {
  0%, 14% { transform: rotate(0deg) }
  36%, 56% { transform: rotate(9deg) }
  82%, 100% { transform: rotate(0deg) }
}

/* 03 «подбор идёт» — бесконечно, пока идёт запрос */
.lab-rock { transform-box: view-box; transform-origin: 60px 100px; animation: lab-rock 1.8s ease-in-out infinite }
.lab-drop { transform-box: view-box; animation: lab-bubble 1.8s ease-in-out infinite }
.lab-drop--2 { animation-delay: .6s }
.lab-drop--3 { animation-delay: 1.2s }

/* 13 «простой» — бесконечно, пока вкладка неактивна */
.lab-breathe { transform-box: view-box; transform-origin: 60px 106px; animation: lab-breathe 3.2s ease-in-out infinite }
.lab-float { transform-box: view-box; animation: lab-float 2.4s ease-out infinite }
.lab-float--2 { animation-delay: 1.2s }

/* 20 «подтверждение» — ОДИН проход: класс навешивается в момент события
   и снимается по animationend, иначе поклон превращается в назойливость */
.lab-bow { transform-box: view-box; transform-origin: 60px 106px; animation: lab-bow 2.6s cubic-bezier(.34,.8,.3,1) 1 }

@media (prefers-reduced-motion: reduce) {
  .lab-rock, .lab-drop, .lab-breathe, .lab-float, .lab-bow { animation: none }
}