/* NeuroM.A.X. — маскот-робот (робот-помощник).
   Общие стили для мест применения:
   1) .mascot-fab      — плавающий виджет в правом нижнем углу (большинство страниц);
   2) .mascot-hero     — крупный интерактивный маскот в hero на главной (home.html/not_found.html);
   3) .auth .mas       — маскот в карточке входа/регистрации (см. neuro.css);
   4) .bgi.mascot-bgi  — доп. фоновые роботы в секциях home.html (см. home.html);
   5) .mascot-narrator — маскот-«рассказчик» ниже hero на главной, сам подаёт
      реплику, когда секция появляется на экране (см. web/js/mascot.js);
   6) .mascot-ambient/.deco-echo — фоновый кластер (робот + увеличенное эхо
      «декор»-иконки страницы) на внутренних страницах, добавляется
      автоматически из web/js/mascot.js на ЛЮБОЙ странице без .mascot-hero —
      то есть на login/dashboard/pay/tariffs/error/success/support/
      text_page/guide_video и т.д., без правок каждого шаблона.
   Два PNG-спрайта — «стоит» и «машет» (переключаются в web/js/mascot.js),
   поверх переключения позы — CSS-анимации:
   1) непрерывный «дышащий» idle-цикл (покачивание + поворот + лёгкое
      дыхание масштабом + пульс свечения);
   2) набор разных «реакций» (.mascot-react-*: wave/spin/nod/jump/talk) —
      web/js/mascot.js навешивает их по очереди, на клик/наведение и сам по
      себе периодически, плюс «печатающий» индикатор в пузыре — чтобы
      казалось, что маскот что-то делает и разговаривает, а не просто
      мигрирует по экрану. */

.mascot-fab,.mascot-hero,.mascot-narrator{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mascot-fab .mascot-img,.mascot-hero .mascot-img,.mascot-narrator .mascot-img{display:block;pointer-events:none;user-select:none;filter:drop-shadow(0 16px 26px rgba(76,60,255,.45));transform-origin:50% 88%;will-change:transform,filter}
.mascot-fab:focus-visible,.mascot-hero:focus-visible,.mascot-narrator:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:16px}

/* ---- Непрерывный idle-цикл (общий для всех мест) ---- */
@keyframes mascot-idle{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  25%{transform:translateY(-8px) rotate(-2.5deg) scale(1.012)}
  50%{transform:translateY(-2px) rotate(0deg) scale(1)}
  75%{transform:translateY(-11px) rotate(2.5deg) scale(1.015)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes mascot-glow{
  0%,100%{filter:drop-shadow(0 16px 26px rgba(76,60,255,.45)) brightness(1)}
  50%{filter:drop-shadow(0 20px 32px rgba(120,140,255,.65)) brightness(1.08)}
}

/* ---- Разовые реакции (навешиваются/снимаются из mascot.js) ---- */
@keyframes mascot-react-wave{
  0%,100%{transform:rotate(0deg) scale(1)}
  20%{transform:rotate(-9deg) scale(1.06)}
  40%{transform:rotate(7deg) scale(1.03)}
  60%{transform:rotate(-5deg) scale(1.05)}
  80%{transform:rotate(3deg) scale(1.02)}
}
@keyframes mascot-react-spin{
  0%{transform:rotate(0deg) scale(1)}
  35%{transform:rotate(0deg) scale(1.1)}
  70%{transform:rotate(360deg) scale(1.08)}
  100%{transform:rotate(360deg) scale(1)}
}
@keyframes mascot-react-nod{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(3px) rotate(-4deg)}
  50%{transform:translateY(0) rotate(0deg)}
  75%{transform:translateY(3px) rotate(4deg)}
}
@keyframes mascot-react-jump{
  0%,100%{transform:translateY(0) scale(1,1)}
  30%{transform:translateY(3px) scale(1.1,.9)}
  55%{transform:translateY(-22px) scale(.95,1.08)}
  75%{transform:translateY(0) scale(1.06,.96)}
}
/* «Разговор»: частое мелкое покачивание в ритме речи, как будто маскот
   что-то объясняет, а не просто дёргается. */
@keyframes mascot-react-talk{
  0%,100%{transform:rotate(0deg) translateY(0) scale(1)}
  15%{transform:rotate(-3deg) translateY(-2px) scale(1.02)}
  30%{transform:rotate(2deg) translateY(0) scale(1)}
  45%{transform:rotate(-2.5deg) translateY(-3px) scale(1.015)}
  60%{transform:rotate(3deg) translateY(0) scale(1)}
  75%{transform:rotate(-1.5deg) translateY(-2px) scale(1.01)}
}
@keyframes mascot-react-shake{
  0%,100%{transform:translateX(0) rotate(0deg)}
  15%{transform:translateX(-7px) rotate(-6deg)}
  30%{transform:translateX(6px) rotate(5deg)}
  45%{transform:translateX(-5px) rotate(-4deg)}
  60%{transform:translateX(4px) rotate(3deg)}
  75%{transform:translateX(-2px) rotate(-1deg)}
}
.mascot-react-wave .mascot-img{animation:mascot-react-wave .7s ease-in-out both!important}
.mascot-react-shake .mascot-img{animation:mascot-react-shake .6s ease-in-out both!important}
.mascot-react-spin .mascot-img{animation:mascot-react-spin .8s cubic-bezier(.3,1.4,.5,1) both!important}
.mascot-react-nod .mascot-img{animation:mascot-react-nod .9s ease-in-out both!important}
.mascot-react-jump .mascot-img{animation:mascot-react-jump .7s cubic-bezier(.3,1.4,.5,1) both!important}
.mascot-react-talk .mascot-img{animation:mascot-react-talk 1.1s ease-in-out both!important}

/* ---- Пузырь + «печатающий» индикатор перед репликой ---- */
.mascot-bubble{
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);
  max-width:min(60vw,230px);
  width:max-content;
  background:#12142a;
  color:#eceefb;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px 16px 4px 16px;
  padding:9px 13px;
  font:600 13px/1.4 Manrope,system-ui,sans-serif;
  box-shadow:0 22px 44px -16px rgba(0,0,0,.65);
  opacity:0;
  transform:translateY(8px) scale(.9);
  transform-origin:100% 100%;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.mascot-bubble.is-visible{opacity:1;transform:translateY(0) scale(1)}
.mascot-bubble .mtd{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.mascot-bubble .mtd i{width:6px;height:6px;border-radius:50%;background:var(--mu,#a3a8cf);animation:mascot-typing 1s infinite}
.mascot-bubble .mtd i:nth-child(2){animation-delay:.15s}
.mascot-bubble .mtd i:nth-child(3){animation-delay:.3s}
@keyframes mascot-typing{50%{transform:translateY(-5px);background:var(--b,#4C8DFF)}}

@media(max-width:640px){.mascot-bubble{font-size:12.5px}}

/* ---- Плавающий помощник ---- */
.mascot-fab{
  position:fixed;
  right:clamp(12px,3vw,26px);
  bottom:calc(env(safe-area-inset-bottom,0px) + clamp(12px,3vw,26px));
  width:clamp(60px,9vw,84px);
  z-index:45;
}
.mascot-fab .mascot-img{width:100%;height:auto;animation:mascot-idle 5.4s ease-in-out infinite,mascot-glow 5.4s ease-in-out infinite}
.mascot-fab:hover .mascot-img{animation-play-state:paused}
@media(max-width:640px){.mascot-fab{width:clamp(52px,13vw,68px)}}
@media(prefers-reduced-motion:reduce){.mascot-fab .mascot-img{animation:none}}

/* ---- Маскот в hero на главной ---- */
.mascot-hero{background:none!important}
.mascot-hero .mascot-img{width:100%;height:auto;animation:mascot-idle 6.2s ease-in-out infinite,mascot-glow 6.2s ease-in-out infinite}
.mascot-hero:hover .mascot-img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.mascot-hero .mascot-img{animation:none}}

/* ---- Маскот в карточке входа/регистрации (.auth .mas, см. neuro.css) ---- */
.auth .mas .mascot-img{width:100%;height:100%;object-fit:contain;animation:mascot-idle 5.8s ease-in-out infinite,mascot-glow 5.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.auth .mas .mascot-img{animation:none}}

/* ---- Доп. фоновые роботы в секциях home.html (.bgi.mascot-bgi) ---- */
.mascot-bgi{animation:mascot-idle 7.4s ease-in-out infinite;opacity:.22}
.mascot-bgi--lg{width:clamp(220px,32vw,420px)!important}
@media(prefers-reduced-motion:reduce){.mascot-bgi{animation:none}}

/* ---- Маскот-рассказчик рядом с демо-перепиской (home.html, #how) ----
   Раньше сидел у самого верха секции, никак не привязанный к телефону с
   примером решения — теперь стоит вплотную слева от него и как будто
   комментирует происходящее на экране (см. .ph-wrap в home.html). */
.ph-wrap{position:relative}
.mascot-narrator{
  position:absolute;
  left:-4%;
  top:-9%;
  width:clamp(72px,9vw,112px);
  z-index:3;
}
.mascot-narrator .mascot-img{width:100%;height:auto;animation:mascot-idle 6s ease-in-out infinite,mascot-glow 6s ease-in-out infinite}
.mascot-narrator .mascot-bubble{right:auto;left:0;bottom:auto;top:calc(100% + 10px);border-radius:4px 16px 16px 16px;transform-origin:0 0}
@media(max-width:760px){.mascot-narrator{position:static;width:78px;margin:0 auto 14px}.mascot-narrator .mascot-bubble{left:50%;right:auto;transform:translateX(-50%) translateY(8px) scale(.9)}.mascot-narrator .mascot-bubble.is-visible{transform:translateX(-50%) translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.mascot-narrator .mascot-img{animation:none}}

/* ---- Тревожный маскот на странице ошибки (.mascot-hero.is-alarm,
   error.html) — тот же hero, но с красным пульсом свечения вместо
   сине-фиолетового, чтобы сразу читалось «что-то не так». ---- */
@keyframes mascot-glow-alarm{
  0%,100%{filter:drop-shadow(0 16px 26px rgba(239,68,68,.5)) brightness(1)}
  50%{filter:drop-shadow(0 20px 34px rgba(255,120,120,.7)) brightness(1.08)}
}
.mascot-hero.is-alarm .mascot-img{animation:mascot-idle 6.2s ease-in-out infinite,mascot-glow-alarm 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.mascot-hero.is-alarm .mascot-img{animation:none}}

/* ---- Фоновый кластер на внутренних страницах (mountAmbient в mascot.js):
   увеличенное «эхо» иконки страницы (--decor, читается из body) в одном
   углу + сам робот в другом — некликабельные, за контентом, чтобы фон был
   таким же «живым», как на главной, без правок каждого шаблона. ---- */
.deco-echo{
  position:fixed;
  left:clamp(-60px,-6vw,-10px);
  top:clamp(-40px,-4vh,10px);
  width:clamp(220px,30vw,380px);
  aspect-ratio:1;
  background:center/contain no-repeat;
  opacity:.13;
  filter:blur(2px);
  z-index:-1;
  pointer-events:none;
  animation:mascot-idle 9s ease-in-out infinite;
}
.mascot-ambient{
  position:fixed;
  left:clamp(6px,2vw,28px);
  bottom:clamp(70px,16vh,170px);
  width:clamp(96px,11vw,150px);
  opacity:.3;
  z-index:1;
  pointer-events:none;
  transform:rotate(-9deg);
  filter:blur(.2px);
}
.mascot-ambient img{display:block;width:100%;height:auto;animation:mascot-idle 8.6s ease-in-out infinite,mascot-glow 8.6s ease-in-out infinite;filter:drop-shadow(0 16px 24px rgba(76,60,255,.45))}
@media(max-width:760px){.deco-echo{width:clamp(160px,40vw,240px)}.mascot-ambient{width:clamp(70px,16vw,100px);bottom:clamp(56px,12vh,110px)}}
@media(prefers-reduced-motion:reduce){.deco-echo,.mascot-ambient img{animation:none}}