@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Упрощенные анимации для лучшей производительности */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce-gentle {
  0%, 100% { transform: scale(1.1) translateY(0); }
  50% { transform: scale(1.1) translateY(-10px); }
}

@keyframes button-bounce {
  0%, 100% { transform: scale(1.05) translateY(0); }
  50% { transform: scale(1.05) translateY(-3px); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

@keyframes twinkle-slow {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.6; }
}

@keyframes twinkle-fast {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.9; }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 1s ease-out 0.3s both;
}

/* Плавное увеличение логотипа при наведении */
.logo-image {
  transition: transform 0.5s ease-in-out;
  transform-origin: center;
}

.logo-container:hover .logo-image,
.logo-image.touch-active {
  transform: scale(1.1);
  animation: bounce-gentle 0.8s ease-in-out infinite;
}

/* Анимация качания для кнопок при наведении */
.play-button:hover, .gitbook-button:hover,
.play-button.touch-active, .gitbook-button.touch-active {
  animation: button-bounce 0.6s ease-in-out infinite;
}

/* Стили для звезд на фоне с вариациями */
.star {
  animation: twinkle 3s ease-in-out infinite;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.7);
}

/* Вариации для разных звезд */
.star:nth-child(3n) {
  animation-name: twinkle-slow;
  animation-duration: 5s;
  background-color: #fbb6ce; /* розовый */
  box-shadow: 0 0 4px 1px rgba(251, 182, 206, 0.7);
}

.star:nth-child(5n) {
  animation-name: twinkle-fast;
  animation-duration: 2s;
  background-color: #c4b5fd; /* фиолетовый */
  box-shadow: 0 0 4px 1px rgba(196, 181, 253, 0.7);
}

.star:nth-child(7n) {
  background-color: #fef08a; /* желтый */
  box-shadow: 0 0 4px 1px rgba(254, 240, 138, 0.7);
}

/* Оптимизация производительности */
.star {
  will-change: opacity;
  backface-visibility: hidden;
}

/* Стили для тач-устройств */
@media (hover: none) and (pointer: coarse) {
  .logo-image, .play-button, .gitbook-button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  .logo-image:active, .play-button:active, .gitbook-button:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

/* Отключаем анимации для пользователей, которые предпочитают уменьшенное движение */
@media (prefers-reduced-motion: reduce) {
  .star, .logo-image, .animate-fade-in, .animate-fade-in-up, .play-button, .gitbook-button {
    animation: none !important;
    transition: none !important;
  }
}