/* Custom Child-friendly Styles and Animations */

/* Fonts settings */
body {
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.font-fredoka {
  font-family: 'Fredoka', 'Tajawal', cursive, sans-serif;
}

/* Hide scrollbar for clean tab scrolling */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Floating Kid Animation */
@keyframes floatAnim {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.animate-float {
  animation: floatAnim 4s ease-in-out infinite;
}

/* Clouds Animation */
@keyframes cloudMove {
  0% { transform: translateX(0vw); }
  50% { transform: translateX(15vw); }
  100% { transform: translateX(0vw); }
}

.cloud-anim {
  animation: cloudMove 35s ease-in-out infinite;
}

.cloud-anim-slow {
  animation: cloudMove 50s ease-in-out infinite reverse;
}

/* Pop Animation for modal */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-pop {
  animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Plate hover effects */
.plate-section {
  cursor: pointer;
  outline: none;
}

.plate-section:active {
  transform: scale(0.95);
}

/* Custom Check Button for Habits */
.habit-item.completed {
  background-color: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
}

.habit-item.completed .habit-check-btn {
  background-color: #10b981 !important;
  border-color: #059669 !important;
}