/* Style.css - Kids Fun Learning Academy */

/* Smooth custom animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

@keyframes cloudDrift1 {
  0% { transform: translateX(110vw); }
  100% { transform: translateX(-20vw); }
}

@keyframes cloudDrift2 {
  0% { transform: translateX(115vw); }
  100% { transform: translateX(-30vw); }
}

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

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes scaleUp {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

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

@keyframes balloonFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.02); }
}

.animate-fadeIn {
  animation: fadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-scaleUp {
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

.animate-wiggle {
  animation: wiggle 1.2s ease-in-out infinite;
}

/* Clouds in background */
.cloud {
  position: absolute;
  font-size: 4.5rem;
  opacity: 0.45;
  user-select: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
}
.cloud-1 { top: 8%; animation: cloudDrift1 45s linear infinite; }
.cloud-2 { top: 40%; animation: cloudDrift2 65s linear infinite 10s; }
.cloud-3 { top: 75%; animation: cloudDrift3 55s linear infinite 20s; }

.floating-stars .star {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.5;
  animation: floatSlow 4s ease-in-out infinite;
}

/* Card Glow Effect */
.card-glow {
  position: absolute;
  inset: -20px;
  border-radius: 9999px;
  filter: blur(24px);
  pointer-events: none;
}

/* Game Pieces & Interactions */
.draggable-piece {
  cursor: grab;
  touch-action: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.draggable-piece:active {
  cursor: grabbing;
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.drop-target-active {
  border-color: #FACC15 !important;
  background-color: #FEF9C3 !important;
  transform: scale(1.04);
}

/* Balloon Game Styles */
.balloon-item {
  animation: balloonFloat 3s ease-in-out infinite;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.balloon-item:hover {
  transform: translateY(-8px) scale(1.08);
}

/* River hop stones */
.river-stone {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.river-stone:hover {
  transform: translateY(-6px) scale(1.05);
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.8);
}