/**
 * Gamification Styles for Lake Country Spanish
 * Includes toast customizations, ripple effects, and animation helpers
 */

/* =================================================================
   Toast Notification Customizations
   ================================================================= */

.gamification-toast {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: slideInRight 0.3s ease-out;
}

.gamification-toast svg {
    flex-shrink: 0;
}

/* Toast entrance animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Toast types - additional styling if needed */
.gamification-toast-success {
    border-left: 4px solid #16a34a;
}

.gamification-toast-error {
    border-left: 4px solid #dc2626;
}

.gamification-toast-warning {
    border-left: 4px solid #d97706;
}

.gamification-toast-info {
    border-left: 4px solid #2563eb;
}

.gamification-toast-points {
    border-left: 4px solid #fbbf24;
}

.gamification-toast-streak {
    border-left: 4px solid #f0806b;
}

.gamification-toast-badge {
    border-left: 4px solid #7c3aed;
}

/* =================================================================
   Ripple Effect for Buttons
   ================================================================= */

.gamification-btn {
    position: relative;
    overflow: hidden;
}

.gamification-ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* =================================================================
   Answer Feedback States
   ================================================================= */

.answer-correct {
    background-color: #dcfce7 !important;
    border-color: #22c55e !important;
    animation: correctPulse 0.3s ease-out;
}

.answer-wrong {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
    animation: wrongShake 0.3s ease-out;
}

@keyframes correctPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

@keyframes wrongShake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-5px);
    }
    40%, 80% {
        transform: translateX(5px);
    }
}

/* =================================================================
   Points & Rewards Animations
   ================================================================= */

.points-earned {
    display: inline-block;
    animation: pointsPopIn 0.4s ease-out;
}

@keyframes pointsPopIn {
    0% {
        transform: scale(0) translateY(10px);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) translateY(-5px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.streak-fire {
    display: inline-block;
    animation: fireFlicker 0.8s ease-in-out infinite;
}

@keyframes fireFlicker {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.05) rotate(-2deg);
    }
    75% {
        transform: scale(1.05) rotate(2deg);
    }
}

/* =================================================================
   Badge Animations
   ================================================================= */

.badge-earned {
    animation: badgeReveal 0.5s ease-out;
}

@keyframes badgeReveal {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.badge-glow {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
    animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
    }
}

/* =================================================================
   Progress Bar Animations
   ================================================================= */

.progress-fill {
    transition: width 0.6s ease-out;
}

.progress-complete {
    animation: progressComplete 0.5s ease-out;
}

@keyframes progressComplete {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.2);
        background-color: #22c55e;
    }
    100% {
        transform: scaleY(1);
    }
}

/* =================================================================
   Card Hover Effects
   ================================================================= */

.gamification-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gamification-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* =================================================================
   Lottie Animation Containers
   ================================================================= */

.lottie-overlay {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lottie-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =================================================================
   Reduced Motion Support
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
    .gamification-toast,
    .gamification-ripple,
    .answer-correct,
    .answer-wrong,
    .points-earned,
    .streak-fire,
    .badge-earned,
    .badge-glow,
    .progress-fill,
    .progress-complete,
    .gamification-card,
    .lottie-overlay {
        animation: none !important;
        transition: none !important;
    }

    .gamification-card:hover {
        transform: none;
    }
}

/* =================================================================
   Celebration Overlay
   ================================================================= */

.celebration-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    animation: fadeIn 0.3s ease-out;
}

.celebration-content {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    max-width: 400px;
    animation: celebrationPopIn 0.4s ease-out;
}

@keyframes celebrationPopIn {
    0% {
        transform: scale(0.5) translateY(50px);
        opacity: 0;
    }
    60% {
        transform: scale(1.05) translateY(-10px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* =================================================================
   Level Up Banner
   ================================================================= */

.level-up-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    padding: 2rem 3rem;
    border-radius: 1rem;
    text-align: center;
    z-index: 9999;
    animation: levelUpBanner 0.5s ease-out;
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.4);
}

@keyframes levelUpBanner {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1) rotate(2deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0);
        opacity: 1;
    }
}

/* =================================================================
   Streak Counter Animation
   ================================================================= */

.streak-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #e85a42, #f0806b);
    color: white;
    border-radius: 9999px;
    font-weight: 600;
}

.streak-number {
    font-size: 1.25rem;
    font-weight: 700;
}

.streak-increment {
    animation: streakIncrement 0.3s ease-out;
}

@keyframes streakIncrement {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
        color: #fbbf24;
    }
    100% {
        transform: scale(1);
    }
}

/* =================================================================
   Token/Points Counter
   ================================================================= */

.token-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.token-increment {
    color: #22c55e;
    font-weight: 600;
    animation: tokenIncrement 0.5s ease-out;
}

@keyframes tokenIncrement {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* =================================================================
   XP Bar Styles
   ================================================================= */

.xp-bar-container {
    width: 100%;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.xp-bar-fill.level-complete {
    animation: xpComplete 0.6s ease-out;
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

@keyframes xpComplete {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.5);
    }
}