/* 
 * FAB Buttons (Floating Action Buttons) - Плавающие кнопки
 * AI Studio (синяя) + Glorious Blog (желтая)
 * Автор: Claude | Дата: 2025-01-15
 */

/* ========================================
   ОСНОВНЫЕ СТИЛИ КНОПОК
   ======================================== */

.fab-container {
  position: fixed;
  z-index: 9999;
  pointer-events: none; /* Клик проходит сквозь контейнер */
}

/* Левая кнопка (AI Studio - синяя) */
.fab-left {
  left: 80px;
  bottom: 170px;
}

/* Правая кнопка (Glorious Blog - желтая) */
.fab-right {
  right: 80px;
  bottom: 170px;
}

/* Ссылка кнопки */
.fab-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  pointer-events: auto; /* Включаем клик для ссылки */
  transition: transform 0.3s ease;
}

.fab-link:hover {
  transform: translateY(-5px);
}

/* ========================================
   ИКОНКА КНОПКИ
   ======================================== */

.fab-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Синяя кнопка (AI Studio) */
.fab-blue {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.fab-blue:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

/* Желтая кнопка (Glorious Blog) */
.fab-yellow {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.fab-yellow:hover {
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
  box-shadow: 0 6px 20px rgba(245, 87, 108, 0.5);
}

/* Изображение иконки */
.fab-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.fab-link:hover .fab-icon {
  transform: scale(1.1) rotate(5deg);
}

/* ========================================
   ТЕКСТ ПОД КНОПКОЙ
   ======================================== */

.fab-label {
  margin-top: 12px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Синий текст */
.fab-label-blue {
  color: #667eea;
}

.fab-link:hover .fab-label-blue {
  color: #764ba2;
  text-shadow: 2px 2px 6px rgba(102, 126, 234, 0.5);
}

/* Желтый/розовый текст */
.fab-label-yellow {
  color: #f5576c;
}

.fab-link:hover .fab-label-yellow {
  color: #f093fb;
  text-shadow: 2px 2px 6px rgba(245, 87, 108, 0.5);
}

/* ========================================
   АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА)
   ======================================== */

@media (max-width: 768px) {
  /* Уменьшаем размер на планшетах */
  .fab-left {
    left: 40px;
    bottom: 120px;
  }
  
  .fab-right {
    right: 40px;
    bottom: 120px;
  }
  
  .fab-icon-wrapper {
    width: 60px;
    height: 60px;
  }
  
  .fab-icon {
    width: 35px;
    height: 35px;
  }
  
  .fab-label {
    font-size: 11px;
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  /* Еще меньше на мобильных */
  .fab-left {
    left: 20px;
    bottom: 80px;
  }
  
  .fab-right {
    right: 20px;
    bottom: 80px;
  }
  
  .fab-icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .fab-icon {
    width: 30px;
    height: 30px;
  }
  
  .fab-label {
    font-size: 9px;
    margin-top: 6px;
    letter-spacing: 0.5px;
  }
}

/* ========================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ
   ======================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fab-container {
  animation: fadeInUp 0.6s ease-out;
}

/* Задержка для правой кнопки */
.fab-right {
  animation: fadeInUp 0.6s ease-out 0.2s backwards;
}