/*!
 * inna-ivanova-demo — mascot.css
 * Капля-маскот на кромке плашки-пометки.
 *
 * Плашка остаётся обычной .geo-answer (прямоугольник, фон, рамка, кегль —
 * всё как у остальных). Единственное отличие: справа на её границе «сидит»
 * капля, наполовину заходя на плашку, наполовину — на белый фон секции.
 * Тот же приём, что с портретом врача в блоке «Почему можно доверять».
 *
 * @package inna-ivanova-demo
 */

/* Плашка: место справа под каплю, всё остальное — как у обычной .geo-answer. */
.geo-answer--mascot {
  position: relative;
  padding-right: clamp(90px, 11vw, 150px);
}

/* ---------- Капля на кромке ---------- */
.mascot {
  position: absolute;
  /* Половина фигуры — на плашке, половина — на белом фоне за её краем. */
  right: clamp(-64px, -5vw, -34px);
  /* Лапки в исходнике лежат на ~90% высоты кадра (ниже них — пустое поле),
     поэтому картинку опускаем: кромка рамки проходит по лапкам, и капля
     «обхватывает» границу, а не висит над ней. */
  bottom: -5%;
  width: clamp(104px, 11vw, 150px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: none;
  transition: opacity 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.28s cubic-bezier(0.23, 1, 0.32, 1);
}
.mascot.is-in { opacity: 1; }

.mascot__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(20, 40, 90, 0.16));
}

/* ---------- Планшет и мобильные ---------- */
@media (max-width: 900px) {
  /* Сбоку места мало — капля садится лапками на ВЕРХНЮЮ кромку плашки.
     Отступ сверху освобождает ей место, чтобы она не легла на заголовок. */
  .geo-answer--mascot {
    padding-right: clamp(20px, 3vw, 30px);
    padding-top: 46px;
    margin-top: 52px;
  }
  .mascot {
    right: 12px;
    bottom: auto;
    /* Лапки (низ кадра) ложатся на верхнюю границу рамки. */
    top: -84px;
    width: 92px;
  }
}
@media (max-width: 480px) {
  .geo-answer--mascot { padding-top: 40px; margin-top: 44px; }
  .mascot { width: 78px; top: -72px; right: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mascot { opacity: 1; transition: none; }
}