/* ═══════════════════════════════════════════════════════════════════════════
   Этап 288: Виджет-маскот для лендинга analitika-marketpleijsov.ru
   Слева снизу — анимированный персонаж с речевым облачком и кнопкой
   «Смотреть обзор». При клике открывается модалка с полным видео-обзором.
   ═══════════════════════════════════════════════════════════════════════════ */

.mp-widget {
  position: fixed;
  left: 22px;
  bottom: 0;
  z-index: 9999;
  width: 200px;
  transform-origin: bottom left;
  overflow: visible;
  transition: transform .45s cubic-bezier(.2,.9,.25,1), opacity .35s ease;
}
.mp-widget.hidden {
  transform: translateY(18px) scale(.6);
  opacity: 0;
  pointer-events: none;
}
.mp-ground {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 120px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(60,30,110,.20), rgba(60,30,110,0));
  z-index: 0;
}
.mp-figure {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
  /* Этап 298: animated WebP с настоящим alpha-каналом → drop-shadow
     работает корректно (рисует тень по силуэту маскота). */
  filter: drop-shadow(0 12px 18px rgba(86,40,160,.18));
}
.mp-figure video,
.mp-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.mp-close {
  position: absolute;
  top: 10px;
  left: 2px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(40,20,80,.20);
  color: #5b5f72;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s ease, background .18s, color .18s, box-shadow .18s;
}
.mp-close:hover {
  background: #6a39d6;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(106,57,214,.45);
}
.mp-close:active { transform: scale(.94); }
.mp-close svg { width: 15px; height: 15px; }

.mp-bubble {
  position: absolute;
  top: 2px;
  left: 166px;
  z-index: 4;
  width: 188px;
  background: #fff;
  color: #272b3a;
  font-size: 13px;
  line-height: 1.42;
  padding: 11px 13px 12px;
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(40,20,80,.18);
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transform-origin: bottom left;
  transition: opacity .28s ease, transform .3s cubic-bezier(.2,1.25,.4,1);
  pointer-events: none;
}
.mp-bubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mp-bubble::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 18px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -2px 2px 4px rgba(40,20,80,.06);
}
.mp-cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: #6a39d6;
  vertical-align: -2px;
  animation: mpBlink 1s steps(1) infinite;
}
@keyframes mpBlink {
  50% { opacity: 0; }
}
.mp-cta {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 7px 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #6a39d6, #3a2a9e);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(106,57,214,.35);
  animation: mpRise .35s ease both;
  transition: transform .15s ease, box-shadow .15s;
}
.mp-cta.show { display: inline-flex; }
.mp-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(106,57,214,.55); }
.mp-cta:active { transform: translateY(0) scale(.97); }
.mp-cta .pl {
  width: 0;
  height: 0;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
@keyframes mpRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mp-reopen {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  overflow: visible;
  background: #fff;
  box-shadow: 0 8px 22px rgba(60,30,110,.28);
  transform: scale(0);
  opacity: 0;
  transform-origin: bottom left;
  transition: transform .4s cubic-bezier(.2,1.3,.4,1), opacity .3s, box-shadow .2s;
}
.mp-reopen.show { transform: scale(1); opacity: 1; }
.mp-reopen:hover { box-shadow: 0 10px 26px rgba(106,57,214,.45); }
.mp-reopen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.mp-reopen .dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2ecf72;
  border: 2px solid #fff;
}
.mp-reopen .ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #6a39d6;
  opacity: 0;
  animation: mpPulse 2.4s ease-out infinite;
}
@keyframes mpPulse {
  0%   { transform: scale(.9);  opacity: .5; }
  100% { transform: scale(1.25); opacity: 0; }
}

.mp-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20,12,40,.6);
  backdrop-filter: blur(3px);
  padding: 18px;
}
.mp-modal.open {
  display: flex;
  animation: mpFade .2s ease both;
}
@keyframes mpFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mp-modal__card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0e0a18;
  box-shadow: 0 30px 80px rgba(20,10,50,.45);
  animation: mpPop .28s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes mpPop {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.mp-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  transition: background .15s;
}
.mp-modal__close:hover { background: #6a39d6; }
.mp-modal__card video {
  display: block;
  height: min(86vh, 1000px);
  width: auto;
  max-width: 92vw;
  background: #0e0a18;
}

@media (max-width: 520px) {
  .mp-widget { width: 150px; left: 12px; }
  .mp-bubble { left: 120px; width: 140px; font-size: 12px; }
  .mp-reopen { left: 14px; bottom: 14px; }
  .mp-modal__card video {
    width: 92vw;
    height: auto;
    max-height: 86vh;
  }
}