/* pamir.kz — маскот-спутник в полный рост. Подключать после motion.css.
   Стоит в правом поле, вне контентной колонки (max-width 1240px).
   Если поле уже ширины фигуры (узкий экран) — mascot.js уменьшает его
   через --mascot-h; на мобиле уходит в компактный размер в правом низу.

   Размер и позиция задаются не через height/width/right/bottom (layout-
   свойства — их анимация означает reflow на каждом кадре), а через
   translate/scale: у блока фиксированный референсный размер (560×448 —
   самая крупная финальная поза), а mascot.js по-прежнему пишет те же
   --mascot-h/--mascot-right/--mascot-bottom, что и раньше — здесь эти же
   переменные просто читаются как коэффициент масштаба и сдвиг в пикселях,
   оба на отдельном composite-слое, без пересчёта раскладки страницы. */
.mascot {
  --mascot-scale: calc(var(--mascot-h, 340px) / 560px);
  position: fixed; right: 0; bottom: 0;
  z-index: 55; height: 560px; width: 448.17px;
  pointer-events: none;
  opacity: 0; transform: translateX(40%);
  transform-origin: 100% 100%;
  translate: calc(-1 * var(--mascot-right, 24px)) calc(-1 * var(--mascot-bottom, 0px));
  scale: var(--mascot-scale);
  /* translate/scale — без transition намеренно: с ней Chrome при повторном
     JS-изменении --mascot-h/--mascot-right (resize, вход в финальную позу)
     переставал пересчитывать итоговое значение — застывало на первом
     отрисованном (проверено вживую). Без transition оба свойства всё равно
     остаются на compositor-слое, никакого reflow — просто без плавности. */
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  /* свой composite-слой: без этого на Android Chrome fixed-элемент с
     непрерывной анимацией внутри (дыхание фигуры) при резком скролле
     иногда «размазывается» — на экране на миг видно несколько его копий. */
  will-change: transform, translate, scale;
}
.mascot.is-on { opacity: 1; transform: none; }
/* в финале появляется снизу, из-за кнопки */
.mascot.is-final { transform: translateY(30%); }
.mascot.is-final.is-on { transform: none; }

.mascot-figure {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  filter: drop-shadow(0 22px 26px rgba(17,18,15,.28));
  transform-origin: 50% 100%;
  will-change: translate;
}
/* дышит внутренний слой, чтобы не конфликтовать с параллакс-смещением фигуры */
.mascot-figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
  /* в финале срезаем низ только у картинки — пузырь не трогаем */
  clip-path: inset(0 0 var(--mascot-cut, 0px) 0);
  opacity: 0; transform: translateY(10px);
  /* быстрый переход между позами — при длинном fade два кадра на мгновение
     накладываются друг на друга (видно чужую руку/предмет поверх текущей позы) */
  transition: opacity .12s ease, transform .12s ease;
  transform-origin: 50% 100%;
}
.mascot-figure img.is-pose { opacity: 1; transform: none; animation: mascot-breathe 5.2s ease-in-out .9s infinite; }
@keyframes mascot-breathe { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.008); } }

.mascot-bubble {
  position: absolute; right: calc(100% - 22%); top: 6%;
  width: max-content; max-width: min(230px, calc(100vw - var(--mascot-h, 340px) * 0.62 - var(--mascot-right, 24px) - 24px)); padding: 12px 16px;
  background: var(--ink); color: #fff; border-radius: 18px 18px 4px 18px;
  font-size: 14px; line-height: 1.4; letter-spacing: -.01em;
  box-shadow: 0 14px 32px rgba(17,18,15,.18);
  opacity: 0; transform: translateY(8px) scale(.96);
  /* .mascot целиком масштабируется под текущий размер фигуры — без этой
     обратной поправки текст пузыря визуально мельчал бы вместе с фигурой.
     Без transition — та же причина, что и у .mascot (см. комментарий там). */
  scale: calc(1 / var(--mascot-scale, 1));
  /* раздувать от правого края (там же, где right:0 его закрепляет), а не
     от центра — иначе на мобильном при большом коэффициенте пузырь
     вылезает за правый край экрана (проверено вживую). */
  transform-origin: 100% 0%;
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.mascot-bubble.is-on { opacity: 1; transform: none; }
.mascot-bubble b { color: var(--lime); font-weight: 600; }
.mascot-bubble::after {
  content: ''; position: absolute; right: -6px; bottom: 10px;
  width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); border-radius: 2px;
}
.mascot.on-dark .mascot-bubble { background: var(--paper); color: var(--ink); }
.mascot.on-dark .mascot-bubble::after { background: var(--paper); }
.mascot.on-dark .mascot-bubble b { color: #3b7d1f; }
/* в позе point рука вытянута в сторону пузыря дальше, чем в остальных
   трёх позах — общий right:calc(100% - 22%) у них не пересекается с
   рисунком, а тут накрывает кисть (проверено вживую). Сдвигаем пузырь
   левее только для этой позы. */
.mascot.pose-point .mascot-bubble { right: calc(100% - 10%); }
/* финал: пузырь над головой, а не слева — не ложится на текст контактов.
   Точка привязки скейла тоже переезжает вниз-направо — там же, где теперь
   держит его сам bottom:calc(100% + 10px) — иначе на крупном коэффициенте
   масштаба низ пузыря вместе с хвостиком уезжает от фигуры (проверено
   вживую: хвостик отрывался и висел отдельным белым ромбиком). */
.mascot.is-final .mascot-bubble { right: 0; top: auto; bottom: calc(100% + 10px); border-radius: 18px 18px 4px 18px; max-width: min(240px, calc(100vw - 32px)); transform-origin: 100% 100%; }
.mascot.is-final .mascot-bubble::after { right: 22%; left: auto; bottom: -6px; }
/* в финале слева пузырь не ограничиваем фигурой — только экраном */
.mascot.is-final .mascot-bubble { max-width: min(250px, calc(100vw - 32px)); }

@media (max-width: 720px) {
  .mascot-bubble { max-width: 180px; font-size: 13px; padding: 10px 12px; top: 0; }
  .mascot.is-final .mascot-bubble { max-width: min(220px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot, .mascot-figure, .mascot-figure img, .mascot-bubble { animation: none; transition: none; }
}