/* ============================================================
   Плавающий блок акции (components/promo-float.njk) — страницы услуг.

   Мобильный: бейдж «%» выглядывает из-за ПРАВОГО края по центру экрана
   по вертикали, тап — плашка с названием. Десктоп: сразу карточка с названием и строкой
   описания. Крестик — совсем спрятать до перехода на другую страницу.

   Десктоп — высота над низом calc(база + --pf-lift): пока виден cookie-баннер,
   site.js поднимает блок над ним (--pf-lift = высота баннера), иначе
   баннер закрыл бы его, а баннер многие так и не закрывают.
   z-index 45 — ниже шапки (50–60) и мобильного меню: открытое меню
   блок перекрывает.
   ============================================================ */
.promo-float {
  --pf-lift: 0px;
  position: fixed;
  left: 24px;
  bottom: calc(24px + var(--pf-lift));
  z-index: 45;
  font-family: var(--font-body);
  transition: bottom 220ms var(--ease-out, ease-out);
}
.promo-float[hidden] { display: none; }

/* ---------- кнопка-мордочка (только мобильный) ---------- */
.promo-float__tab { display: none; }

/* ---------- карточка ---------- */
.promo-float__card {
  position: relative;
  width: 360px;
  border-radius: var(--r-lg);
  background: var(--brand-navy);
  box-shadow: 0 18px 44px rgba(1, 33, 105, .28);
  animation: pfIn 420ms var(--ease-out, ease-out) both;
}
.promo-float__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 44px 14px 14px;
  border-radius: inherit;
  color: #fff;
  text-decoration: none;
}
.promo-float__link:hover { color: #fff; text-decoration: none; }
.promo-float__thumb {
  flex: none;
  width: 60px;
  height: 60px;
  /* Покачивается — и клик по нему должен уходить ссылке, а не картинке */
  pointer-events: none;
  animation: pfWobble 6s ease-in-out infinite;
}
.promo-float__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.promo-float__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-fuchsia-300);
}
.promo-float__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
}
.promo-float__text { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
/* Отдельной кнопки перехода нет: вся плашка — ссылка, кроме крестика */
.promo-float__card { cursor: pointer; }
.promo-float__link:hover .promo-float__title { color: var(--brand-fuchsia-300); }
.promo-float__title { transition: color 150ms; }
.promo-float__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms;
}
.promo-float__close:hover { background: rgba(255, 255, 255, .24); }

@keyframes pfIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Мобильный: бейдж выглядывает из-за правого края, по центру экрана.
   Cookie-баннер снизу ему не мешает — --pf-lift здесь не нужен.
   ============================================================ */
@media (max-width: 860px) {
  .promo-float {
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .promo-float__tab {
    display: block;
    position: relative;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Треть бейджа за краем экрана — «выглядывает». Раз в несколько секунд
       высовывается сильнее с покачиванием и прячется обратно. */
    transform: translateX(24px);
    animation: pfPeek 5s ease-in-out 1.2s infinite;
  }
  .promo-float__tab img { width: 100%; height: 100%; display: block; pointer-events: none; }
  /* Пульс — мягкий фуксиевый ореол вокруг бейджа (как точка у бейджа в меню) */
  .promo-float__tab::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--brand-fuchsia);
    opacity: 0;
    z-index: -1;
    animation: pfPing 2.4s ease-out infinite;
  }

  /* Плашка на мобильном закрыта, пока не тапнули по бейджу. Выезжает
     справа, по центру на уровне бейджа. */
  .promo-float__card {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: min(320px, calc(100vw - 24px));
  }
  .promo-float.is-open .promo-float__card { display: block; animation: pfSlide 260ms var(--ease-out, ease-out) both; }
  .promo-float.is-open .promo-float__tab { visibility: hidden; }

  .promo-float__link { padding: 12px 42px 12px 12px; gap: 12px; }
  .promo-float__thumb { width: 50px; height: 50px; }
  .promo-float__title { font-size: 16px; }
  /* На мобильном — только название, как договорились */
  .promo-float__text { display: none; }
}

@keyframes pfPeek {
  0%, 70%, 100% { transform: translateX(24px) rotate(0); }
  78%           { transform: translateX(4px) rotate(14deg); }
  86%           { transform: translateX(8px) rotate(-10deg); }
}
@keyframes pfPing {
  0%        { transform: scale(.9);  opacity: .45; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
/* Бейдж в карточке медленно покачивается — «живой», но не отвлекает */
@keyframes pfWobble {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-10deg); }
}
/* Плашка центрована translateY(-50%) — держим его в обоих кадрах */
@keyframes pfSlide {
  from { opacity: 0; transform: translate(24px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-float, .promo-float__card, .promo-float__tab, .promo-float__tab::after, .promo-float__thumb,
  .promo-float.is-open .promo-float__card { animation: none; transition: none; }
}