﻿/* ==========================================================================
   AI KIDS GURU - INTERACTIVE & MOTION ANIMATIONS
   ========================================================================== */

/* Gentle Floating for Mascot */
@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

/* Staggered Floating for Badges */
@keyframes float-delayed {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Ambient Radial Glow Pulse */
@keyframes pulse-glow {
  0% {
    opacity: 0.5;
    transform: scale(0.92);
  }
  100% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

/* Soft Bounce for Mascot Badges & Icons */
@keyframes bounce-soft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Audio Waveform for Voice AI Mentor */
@keyframes wave-audio {
  0% {
    height: 6px;
    background: #38bdf8;
  }
  50% {
    height: 28px;
    background: #2563eb;
  }
  100% {
    height: 12px;
    background: #10b981;
  }
}

.audio-pulse-bars .audio-bar:nth-child(1) { animation: wave-audio 0.9s infinite ease-in-out 0.1s alternate; }
.audio-pulse-bars .audio-bar:nth-child(2) { animation: wave-audio 0.8s infinite ease-in-out 0.25s alternate; }
.audio-pulse-bars .audio-bar:nth-child(3) { animation: wave-audio 1.1s infinite ease-in-out 0.05s alternate; }
.audio-pulse-bars .audio-bar:nth-child(4) { animation: wave-audio 0.75s infinite ease-in-out 0.3s alternate; }
.audio-pulse-bars .audio-bar:nth-child(5) { animation: wave-audio 1.0s infinite ease-in-out 0.15s alternate; }
.audio-pulse-bars .audio-bar:nth-child(6) { animation: wave-audio 0.85s infinite ease-in-out 0.35s alternate; }

/* Rotating Sparkle Elements */
@keyframes rotate-sparkle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: rotate-sparkle 16s linear infinite;
}

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

/* Shimmer Light on Hero Badge */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
