/* Animations and visual effects */

/* Animated background waves */
.wave-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url('../img/wave.svg');
  background-size: 1000px 100px;
}

.wave.wave1 {
  animation: animate 30s linear infinite;
  z-index: 1000;
  opacity: 0.3;
  animation-delay: 0s;
  bottom: 0;
}

.wave.wave2 {
  animation: animate2 15s linear infinite;
  z-index: 999;
  opacity: 0.2;
  animation-delay: -5s;
  bottom: 10px;
}

.wave.wave3 {
  animation: animate 30s linear infinite;
  z-index: 998;
  opacity: 0.1;
  animation-delay: -2s;
  bottom: 15px;
}

.wave.wave4 {
  animation: animate2 5s linear infinite;
  z-index: 997;
  opacity: 0.05;
  animation-delay: -5s;
  bottom: 20px;
}

@keyframes animate {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1000px;
  }
}

@keyframes animate2 {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}

/* Floating animation for elements */
.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Gradient background animation */
.gradient-animation {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Video background */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-background video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 20, 46, 0.7);
  z-index: -1;
}

/* Particle animation */
.particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

/* Extended header with video background */
.extended-header {
  position: relative;
  height: 500px;
  width: 100%;
  overflow: hidden;
}

/* Stars animation */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('../img/stars.png');
  animation: animateStars 50s linear infinite;
}

@keyframes animateStars {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 10000px;
  }
}

/* Enhanced hero section with video background */
.video-hero {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 4rem;
  overflow: hidden;
  border-radius: 12px;
}

.video-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* Добавляем тень тексту для лучшей читаемости на видео */
}

/* Animated buttons */
.btn-animated {
  position: relative;
  overflow: hidden;
}

.btn-animated:after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: 0.5s;
  transform: skewX(-15deg);
}

.btn-animated:hover:after {
  left: 100%;
}

/* Ripple effect on buttons */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-ripple:hover:before {
  width: 300%;
  height: 300%;
}

/* Мобильная оптимизация анимаций */
@media (max-width: 768px) {
  /* Ускоряем анимации на мобильных для лучшей производительности */
  .wave.wave1 {
    animation-duration: 20s;
  }
  
  .wave.wave2 {
    animation-duration: 10s;
  }
  
  .wave.wave3 {
    animation-duration: 20s;
  }
  
  .wave.wave4 {
    animation-duration: 3s;
  }
  
  /* Уменьшаем сложность анимаций на мобильных */
  .floating {
    animation-duration: 4s;
  }
  
  .gradient-animation {
    animation-duration: 20s;
  }
  
  /* Оптимизируем ripple эффект для touch устройств */
  .btn-ripple:hover:before {
    width: 200%;
    height: 200%;
  }
  
  /* Уменьшаем количество частиц на мобильных */
  .particles-container .particle {
    animation-duration: 15s;
  }
}

@media (max-width: 480px) {
  /* Еще больше упрощаем анимации на маленьких экранах */
  .wave.wave1,
  .wave.wave2,
  .wave.wave3,
  .wave.wave4 {
    animation-duration: 15s;
  }
  
  .floating {
    animation-duration: 6s;
  }
  
  .gradient-animation {
    animation-duration: 25s;
  }
  
  /* Отключаем некоторые эффекты на очень маленьких экранах для производительности */
  .btn-ripple:hover:before {
    width: 150%;
    height: 150%;
  }
}