.cloud-1 {
  animation: cloudFloat 22s linear infinite;
}

.cloud-2 {
  animation: cloudFloatReverse 27s linear infinite;
}

.cloud-3 {
  animation: cloudFloat 18s linear infinite;
}

.spark-1,
.spark-2,
.spark-3 {
  animation: sparkTwinkle 2.5s ease-in-out infinite;
}

.mascot-idle {
  animation: mascotBreathe 2.8s ease-in-out infinite;
}

.mascot-celebrate {
  animation: mascotDance 1.2s ease-in-out infinite;
}

.btn,
.option-btn,
.world-node,
.fab {
  transition: transform 0.15s ease, filter 0.2s ease;
}

.btn:active,
.option-btn:active,
.world-node:active,
.fab:active {
  transform: scale(0.97);
}

.btn:hover,
.option-btn:hover,
.world-node:hover,
.fab:hover {
  filter: brightness(1.04);
}

.screen {
  animation: fadeInScreen 0.28s ease;
}

.pop-in {
  animation: popIn 0.5s ease;
}

.glow-in {
  animation: glowIn 0.7s ease;
}

.star-burst {
  position: fixed;
  font-size: 1.45rem;
  animation: starUp 900ms ease forwards;
  pointer-events: none;
  z-index: 25;
}

@keyframes cloudFloat {
  0% { transform: translateX(-15vw); }
  100% { transform: translateX(130vw); }
}

@keyframes cloudFloatReverse {
  0% { transform: translateX(10vw); }
  100% { transform: translateX(-120vw); }
}

@keyframes sparkTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8) rotate(45deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}

@keyframes mascotBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes mascotDance {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-4deg) scale(1.02); }
  75% { transform: rotate(4deg) scale(1.02); }
}

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

@keyframes popIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glowIn {
  0% { opacity: 0; box-shadow: 0 0 0 rgba(255, 229, 123, 0.2); }
  100% { opacity: 1; box-shadow: 0 10px 30px rgba(255, 229, 123, 0.35); }
}

@keyframes starUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(1.5); }
}

@keyframes confettiFall {
  0% { transform: translateY(-20vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(520deg); opacity: 0.95; }
}