/* WordMaster Custom Styles - DaisyUI Extensions */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/* Smooth animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in { animation: fadeInUp 0.4s ease-out; }
.animate-fade { animation: fadeIn 0.3s ease-out; }

/* Card flip for learning */
.card-flip { perspective: 1200px; }
.card-inner { transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); transform-style: preserve-3d; position: relative; }
.card-front, .card-back { backface-visibility: hidden; }
.card-back { transform: rotateY(180deg); position: absolute; top:0; left:0; right:0; bottom:0; }
.card-flip.flipped .card-inner { transform: rotateY(180deg); }

/* Audio button pulse */
.audio-playing { animation: audioPulse 1.5s ease infinite; }
@keyframes audioPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
}

/* Quiz option transitions */
.quiz-opt { transition: all 0.2s ease; }
.quiz-opt:hover { transform: translateX(4px); }
.quiz-opt:active { transform: scale(0.98); }

/* Login page background */
.login-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.login-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.1) 0%, transparent 70%);
}
.login-bg::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(255,107,107,0.15) 0%, transparent 70%);
}

/* Welcome banner */
.hero-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
}

/* Stat card hover */
.stat-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.stat-hover { transition: all 0.25s ease; }

/* Word card glow */
.word-glow { box-shadow: 0 0 0 1px rgba(99,102,241,0.1), 0 8px 30px rgba(99,102,241,0.12); }

/* Ebbinghaus dots */
.eb-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(var(--b3)); }
.eb-dot.filled { background: oklch(var(--p)); box-shadow: 0 0 4px oklch(var(--p) / 0.4); }
.eb-dot.mastered { background: oklch(var(--su)); box-shadow: 0 0 4px oklch(var(--su) / 0.4); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(var(--bc) / 0.15); border-radius: 3px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}