/* Clouds Background for Hero Section - Realistic Cloud Design */
.clouds-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Базовые стили для реалистичных облаков */
.cloud {
  position: absolute;
  background: #ffffff;
  border-radius: 200px;
  opacity: 0.9;
  filter: blur(4px);
  box-shadow: 
    0 8px 32px rgba(255, 255, 255, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 2px 8px rgba(255, 255, 255, 0.6);
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cloud:before,
.cloud:after {
  content: '';
  position: absolute;
  background: #ffffff;
  border-radius: 200px;
  box-shadow: 
    0 4px 16px rgba(255, 255, 255, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 4px rgba(255, 255, 255, 0.5);
  filter: blur(3px);
}

/* Cloud 1 - Большое пушистое облако */
.cloud1 {
  width: 350px;
  height: 120px;
  top: 15%;
  left: -350px;
  animation: cloud-move 30s linear infinite;
  border-radius: 150px;
}

.cloud1:before {
  width: 100px;
  height: 100px;
  top: -50px;
  left: 30px;
  border-radius: 100px;
}

.cloud1:after {
  width: 120px;
  height: 120px;
  top: -60px;
  right: 40px;
  border-radius: 120px;
}

/* Cloud 2 - Среднее облако */
.cloud2 {
  width: 400px;
  height: 130px;
  top: 35%;
  left: -400px;
  animation: cloud-move 35s linear infinite;
  animation-delay: -5s;
  border-radius: 160px;
}

.cloud2:before {
  width: 110px;
  height: 110px;
  top: -55px;
  left: 40px;
  border-radius: 110px;
}

.cloud2:after {
  width: 130px;
  height: 130px;
  top: -65px;
  right: 50px;
  border-radius: 130px;
}

/* Cloud 3 - Маленькое облако */
.cloud3 {
  width: 280px;
  height: 95px;
  top: 55%;
  left: -280px;
  animation: cloud-move 25s linear infinite;
  animation-delay: -10s;
  border-radius: 120px;
}

.cloud3:before {
  width: 80px;
  height: 80px;
  top: -40px;
  left: 25px;
  border-radius: 80px;
}

.cloud3:after {
  width: 95px;
  height: 95px;
  top: -47px;
  right: 35px;
  border-radius: 95px;
}

/* Cloud 4 - Большое облако вверху */
.cloud4 {
  width: 380px;
  height: 125px;
  top: 8%;
  left: -380px;
  animation: cloud-move 40s linear infinite;
  animation-delay: -15s;
  border-radius: 155px;
}

.cloud4:before {
  width: 105px;
  height: 105px;
  top: -52px;
  left: 35px;
  border-radius: 105px;
}

.cloud4:after {
  width: 125px;
  height: 125px;
  top: -62px;
  right: 45px;
  border-radius: 125px;
}

/* Cloud 5 - Среднее облако внизу */
.cloud5 {
  width: 320px;
  height: 110px;
  top: 70%;
  left: -320px;
  animation: cloud-move 28s linear infinite;
  animation-delay: -20s;
  border-radius: 140px;
}

.cloud5:before {
  width: 90px;
  height: 90px;
  top: -45px;
  left: 30px;
  border-radius: 90px;
}

.cloud5:after {
  width: 110px;
  height: 110px;
  top: -55px;
  right: 40px;
  border-radius: 110px;
}

/* Cloud 6 - Большое облако в центре */
.cloud6 {
  width: 360px;
  height: 118px;
  top: 45%;
  left: -360px;
  animation: cloud-move 32s linear infinite;
  animation-delay: -25s;
  border-radius: 150px;
}

.cloud6:before {
  width: 100px;
  height: 100px;
  top: -50px;
  left: 35px;
  border-radius: 100px;
}

.cloud6:after {
  width: 115px;
  height: 115px;
  top: -57px;
  right: 45px;
  border-radius: 115px;
}

/* Анимация движения облаков */
@keyframes cloud-move {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateX(calc(50vw + 200px)) translateY(-2px);
    opacity: 0.95;
  }
  100% {
    transform: translateX(calc(100vw + 500px)) translateY(0);
    opacity: 0.9;
  }
}

/* Плавное появление облаков */
@keyframes cloud-fade-in {
  from {
    opacity: 0;
    transform: translateX(-100px) scale(0.95);
  }
  to {
    opacity: 0.9;
    transform: translateX(0) scale(1);
  }
}

.cloud1 {
  animation: cloud-fade-in 2s ease-out, cloud-move 30s linear infinite 2s;
}

.cloud2 {
  animation: cloud-fade-in 2.5s ease-out, cloud-move 35s linear infinite -2.5s;
}

.cloud3 {
  animation: cloud-fade-in 3s ease-out, cloud-move 25s linear infinite -7s;
}

.cloud4 {
  animation: cloud-fade-in 2.2s ease-out, cloud-move 40s linear infinite -12.8s;
}

.cloud5 {
  animation: cloud-fade-in 2.8s ease-out, cloud-move 28s linear infinite -17.2s;
}

.cloud6 {
  animation: cloud-fade-in 2.3s ease-out, cloud-move 32s linear infinite -22.7s;
}

/* Оптимизация для десктопной версии */
@media (min-width: 769px) {
  .cloud {
    opacity: 0.85;
    filter: blur(5px);
  }
  
  .cloud:before,
  .cloud:after {
    filter: blur(4px);
  }
  
  /* Немного уменьшаем размеры для десктопа, но сохраняем видимость */
  .cloud1 {
    width: 320px;
    height: 110px;
  }
  
  .cloud1:before {
    width: 90px;
    height: 90px;
    top: -45px;
  }
  
  .cloud1:after {
    width: 110px;
    height: 110px;
    top: -55px;
  }
  
  .cloud2 {
    width: 360px;
    height: 120px;
  }
  
  .cloud2:before {
    width: 100px;
    height: 100px;
    top: -50px;
  }
  
  .cloud2:after {
    width: 120px;
    height: 120px;
    top: -60px;
  }
  
  .cloud3 {
    width: 260px;
    height: 88px;
  }
  
  .cloud3:before {
    width: 75px;
    height: 75px;
    top: -37px;
  }
  
  .cloud3:after {
    width: 88px;
    height: 88px;
    top: -44px;
  }
  
  .cloud4 {
    width: 340px;
    height: 115px;
  }
  
  .cloud4:before {
    width: 95px;
    height: 95px;
    top: -47px;
  }
  
  .cloud4:after {
    width: 115px;
    height: 115px;
    top: -57px;
  }
  
  .cloud5 {
    width: 290px;
    height: 100px;
  }
  
  .cloud5:before {
    width: 82px;
    height: 82px;
    top: -41px;
  }
  
  .cloud5:after {
    width: 100px;
    height: 100px;
    top: -50px;
  }
  
  .cloud6 {
    width: 330px;
    height: 108px;
  }
  
  .cloud6:before {
    width: 92px;
    height: 92px;
    top: -46px;
  }
  
  .cloud6:after {
    width: 105px;
    height: 105px;
    top: -52px;
  }
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
  .cloud {
    opacity: 0.8;
    filter: blur(3px);
  }
  
  .cloud:before,
  .cloud:after {
    filter: blur(2px);
  }
  
  .cloud1 {
    width: 245px;
    height: 84px;
  }
  
  .cloud1:before {
    width: 70px;
    height: 70px;
    top: -35px;
  }
  
  .cloud1:after {
    width: 84px;
    height: 84px;
    top: -42px;
  }
  
  .cloud2 {
    width: 280px;
    height: 91px;
  }
  
  .cloud2:before {
    width: 77px;
    height: 77px;
    top: -38px;
  }
  
  .cloud2:after {
    width: 91px;
    height: 91px;
    top: -45px;
  }
  
  .cloud3 {
    width: 196px;
    height: 66px;
  }
  
  .cloud3:before {
    width: 56px;
    height: 56px;
    top: -28px;
  }
  
  .cloud3:after {
    width: 66px;
    height: 66px;
    top: -33px;
  }
  
  .cloud4 {
    width: 266px;
    height: 87px;
  }
  
  .cloud4:before {
    width: 73px;
    height: 73px;
    top: -36px;
  }
  
  .cloud4:after {
    width: 87px;
    height: 87px;
    top: -43px;
  }
  
  .cloud5 {
    width: 224px;
    height: 77px;
  }
  
  .cloud5:before {
    width: 63px;
    height: 63px;
    top: -31px;
  }
  
  .cloud5:after {
    width: 77px;
    height: 77px;
    top: -38px;
  }
  
  .cloud6 {
    width: 252px;
    height: 82px;
  }
  
  .cloud6:before {
    width: 70px;
    height: 70px;
    top: -35px;
  }
  
  .cloud6:after {
    width: 80px;
    height: 80px;
    top: -40px;
  }
}