:root {
    --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #f1f5f9;
    color: #1e293b;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Анимация медленного вращения солнца */
@keyframes sun-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Базовая анимация */
.animate-sun {
    animation: sun-spin 20s linear infinite;
    transition: animation-duration 0.5s var(--ease-out-smooth); /* Плавное ускорение */
}

/* Ускорение при наведении на родительскую группу (ссылку) */
.group:hover .animate-sun {
    animation-duration: 3s;
}

/* Скрытие скроллбара */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scroll::-webkit-scrollbar { width: 5px; }
.custom-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* Плавное появление контента */
.page-enter {
    animation: fadeIn 0.5s var(--ease-out-smooth);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =================== АДАПТИВНОСТЬ =================== */

/* Мелкие экраны — телефоны */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .animate-sun {
        width: 60px;
        height: 60px;
    }

    .custom-scroll::-webkit-scrollbar { width: 3px; }

    .page-enter {
        animation: fadeIn 0.4s var(--ease-out-smooth);
    }
}

/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 15px;
    }

    .animate-sun {
        width: 80px;
        height: 80px;
    }
}

@keyframes sleep-fly {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.7);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(8px, -12px) scale(1.1);
    }
}

.sleep-z {
    position: absolute;
    font-size: 10px;
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    animation: sleep-fly 2.5s infinite ease-in-out;
    opacity: 0;
    text-shadow: 0 0 3px rgba(251,191,36,0.7);
}

.z1 { animation-delay: 0s; }
.z2 { animation-delay: 0.8s; left: 5px; }
.z3 { animation-delay: 1.6s; left: 10px; }


.animate-slide-in {
  animation: slideIn 0.8s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Подпрыгивание коробки */
.animate-bounce {
  animation: bounce 1.6s infinite alternate;
}

@keyframes bounce {
  0% {
    transform: translateY(0) scale(1, 1);
  }

  10% {
    transform: translateY(0) scale(1.05, 0.95); /* сжатие */
  }

  30% {
    transform: translateY(-14px) scale(0.98, 1.02); /* прыжок */
  }

  50% {
    transform: translateY(-10px) scale(1, 1);
  }

  70% {
    transform: translateY(0) scale(0.97, 1.03); /* приземление */
  }

  100% {
    transform: translateY(0) scale(1, 1);
  }
}


@keyframes sb-online-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.03);
    opacity: 0.96;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.sb-online-indicator {
  animation: sb-online-pulse 4.8s ease-in-out infinite;
}