/* ==================================================================
 * rsp-icon-fx.css — универсальные эффекты для иконок rsp-lib
 * v2 — фикс формы (всегда круг 56×56) + приглушённое свечение
 *
 * Применяется к:
 *   .rsp-tizer__icon      (главная страница — 4 тизера)
 *   .ba-stat-card__icon   (73 блог-статьи + 4 раздела каталога)
 *   .ba-info-card__icon   (60 блог-статей + 4 раздела каталога)
 *
 * Эффекты:
 *   A — Hover Glow + Tilt  → только на устройствах с (hover: hover)
 *   C — Scroll Flash       → только на touch/mobile (max-width: 700px)
 *
 * Файл подключается ТОЛЬКО на SITE_ID=s2 (raspilim.com).
 * ================================================================== */

/* --- База: круглый контейнер 56×56 (перебивает inline-стили статей) --- */
.rsp-tizer__icon,
.ba-stat-card__icon,
.ba-info-card__icon {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e6fbfb, #d4f4f6) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 0 0 1px rgba(0, 200, 214, .14);
  transition: background .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s cubic-bezier(.22, 1, .36, 1),
              transform .35s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
  vertical-align: middle;
}

/* Обёртка вокруг __icon, чтобы центрирование работало для inline-flex */
.rsp-tizer,
.ba-stat-card,
.ba-info-card {
  text-align: center;
}

/* Иконка img внутри */
.rsp-tizer__icon .rsp-ico,
.ba-stat-card__icon .rsp-ico,
.ba-info-card__icon .rsp-ico {
  width: 32px !important;
  height: 32px !important;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              filter .35s ease;
}

/* =====================================================================
 * ЭФФЕКТ A — Hover Glow + Tilt (только на десктопе)
 * Приглушённое свечение (v2): opacity .35 вместо .55, размер scale уменьшен
 * ===================================================================== */
@media (hover: hover) and (pointer: fine) {

  .rsp-tizer__icon:hover,
  .rsp-tizer:hover .rsp-tizer__icon,
  .ba-stat-card__icon:hover,
  .ba-stat-card:hover .ba-stat-card__icon,
  .ba-info-card__icon:hover,
  .ba-info-card:hover .ba-info-card__icon {
    background: linear-gradient(135deg, #00c8d6, #00e9eb) !important;
    box-shadow: 0 3px 14px rgba(0, 200, 214, .18),
                0 0 0 3px rgba(0, 200, 214, .05) !important;
    transform: scale(1.08) rotate(-5deg) !important;
  }

  .rsp-tizer__icon:hover .rsp-ico,
  .rsp-tizer:hover .rsp-tizer__icon .rsp-ico,
  .ba-stat-card__icon:hover .rsp-ico,
  .ba-stat-card:hover .ba-stat-card__icon .rsp-ico,
  .ba-info-card__icon:hover .rsp-ico,
  .ba-info-card:hover .ba-info-card__icon .rsp-ico {
    transform: scale(1.10) !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .14)) brightness(1.05) !important;
  }
}

/* =====================================================================
 * ЭФФЕКТ C — Scroll-triggered Flash (только на touch/mobile)
 * Приглушённое свечение (v2): opacity .5 вместо .75, скейлы мягче
 * ===================================================================== */
@keyframes rspFxFlashC {
  0% {
    transform: scale(.88);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 214, .14),
                0 0 0 0 rgba(0, 200, 214, 0);
  }
  45% {
    transform: scale(1.10);
    box-shadow: 0 0 16px rgba(0, 200, 214, .28),
                0 0 0 4px rgba(0, 200, 214, .08);
    background: linear-gradient(135deg, #00c8d6, #00e9eb) !important;
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 214, .14),
                0 0 0 0 rgba(0, 200, 214, 0);
  }
}
@keyframes rspFxFlashCIcon {
  0% {
    transform: scale(.7) rotate(-16deg);
    opacity: .5;
  }
  50% {
    transform: scale(1.16) rotate(3deg);
    opacity: 1;
    filter: drop-shadow(0 3px 8px rgba(0, 200, 214, .25));
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
    filter: none;
  }
}

@media (hover: none), (max-width: 700px) {
  .rsp-tizer.is-fx-in-view .rsp-tizer__icon,
  .ba-stat-card.is-fx-in-view .ba-stat-card__icon,
  .ba-info-card.is-fx-in-view .ba-info-card__icon {
    animation: rspFxFlashC 1.3s cubic-bezier(.22, 1, .36, 1);
  }
  .rsp-tizer.is-fx-in-view .rsp-tizer__icon .rsp-ico,
  .ba-stat-card.is-fx-in-view .ba-stat-card__icon .rsp-ico,
  .ba-info-card.is-fx-in-view .ba-info-card__icon .rsp-ico {
    animation: rspFxFlashCIcon 1.3s cubic-bezier(.22, 1, .36, 1);
  }
}

/* =====================================================================
 * Респект prefers-reduced-motion
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rsp-tizer__icon, .ba-stat-card__icon, .ba-info-card__icon,
  .rsp-tizer__icon .rsp-ico, .ba-stat-card__icon .rsp-ico, .ba-info-card__icon .rsp-ico {
    transition: none !important;
    animation: none !important;
  }
}