/* =========================================================
   СЕКЦИИ "НАШИ ПРЕИМУЩЕСТВА" И "КАК ЗАПИСАТЬСЯ"
   Анимация парения для изображений карточек
   ========================================================= */

/* Базовые стили для парящих изображений */
.online-float-img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  height: auto;
  animation: onlineFloatBounce 4s ease-in-out infinite;
  --float-distance: -12px;
}

@keyframes onlineFloatBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(var(--float-distance)); }
}

/* Модификаторы для разных размеров */
.online-float-img--sm {
  width: 100px;
  max-width: 50%;
}

.online-float-img--md {
  width: 150px;
  max-width: 70%;
}

.online-float-img--lg {
  width: 200px;
  max-width: 280px;
}

/* Карточки с парящими изображениями */
.online-card-float {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
  padding: 95px 10px 28px;
}

.online-card-float--gray  { background: #f1f3f5; color: #212529; }
.online-card-float--blue  { background: #dbeafe; color: #1e3a8a; }
.online-card-float--white { background: #ffffff; color: #212529; }

/* =========================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ========================================================= */
@media (max-width: 767.98px) {
  .online-card-float {
    padding: 45px 15px 18px;
  }

  .online-float-img {
    --float-distance: -6px;
  }

  .online-float-img--sm {
    width: 60px;
  }

  .online-float-img--md {
    width: 80px;
  }

  .online-float-img--lg {
    width: 110px;
  }
}

@media (max-width: 480px) {
  .online-float-img {
    --float-distance: -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-float-img {
    animation: none !important;
  }
}