/* site-mascot.css — роботы-маскоты и пиксельные украшения лендинга. */
/* Общее для роботов: не перехватывают клики, мягкая тень. */
.m-hero, .m-gift, .m-faq, .m-laptop, .m-transfer {
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(20, 20, 28, .12));
  user-select: none;
  height: auto;
}

/* Робот на первом экране — справа от карточки, справа от контента. */
.m-hero {
  position: absolute;
  top: 20px;
  right: 2%;
  width: 220px;
  max-width: 220px;
  z-index: 3;
}
.m-hero + .px-trail {
  position: absolute;
  top: 118px;
  right: calc(2% + 216px);
  z-index: 2;
}

/* Робот с подарком у первого стата. */
.stats-grid { position: relative; }
.m-gift {
  position: absolute;
  top: -14px;
  right: -6px;
  width: 120px;
  max-width: 120px;
  z-index: 2;
}
.m-gift + .px-spark {
  position: absolute;
  top: 8px;
  right: 104px;
  z-index: 3;
}

/* Робот с лупой справа от заголовка FAQ. */
#faq .wrap { position: relative; }
.m-faq {
  position: absolute;
  top: 24px;
  right: 8px;
  width: 160px;
  max-width: 160px;
}

/* Робот за ноутбуком справа в тёмной панели. */
.scr-head { position: relative; padding-right: 180px; }
.m-laptop {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 150px;
  max-width: 150px;
}

/* Робот-переносчик под списком площадок. */
.pl-col { position: relative; }
.m-transfer {
  display: block;
  margin: 22px 0 0;
  width: 150px;
  max-width: 150px;
}
.m-transfer + .px-trail {
  display: block;
  margin-top: 6px;
}

/* Трейл у надзаголовья секции (inline, небольшой). */
.m-eyebrow-trail {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

/* Мягкое покачивание роботов, у каждого своя задержка. */
@keyframes m-float {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}
.m-hero, .m-gift, .m-faq, .m-laptop, .m-transfer {
  animation: m-float 4.5s ease-in-out infinite alternate;
}
.m-hero { animation-delay: 0s; }
.m-gift { animation-delay: .6s; }
.m-faq { animation-delay: 1.2s; }
.m-laptop { animation-delay: 1.8s; }
.m-transfer { animation-delay: 2.4s; }

/* Без анимации при системной настройке «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  .m-hero, .m-gift, .m-faq, .m-laptop, .m-transfer { animation: none; }
}

/* На узких экранах прячем крупных роботов, чтобы не перекрывать текст. */
@media (max-width: 900px) {
  .m-hero, .m-faq, .m-laptop { display: none; }
  .m-hero + .px-trail { display: none; }
  .scr-head { padding-right: 0; }
}

/* Правка расположения: робот у правого края карточки с кнопками, не над заголовком */
.m-hero { top: auto; bottom: 110px; right: auto; left: calc(50% + 300px); width: 200px; max-width: 200px; }
.m-hero + .px-trail { display: none; }
.m-gift { right: -96px; }
@media (max-width: 1280px) { .m-hero { left: calc(50% + 280px); width: 170px; } .m-gift { right: -40px; } }
.scr-head { position: relative; }
.scr-head .m-laptop { position: absolute; right: 0; top: -20px; margin: 0; }
/* Робот внутри карточки первого экрана: справа от неё, низом к низу карточки */
.hero-card { position: relative; }
.hero-card .m-hero { top: auto; bottom: -6px; left: calc(100% + 18px); right: auto; width: 190px; max-width: 190px; }
@media (max-width: 1280px) { .hero-card .m-hero { left: calc(100% + 6px); width: 160px; } }
/* Пиксельная сцена на первом экране — скруглённая карточка с наклоном */
.hero-card .m-hero-art { width: 280px; max-width: 280px; height: auto; bottom: -24px; left: calc(100% + 28px); border-radius: 26px; rotate: 3deg; box-shadow: 0 24px 60px rgba(60, 40, 160, .35); filter: none; border: 4px solid #fff; }
@media (max-width: 1280px) { .hero-card .m-hero-art { width: 210px; left: calc(100% + 14px); } }
/* Машущий робот в «Кому подходит» */
#audience .wrap { position: relative; }
.m-aud { position: absolute; right: 8px; top: 40px; width: 150px; height: auto; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(20,20,28,.12)); animation: m-float 4.5s ease-in-out infinite alternate; }
@media (max-width: 900px) { .m-aud { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-aud { animation: none; } }
/* Робот «Кому подходит» — выше и поверх карточек */
.m-aud { top: -6px; right: 24px; width: 140px; z-index: 3; }
/* Самолёт над пиксельным городом — в блоке «Скоро» (полёт в будущее) */
#soon .wrap { position: relative; }
.m-soon { position: absolute; right: 8px; top: 24px; width: 230px; height: auto; border-radius: 22px; border: 4px solid #fff; rotate: -3deg; box-shadow: 0 20px 50px rgba(60,40,160,.28); pointer-events: none; }
@media (max-width: 1100px) { .m-soon { display: none; } }
.m-soon { width: 150px; top: -8px; right: 16px; }