/* ==========================================
   BAU SmartLMS - Modern Light Theme & Animations
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #f8fafc;
  color: #0f172a;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================
   FULL BODY CARTOON WALKING ANIMATION
   ========================================== */

/* Road Traverse Animation */
@keyframes walk-across-screen {
  0% { transform: translateX(-160px); }
  100% { transform: translateX(calc(100vw + 160px)); }
}

.animate-student-walk {
  animation: walk-across-screen 6.5s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

/* Character Bobbing */
@keyframes body-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.char-body-bob {
  animation: body-bob 0.6s ease-in-out infinite;
}

/* Leg Strides */
@keyframes leg-left-swing {
  0%, 100% { transform: rotate(-25deg); }
  50% { transform: rotate(25deg); }
}
@keyframes leg-right-swing {
  0%, 100% { transform: rotate(25deg); }
  50% { transform: rotate(-25deg); }
}

.char-leg-left {
  transform-origin: top center;
  animation: leg-left-swing 0.6s ease-in-out infinite;
}
.char-leg-right {
  transform-origin: top center;
  animation: leg-right-swing 0.6s ease-in-out infinite;
}

/* Arm Swings */
@keyframes arm-left-swing {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(-30deg); }
}
@keyframes arm-right-swing {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(30deg); }
}

.char-arm-left {
  transform-origin: top center;
  animation: arm-left-swing 0.6s ease-in-out infinite;
}
.char-arm-right {
  transform-origin: top center;
  animation: arm-right-swing 0.6s ease-in-out infinite;
}

/* ==========================================
   LANDMARK SCENE ANIMATIONS
   ========================================== */

/* River Boat Floating */
@keyframes boat-drift {
  0% { transform: translateX(-40px) translateY(0) rotate(0deg); }
  50% { transform: translateX(180px) translateY(-5px) rotate(2deg); }
  100% { transform: translateX(380px) translateY(0) rotate(-1deg); }
}
.animate-boat {
  animation: boat-drift 12s ease-in-out infinite alternate;
}

/* River Waves */
@keyframes river-wave {
  0% { transform: translateX(0); }
  50% { transform: translateX(-25px); }
  100% { transform: translateX(0); }
}
.animate-river-wave {
  animation: river-wave 3s ease-in-out infinite;
}

/* Tea Rising Steam */
@keyframes steam-rise {
  0% { transform: translateY(0) scaleX(1); opacity: 0.8; }
  50% { transform: translateY(-15px) scaleX(1.3); opacity: 0.4; }
  100% { transform: translateY(-30px) scaleX(1.6); opacity: 0; }
}
.animate-steam {
  animation: steam-rise 2s ease-out infinite;
}
.animate-steam-delay {
  animation: steam-rise 2s ease-out infinite 0.7s;
}

/* Swaying Crops */
@keyframes crop-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}
.animate-crop-sway {
  transform-origin: bottom center;
  animation: crop-sway 2.5s ease-in-out infinite;
}
.animate-crop-sway-delay {
  transform-origin: bottom center;
  animation: crop-sway 2.5s ease-in-out infinite 1.2s;
}

/* Swimming Fish */
@keyframes fish-swim {
  0% { transform: translateX(0) scaleX(1); }
  48% { transform: translateX(120px) scaleX(1); }
  50% { transform: translateX(120px) scaleX(-1); }
  98% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
.animate-fish {
  animation: fish-swim 6s ease-in-out infinite;
}

/* Rotating Wheel / Aerator */
@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-spin-slow {
  transform-origin: center;
  animation: spin-slow 4s linear infinite;
}

/* 3D Flashcard Flip */
.perspective-1000 {
  perspective: 1000px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}
.backface-hidden {
  backface-visibility: hidden;
}
.rotate-y-180 {
  transform: rotateY(180deg);
}

/* Glowing Speech Audio Waveform */
.audio-bar {
  animation: wave 1.2s ease-in-out infinite alternate;
}
.audio-bar:nth-child(1) { animation-delay: 0.1s; height: 12px; }
.audio-bar:nth-child(2) { animation-delay: 0.3s; height: 24px; }
.audio-bar:nth-child(3) { animation-delay: 0.2s; height: 36px; }
.audio-bar:nth-child(4) { animation-delay: 0.4s; height: 20px; }
.audio-bar:nth-child(5) { animation-delay: 0.15s; height: 30px; }

@keyframes wave {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1.2); }
}

/* Confetti Keyframe */
@keyframes confetti-fall {
  0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confetti-fall 3s ease-out forwards;
}

/* Stamp Effect */
.pass-stamp {
  border: 3px solid #059669;
  color: #059669;
  background-color: #ecfdf5;
  transform: rotate(-8deg);
  animation: stamp-slam 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fail-stamp {
  border: 3px solid #dc2626;
  color: #dc2626;
  background-color: #fef2f2;
  transform: rotate(-8deg);
  animation: stamp-slam 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes stamp-slam {
  0% { transform: scale(2) rotate(0deg); opacity: 0; }
  100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}

/* Drag & Drop Zone Styles */
.file-dropzone {
  border: 2px dashed #94a3b8;
  background-color: #f8fafc;
  transition: all 0.2s ease-in-out;
}
.file-dropzone:hover, .file-dropzone.drag-over {
  border-color: #059669;
  background-color: #ecfdf5;
}