/* mascot.css — маскот-гид Нески (логика в static/js/mascot.js).
   Цвета, радиусы, тени и шрифты — только из _tokens.css. */

/* ── Фигура ───────────────────────────────────────────── */
.neski {
  --neski-size: 88px;
  --neski-look-x: 0px;
  --neski-look-y: 0px;
  --neski-tilt: 0deg;
  position: relative;
  flex-shrink: 0;
  width: var(--neski-size);
  pointer-events: auto; /* тап — прыжок и «мяу» (mascot.js, boop) */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.neski__sway {
  transform-origin: 50% 100%;
  animation: neskiJelly 3.6s ease-in-out infinite;
}
.neski--flip .neski__sway { scale: -1 1; }
/* Готовые картинки из static/images/mascot/: движение и ореол уже в них */
.neski--img .neski__sway { animation: none; }
.neski--img .neski__img { filter: none; }

.neski__svg,
.neski__img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.neski__svg { filter: drop-shadow(0 10px 12px var(--neski-glow)); }
.neski__img { aspect-ratio: 1; object-fit: contain; }

/* Палитра персонажа */
.nk-s-body-light { stop-color: var(--neski-body-light); }
.nk-s-body       { stop-color: var(--neski-body); }
.nk-s-body-deep  { stop-color: var(--neski-body-deep); }
.nk-f-knot   { fill: var(--neski-knot); }
.nk-string   { fill: none; stroke: var(--neski-string); stroke-width: 1.6; stroke-linecap: round; }
.nk-f-shine  { fill: var(--neski-shine); opacity: .85; }
.nk-f-eye    { fill: var(--neski-eye); }
/* веки и ухмылка — одна тёмная линия */
.nk-line     { fill: none; stroke: var(--neski-eye); stroke-width: 3.2; stroke-linecap: round; }
.nk-f-letter { fill: var(--neski-white); opacity: .94; }
.nk-f-letter-shadow { fill: var(--neski-letter-shadow); opacity: .5; }

/* Глаза: моргание и взгляд (--neski-look-x/y ставит mascot.js) */
.neski-eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .07s ease;
}
.neski.is-blinking .neski-eye { transform: scaleY(.08); }
.neski-look {
  transform: translate(var(--neski-look-x), var(--neski-look-y));
  transition: transform var(--t-slow);
}

.neski-brow {
  fill: none;
  stroke: var(--neski-eye);
  stroke-width: 3;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--t);
}
.neski-wink {
  display: none;
  fill: none;
  stroke: var(--neski-eye);
  stroke-width: 3.2;
  stroke-linecap: round;
}
.neski-mouth-sad {
  display: none;
  fill: none;
  stroke: var(--neski-eye);
  stroke-width: 3.2;
  stroke-linecap: round;
}

/* ── Позы (без ручек: всё телом, глазами и лицом) ── */
/* hello — приветственный подскок с покачиванием */
.neski--hello .neski__sway { animation: neskiHello 1.8s ease-in-out infinite; }

/* point — наклон и взгляд в сторону подсвеченного элемента */
.neski--point .neski__sway {
  transform: rotate(var(--neski-tilt));
  animation: neskiNudge 1.4s ease-in-out infinite;
}

/* sad — осел, брови домиком, рот вниз, смотрит вниз */
.neski--sad { --neski-look-y: 2.5px; }
.neski--sad .neski__sway { animation: neskiSigh 4.5s ease-in-out infinite; }
.neski--sad .neski-brow--l { transform: translateY(2px) rotate(-16deg); }
.neski--sad .neski-brow--r { transform: translateY(2px) rotate(30deg); }
.neski--sad .neski-mouth-happy { display: none; }
.neski--sad .neski-mouth-sad { display: inline; }

/* party — прыжки с «желейным» сжатием */
.neski--party .neski__sway { animation: neskiJump .75s cubic-bezier(.3,.7,.4,1) infinite; }
.neski--party .neski-brow { transform: translateY(-2px); }

/* prime — подмигивает, чуть наклонён */
.neski--prime .neski__sway { animation: neskiPrime 2.2s ease-in-out infinite; }
.neski--prime .neski-eye--r { display: none; }
.neski--prime .neski-wink { display: inline; }

/* peek — выглядывает из-за края и оглядывается */
.neski--peek .neski-look { animation: neskiLookAround 3.4s ease-in-out both; }

@keyframes neskiJelly {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-2%) scale(.985, 1.02); }
}
@keyframes neskiHello {
  0%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
  15%      { transform: translateY(0) rotate(0) scale(1.06, .94); }
  30%      { transform: translateY(-9%) rotate(-5deg) scale(.97, 1.04); }
  45%      { transform: translateY(0) rotate(0) scale(1.03, .97); }
  60%      { transform: translateY(-5%) rotate(5deg) scale(.98, 1.02); }
  75%      { transform: translateY(0) rotate(0) scale(1, 1); }
}
@keyframes neskiNudge {
  0%, 100% { transform: rotate(var(--neski-tilt)) translateY(0); }
  50%      { transform: rotate(calc(var(--neski-tilt) * 1.5)) translateY(-3%); }
}
@keyframes neskiSigh {
  0%, 100% { transform: translateY(0) scale(1, .96); }
  50%      { transform: translateY(1%) scale(1.02, .93); }
}
@keyframes neskiJump {
  0%, 100% { transform: translateY(0) scale(1.08, .92); }
  30%      { transform: translateY(-16%) scale(.94, 1.07); }
  60%      { transform: translateY(-5%) scale(1, 1); }
}
@keyframes neskiPrime {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-4%); }
}
@keyframes neskiLookAround {
  0%, 20%  { transform: translate(0, 0); }
  35%, 55% { transform: translate(-3.5px, -1px); }
  70%, 85% { transform: translate(3px, 1px); }
  100%     { transform: translate(-2px, 0); }
}

/* ── Выглядывание из-за правого края ───────────────────── */
.neski-peek {
  position: fixed;
  z-index: 700;
  right: 0;
  top: 60%;
  width: 72px;
  transform: translateX(34%) rotate(-14deg);
  transform-origin: 100% 50%;
  animation: neskiPeekIn .6s cubic-bezier(.34,1.56,.64,1) both;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.neski-peek .neski { --neski-size: 72px; pointer-events: auto; }
.neski-peek.is-leaving { animation: neskiPeekOut .45s cubic-bezier(.5,-.3,.8,.4) both; }
@keyframes neskiPeekIn {
  from { transform: translateX(110%) rotate(-14deg); }
  to   { transform: translateX(34%) rotate(-14deg); }
}
@keyframes neskiPeekOut {
  from { transform: translateX(34%) rotate(-14deg); }
  to   { transform: translateX(110%) rotate(-14deg); }
}

/* ── Док: Нески + облачко внизу экрана ────────────────── */
.neski-dock {
  --neski-x: -50%;
  position: fixed;
  z-index: 9720;
  left: 50%;
  bottom: calc(var(--gap-lg) + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100% - 2 * var(--gap)));
  display: flex;
  align-items: flex-end;
  gap: var(--gap-sm);
  font-family: var(--font);
  transform: translateX(var(--neski-x));
  animation: neskiIn .6s cubic-bezier(.34,1.56,.64,1) both;
  pointer-events: none;
}
.neski-dock.is-top {
  bottom: auto;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--gap));
  align-items: flex-start;
  animation-name: neskiInTop;
}
.neski-dock.is-leaving { animation: neskiOut .32s cubic-bezier(.5,-.3,.8,.4) both; }
.neski-dock.is-top.is-leaving { animation-name: neskiOutTop; }
.neski-dock .neski { --neski-size: 104px; }

.neski-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-bottom: var(--gap-lg);
  padding: var(--gap) var(--gap-md);
  /* Непрозрачная подложка: облачко не сереет поверх затемнения спотлайта */
  background: linear-gradient(var(--bg-elevated), var(--bg-elevated)), var(--bg-base);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}
.neski-dock.is-top .neski-bubble { margin-bottom: 0; margin-top: var(--gap-lg); }
.neski-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 22px;
  width: 13px;
  height: 13px;
  background: inherit;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.neski-dock.is-top .neski-bubble::before { bottom: auto; top: 22px; }
.neski-dock--moment .neski-bubble { cursor: pointer; }

.neski-bubble__name {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--brand);
}
.neski-bubble__text {
  margin: 2px 0 0;
  font-size: var(--fs-md);
  font-weight: 750;
  line-height: 1.35;
  color: var(--text-primary);
}
.neski-bubble__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-sm);
  margin-top: var(--gap);
}
.neski-bubble__dots {
  display: flex;
  gap: var(--gap-xs);
  margin-right: auto;
}
.neski-bubble__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--line);
}
.neski-bubble__dot.is-active { background: var(--brand); }
.neski-bubble__actions .btn { white-space: nowrap; }

@keyframes neskiIn {
  from { opacity: 0; transform: translate(var(--neski-x), 130%); }
  to   { opacity: 1; transform: translate(var(--neski-x), 0); }
}
@keyframes neskiInTop {
  from { opacity: 0; transform: translate(var(--neski-x), -130%); }
  to   { opacity: 1; transform: translate(var(--neski-x), 0); }
}
@keyframes neskiOut {
  from { opacity: 1; transform: translate(var(--neski-x), 0); }
  to   { opacity: 0; transform: translate(var(--neski-x), 130%); }
}
@keyframes neskiOutTop {
  from { opacity: 1; transform: translate(var(--neski-x), 0); }
  to   { opacity: 0; transform: translate(var(--neski-x), -130%); }
}

/* Конец онбординга: Нески вприпрыжку уходит за край экрана (mascot.js, danceAway) */
.neski-exit {
  position: fixed;
  z-index: 9721;
  pointer-events: none;
  animation: neskiExitRun 1.9s cubic-bezier(.45,0,.7,.55) .1s both;
}
.neski-exit .neski {
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: neskiDanceHop .38s ease-in-out infinite;
}
@keyframes neskiExitRun {
  0%   { transform: translateX(0); }
  14%  { transform: translateX(calc(var(--exit-dir) * -14px)); }
  100% { transform: translateX(var(--exit-dx)); }
}
@keyframes neskiDanceHop {
  0%, 100% { transform: translateY(0) rotate(-8deg) scale(1.04, .96); }
  50%      { transform: translateY(-20%) rotate(8deg) scale(.97, 1.03); }
}

/* ── Спотлайт онбординга ──────────────────────────────── */
.neski-blocker {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: transparent;
  touch-action: none;
}
.neski-spot {
  position: fixed;
  z-index: 9710;
  border-radius: var(--radius);
  box-shadow: 0 0 0 200vmax var(--neski-scrim);
  pointer-events: none;
  transition: top var(--t-slow), left var(--t-slow), width var(--t-slow), height var(--t-slow), border-radius var(--t-slow);
  animation: neskiFade .3s ease both;
}
.neski-spot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px solid var(--brand-2);
  border-radius: inherit;
  animation: neskiPulse 1.6s ease-in-out infinite;
}
@keyframes neskiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes neskiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.04); }
}

/* ── Пустые состояния ─────────────────────────────────── */
.neski-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-lg) var(--gap-md);
  text-align: center;
  font-family: var(--font);
}
.neski-empty .neski { --neski-size: 120px; margin-bottom: var(--gap-xs); }
.neski-empty__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-primary);
}
.neski-empty__text {
  max-width: 280px;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.45;
  color: var(--text-secondary);
}
.neski-empty__cta { margin-top: var(--gap-xs); }

/* Карточка «Рядом пока тихо» поверх карты */
.neski-empty--map {
  position: fixed;
  z-index: 600;
  left: 50%;
  top: 50%;
  width: min(320px, calc(100% - 2 * var(--gap-md)));
  transform: translate(-50%, -50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: neskiFade .3s ease both;
}
.neski-empty__close {
  position: absolute;
  top: var(--gap-sm);
  right: var(--gap-sm);
  width: var(--btn-h-sm);
  height: var(--btn-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
}
.neski-empty__close:hover { background: var(--brand-soft); color: var(--text-primary); }

/* ── Мобильные: не перекрываем нижнюю навигацию ───────── */
@media (max-width: 767px) {
  body.has-bottom-nav .neski-dock:not(.is-top) {
    bottom: calc(var(--mob-nav-h) + var(--gap));
  }
  .neski-dock .neski { --neski-size: 78px; }
  .neski-bubble { padding: var(--gap); }
  .neski-dock { gap: var(--gap-xs); }
  .neski-bubble__text { font-size: var(--fs); }
}

/* ── Десктоп: док в правом нижнем углу ─────────────────── */
@media (min-width: 768px) {
  .neski-dock {
    --neski-x: 0px;
    left: auto;
    right: var(--gap-lg);
  }
}

/* ── Без анимаций ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .neski__sway,
  .neski-look,
  .neski-peek,
  .neski-peek.is-leaving,
  .neski-eye,
  .neski-brow,
  .neski-dock,
  .neski-dock.is-leaving,
  .neski-exit,
  .neski-exit .neski,
  .neski-spot,
  .neski-spot::after,
  .neski-empty--map {
    animation: none !important;
    transition: none !important;
  }
}

/* Тап по Неско: подпрыгивает с «желейным» приземлением */
.neski.is-boop { animation: neskiBoop .55s cubic-bezier(.3,.7,.4,1); }
@keyframes neskiBoop {
  0%   { transform: translateY(0) scale(1, 1); }
  18%  { transform: translateY(0) scale(1.12, .86); }
  45%  { transform: translateY(-22%) scale(.92, 1.1); }
  75%  { transform: translateY(0) scale(1.08, .9); }
  100% { transform: translateY(0) scale(1, 1); }
}