/* assets/css/animations.css */
/* Keyframes for soft & cute aesthetic animations */

/* Fade in with slide up */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.22s ease-out forwards;
}

/* Feedback slide in with bounce */
@keyframes feedbackSlideIn {
    0% { opacity: 0; transform: translateY(12px) scale(0.97); }
    60% { opacity: 1; transform: translateY(-3px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.feedback-slide-in {
    animation: feedbackSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Gentle wiggle for wrong answers */
@keyframes gentleWiggle {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-4px); }
    30% { transform: translateX(3px); }
    45% { transform: translateX(-2px); }
    60% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
}
.gentle-wiggle {
    animation: gentleWiggle 0.5s ease-in-out;
}

/* Sparkle pulse for correct answers */
@keyframes sparklePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
}
.sparkle-pulse {
    animation: sparklePulse 1.5s ease-in-out infinite;
}

/* Gentle vibration & bounce for correct answer option */
@keyframes correctVibrate {
    0%, 100% { transform: translateX(0) scale(1); }
    15% { transform: translateX(-3px) scale(1.02); }
    30% { transform: translateX(3px) scale(1.02); }
    45% { transform: translateX(-2px) scale(1.015); }
    60% { transform: translateX(2px) scale(1.01); }
    75% { transform: translateX(-1px) scale(1.005); }
}
.animate-correct-vibrate {
    animation: correctVibrate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Option hover lift */
@keyframes optionLift {
    from { transform: translateY(0); }
    to { transform: translateY(-2px); }
}

/* Card enter animation */
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.card-enter {
    animation: cardEnter 0.35s ease-out forwards;
}

/* Modal backdrop fade */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-fade-in {
    animation: modalFadeIn 0.2s ease-out forwards;
}

/* Modal content slide up */
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-slide-up {
    animation: modalSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Confetti star float */
@keyframes starFloat {
    0% { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-40px) rotate(180deg); }
}

/* Nav pill hover glow */
.nav-btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Smooth view transitions */
.view-section {
    transition: opacity 0.2s ease-out;
}