/* ☁️ Cloud Overlay */
#cloud-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 5, 5, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1002;
  overflow: hidden;
}

#cloud-content {
  width: 90%;
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.cloud-word {
  position: relative;
  display: inline-block;
  color: white;
  font-weight: bold;
  cursor: pointer;

  animation-name: drift;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /* 👇 This triggers the burst-in animation on class removal */
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;

}

.cloud-word.burst-in {
  opacity: 0;
  transform: scale(0.2) translateY(40px);
}

.cloud-word:hover {
  transform: scale(1.2);
  color: white;
  text-shadow: 0 0 8px orange;
}

/* 🧲 Magnetized Word Hover Effect */
.cloud-word:hover ~ .cloud-word {
  transform: translateX(20px) scale(0.75);
  opacity: 0.7;
}

/* 🌬️ Kinetic Drift Animation */
@keyframes drift {
  0% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(-0.2deg); }
  50% { transform: translateY(0px) rotate(0deg); }
  75% { transform: translateY(5px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0.2deg); }
}