/* public/css/style.css - Career Quest Custom Animations & UI Styles */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --accent: #F59E0B;
  --success: #10B981;
  --danger: #EF4444;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(135deg, #F0F4FF 0%, #E8EEFF 50%, #F5F3FF 100%);
  min-height: 100vh;
}

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

/* 3D Flashcard Flip */
.perspective-1000 {
  perspective: 1000px;
}

.flip-card-inner {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Drag & Drop Styles */
.draggable-item {
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.draggable-item:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.drop-target {
  transition: all 0.3s ease;
}

.drop-target.drag-over {
  border-color: #4F46E5 !important;
  background-color: #EEF2FF !important;
  transform: scale(1.02);
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.2);
}

.drop-target.matched {
  border-color: #10B981 !important;
  background-color: #ECFDF5 !important;
}

/* Custom Range Slider */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #E2E8F0;
  outline: none;
  transition: background 0.3s;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4F46E5;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.4);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #4338CA;
}

/* Pulse animation for voice speaking */
@keyframes voice-ripple {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.4; }
  100% { transform: scale(1); opacity: 0.8; }
}

.speaking-pulse {
  animation: voice-ripple 1s infinite ease-in-out;
}

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Custom Badges */
.badge-pill {
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}