/* Common styles for CLOUDS icons */
.clouds-icon {
  position: absolute;
  display: block;
  list-style: none;
  bottom: -150px;
  animation: clouds-animate 25s linear infinite;
  
  /* SVG definitivo: Nuvola + Raggi + Arco del sole (no cerchio) */
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3Cpath d='M11.5 5.5 A 2 2 0 0 1 16.5 10' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='17' cy='2' r='1.5' fill='white' stroke='none'/%3E%3Ccircle cx='21' cy='8' r='1.5' fill='white' stroke='none'/%3E%3Ccircle cx='10' cy='2' r='1.5' fill='white' stroke='none'/%3E%3C/svg%3E");
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  
  /* Effetto shine */
  filter: 
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.2))
    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.6));
}

/* Hover effect rimosso - nessun cambio al passaggio del mouse */

/* CLOUDS icon sizes and positions - dimensioni random come i CD originali */
.clouds-icon1 {
  width: 80px;
  height: 80px;
  left: 25%;
  animation-delay: 0s;
}

.clouds-icon2 {
  width: 30px;
  height: 30px;
  left: 10%;
  animation-delay: 2s;
  animation-duration: 12s;
}

.clouds-icon3 {
  width: 25px;
  height: 25px;
  left: 70%;
  animation-delay: 4s;
}

.clouds-icon4 {
  width: 60px;
  height: 60px;
  left: 40%;
  animation-delay: 0s;
  animation-duration: 18s;
}

.clouds-icon5 {
  width: 35px;
  height: 35px;
  left: 65%;
  animation-delay: 0s;
}

.clouds-icon6 {
  width: 110px;
  height: 110px;
  left: 75%;
  animation-delay: 3s;
}

.clouds-icon7 {
  width: 150px;
  height: 150px;
  left: 35%;
  animation-delay: 7s;
}

.clouds-icon8 {
  width: 40px;
  height: 40px;
  left: 50%;
  animation-delay: 15s;
  animation-duration: 45s;
}

.clouds-icon9 {
  width: 20px;
  height: 20px;
  left: 20%;
  animation-delay: 2s;
  animation-duration: 35s;
}

.clouds-icon10 {
  width: 130px;
  height: 130px;
  left: 85%;
  animation-delay: 0s;
  animation-duration: 11s;
}

/* Animazione - uguale a quella dei CD ma senza rotazione eccessiva */
@keyframes clouds-animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-1000px) rotate(360deg);
    opacity: 0;
  }
}

/* Versione alternativa con rotazione più lenta */
.clouds-icon.slow-rotate {
  animation: clouds-animate-slow 30s linear infinite;
}

@keyframes clouds-animate-slow {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-1000px) rotate(180deg);
    opacity: 0;
  }
}