/* ==================== ПРОДВИНУТЫЕ АНИМАЦИИ И ЭФФЕКТЫ ==================== */

/* ==================== АНИМАЦИЯ МЕРЦАНИЯ ЗВЁЗД ==================== */

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Разные скорости мерцания для разных звёзд */
.star:nth-child(3n) {
  animation-duration: 2s;
}

.star:nth-child(3n+1) {
  animation-duration: 3s;
}

.star:nth-child(3n+2) {
  animation-duration: 4s;
}

/* Разные задержки */
.star:nth-child(5n) {
  animation-delay: 0s;
}

.star:nth-child(5n+1) {
  animation-delay: 0.5s;
}

.star:nth-child(5n+2) {
  animation-delay: 1s;
}

.star:nth-child(5n+3) {
  animation-delay: 1.5s;
}

.star:nth-child(5n+4) {
  animation-delay: 2s;
}

/* ==================== АНИМАЦИИ ВХОДА ==================== */

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Анимация при загрузке */
.animate-in {
  animation: slideInUp 0.6s ease-out forwards;
}

/* Пульсирующий эффект */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Мерцание */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-light) 50%, var(--surface) 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Вращение */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Подпрыгивание */
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.jump {
  animation: jump 0.6s ease-in-out;
}

/* Волна */
@keyframes wave {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.wave {
  animation: wave 1s ease-in-out infinite;
}

/* Мигание */
@keyframes blink {
  0%, 49%, 100% {
    opacity: 1;
  }
  50%, 99% {
    opacity: 0;
  }
}

.blink {
  animation: blink 1s infinite;
}

/* Гравитация */
@keyframes gravity {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.gravity {
  animation: gravity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Отскок */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Размытие входа */
@keyframes blur-in {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.blur-in {
  animation: blur-in 0.8s ease-out;
}

/* Эффект печатания */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.typing {
  animation: typing 3.5s steps(40, end);
  border-right: 3px solid var(--primary);
  white-space: nowrap;
  overflow: hidden;
}

/* Эффект подсветки */
@keyframes highlight {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(99, 102, 241, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.highlight {
  animation: highlight 2s ease-in-out;
}

/* Эффект тряски */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s;
}

/* Эффект поворота */
@keyframes flip {
  from {
    transform: perspective(400px) rotateY(0);
  }
  to {
    transform: perspective(400px) rotateY(360deg);
  }
}

.flip {
  animation: flip 0.6s;
}

/* Эффект растяжения */
@keyframes stretch {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.25);
  }
}

.stretch {
  animation: stretch 0.6s ease-in-out;
}

/* Эффект сжатия */
@keyframes squeeze {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
}

.squeeze {
  animation: squeeze 0.4s ease-in-out;
}

/* Эффект вращения входа */
@keyframes spin-in {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.spin-in {
  animation: spin-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Эффект слайда вниз */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down {
  animation: slide-down 0.5s ease-out;
}

/* Эффект слайда вверх */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slide-up 0.5s ease-out;
}

/* Эффект слайда влево */
@keyframes slide-left {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-left {
  animation: slide-left 0.5s ease-out;
}

/* Эффект слайда вправо */
@keyframes slide-right {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-right {
  animation: slide-right 0.5s ease-out;
}

/* Эффект радуги */
@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.rainbow {
  background: linear-gradient(270deg, #6366f1, #ec4899, #f59e0b, #10b981, #6366f1);
  background-size: 300% 300%;
  animation: rainbow 15s ease infinite;
}

/* Эффект свечения */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
  }
}

.glow {
  animation: glow 2s ease-in-out infinite;
}

/* Эффект мягкого свечения */
@keyframes soft-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.6));
  }
}

.soft-glow {
  animation: soft-glow 2s ease-in-out infinite;
}

/* Эффект градиента */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Эффект появления с задержкой */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Скорость анимации */
.fast { animation-duration: 0.3s; }
.normal { animation-duration: 0.6s; }
.slow { animation-duration: 1s; }
.slower { animation-duration: 1.5s; }
.slowest { animation-duration: 2s; }

/* Функции времени */
.ease-linear { animation-timing-function: linear; }
.ease-ease { animation-timing-function: ease; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }

/* Повторение */
.repeat-once { animation-iteration-count: 1; }
.repeat-twice { animation-iteration-count: 2; }
.repeat-infinite { animation-iteration-count: infinite; }

/* Направление */
.reverse { animation-direction: reverse; }
.alternate { animation-direction: alternate; }
.alternate-reverse { animation-direction: alternate-reverse; }

/* Заполнение */
.fill-forwards { animation-fill-mode: forwards; }
.fill-backwards { animation-fill-mode: backwards; }
.fill-both { animation-fill-mode: both; }

/* ==================== ПЕРЕХОДЫ ==================== */

.transition-all {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-colors {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.transition-transform {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-opacity {
  transition: opacity 0.3s ease;
}

.transition-shadow {
  transition: box-shadow 0.3s ease;
}

/* ==================== HOVER ЭФФЕКТЫ ==================== */

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-rotate:hover {
  transform: rotate(2deg);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.hover-brightness:hover {
  filter: brightness(1.1);
}

.hover-blur:hover {
  filter: blur(1px);
}

.hover-invert:hover {
  filter: invert(0.1);
}

.hover-saturate:hover {
  filter: saturate(1.2);
}

.hover-hue:hover {
  filter: hue-rotate(10deg);
}

.hover-grayscale:hover {
  filter: grayscale(0.5);
}

.hover-sepia:hover {
  filter: sepia(0.3);
}

.hover-drop-shadow:hover {
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}

/* ==================== FOCUS ЭФФЕКТЫ ==================== */

.focus-ring:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.focus-glow:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* ==================== АКТИВНЫЕ СОСТОЯНИЯ ==================== */

.active {
  color: var(--primary-light);
  font-weight: 600;
}

.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-light), var(--secondary));
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  /* Уменьшаем анимации на мобильных */
  .animate-in {
    animation-duration: 0.4s;
  }

  .hero h1 {
    animation-duration: 0.5s;
  }
}