/* ── Кролик занятости: геометрия и цвета ───────────────────────────────────
   Всё движение кролика (кадры, длительности, привязки animation) живёт в
   motion.css — по правилу проекта «движение только там». Здесь нет ни одного
   transition/animation: за этим следит tests/bunny-css.test.mjs, тем же
   правилом, что стережёт kb.css. */

/* Хозяин накладки. position — чтобы накладке было от чего мерить inset:0;
   overflow — чтобы на время ожидания содержимое под накладкой не прокручивалось
   мимо неё. min-height — чтобы кролик со сценой и подписями всегда помещался
   целиком, с воздухом вокруг: тесному окну проще подрасти, чем кролику — 
   остаться без ушей. */
.bunny-host {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.bunny-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(245, 246, 250, 0.92);
  backdrop-filter: blur(2px);
  z-index: 5;
}

/* Гаснущая накладка: opacity ведёт transition из motion.css. */
.bunny-overlay--out {
  opacity: 0;
  pointer-events: none;
}

.bunny {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  max-width: 100%;
}

/* Сцена квадратная и резиновая: на тесных хостах ужимается целиком —
   aspect-ratio держит пропорцию, svg с viewBox сам вписывается. Кролик
   никогда не режется краем окна: он уменьшается. */
.bunny__stage {
  position: relative;
  width: 168px;
  max-width: min(64vw, 168px);
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 72px;
  flex: 0 1 auto;
}

.bunny__stage svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bunny__text {
  font-size: 15px;
  font-weight: 600;
  color: var(--b24-text);
}

.bunny__note {
  font-size: 13px;
  color: var(--text-muted);
}

/* Счётчик «идёт N с»: место занято заранее, чтобы его появление на шестой
   секунде не сдвигало кролика. */
.bunny__elapsed {
  min-height: 18px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Облачко «Ура!». Сдвиг на -50% держат кадры bn-cloud-pop в motion.css. */
.bunny__cloud {
  position: absolute;
  top: -4px;
  left: 50%;
  padding: 4px 14px;
  background: #fff;
  border: 2px solid var(--b24-success);
  border-radius: 16px;
  font-size: 19px;
  font-weight: 800;
  color: var(--b24-success);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(58, 167, 87, 0.25);
}

/* Кнопка-динамик на накладке: выключить/включить звук кролика. */
.bunny__snd {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--b24-border);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.85;
}

.bunny__snd:hover {
  opacity: 1;
}

/* Конфетти: прямоугольники и точки, цвет и траектория — inline у каждой штуки. */
.bn-cf {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
}

.bn-cf--dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* Эфемерные детали рождаются невидимыми и живут только кадрами motion.css:
   крошки моркови от места укуса, вспышка, кольцо и искры праздника. При
   «уменьшить движение» кадры не идут — детали не появляются вовсе, и кролик
   стоит спокойной картинкой. Конфетти выше устроено так же. */
.bn-crumb, .bn-burst, .bn-ring, .bn-star {
  opacity: 0;
}

/* Оси вращения частей кролика: лапы праздника — в плечах, уши — в основании,
   голова — у шеи (кивает к морковке), морковка — у надкушенного торца, прыжок
   и дыхание — от земли. fill-box, чтобы ось считалась от самой части, а не от
   холста: части можно двигать, не пересчитывая градусы. */
.bn-arm-l, .bn-arm-r, .bn-ear, .bn-ear2l, .bn-ear2r, .bn-head,
.bn-eyes, .bn-body-g, .bn-jump, .bn-shadow, .bn-carrot, .bn-crumb,
.bn-burst, .bn-ring, .bn-star {
  transform-box: fill-box;
}

.bn-arm-l { transform-origin: 88% 92%; }
.bn-arm-r { transform-origin: 12% 92%; }
.bn-ear, .bn-ear2l, .bn-ear2r { transform-origin: 50% 100%; }
.bn-head { transform-origin: 50% 88%; }
.bn-eyes { transform-origin: 50% 50%; }
.bn-body-g, .bn-jump { transform-origin: 50% 100%; }
.bn-shadow { transform-origin: 50% 50%; }
.bn-carrot { transform-origin: 60% 8%; }
.bn-crumb { transform-origin: 50% 50%; }
.bn-burst, .bn-ring, .bn-star { transform-origin: 50% 50%; }

/* Плейсхолдер вместо серого спиннера наследует раскладку .loading; кролику в
   пустом контейнере хватает меньших отступов, чем спиннеру. */
.loading.bunny-load {
  gap: 4px;
  padding: 40px 24px;
}