/* ============================================================
   WIKA — Animations & Motion
   Keyframes + utility classes for kids' game feel
   ============================================================ */


/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Bounce — correct answer celebration, button press */
@keyframes bounce {
    0%, 100% { transform: scale(1); }
    30%       { transform: scale(1.18); }
    60%       { transform: scale(0.94); }
    80%       { transform: scale(1.06); }
}

/* Bounce Y — vertical hop */
@keyframes bounceY {
    0%, 100% { transform: translateY(0); }
    40%       { transform: translateY(-16px); }
    70%       { transform: translateY(-6px); }
}

/* Shake — wrong answer */
@keyframes shake {
    0%, 100%  { transform: translateX(0) rotate(0deg); }
    15%       { transform: translateX(-10px) rotate(-2deg); }
    30%       { transform: translateX(9px) rotate(2deg); }
    45%       { transform: translateX(-7px) rotate(-1deg); }
    60%       { transform: translateX(6px) rotate(1deg); }
    75%       { transform: translateX(-4px) rotate(0deg); }
    90%       { transform: translateX(3px); }
}

/* Slide Up — toast, feedback panel, page transitions */
@keyframes slideUp {
    from {
        transform: translateY(24px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide Down — dropdowns, top banners */
@keyframes slideDown {
    from {
        transform: translateY(-24px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide In Left */
@keyframes slideInLeft {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide In Right */
@keyframes slideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Fade In — page load, overlays */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fade Out */
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Zoom In — modal, completion screen */
@keyframes zoomIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Zoom Out */
@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.7);
        opacity: 0;
    }
}

/* Flip Card — flashcard 3D flip */
@keyframes flipCard {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

/* Pop — avatar select, badge earn */
@keyframes pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); opacity: 1; }
    80%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* Pulse — timer urgency, streak fire */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.65; transform: scale(0.97); }
}

/* Pulse Glow — highlight selected items */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88,204,2,0.4); }
    50%       { box-shadow: 0 0 0 10px rgba(88,204,2,0); }
}

/* Score Popup — floating +XP number */
@keyframes scorePopup {
    0% {
        transform: scale(0) translateY(0);
        opacity: 0;
    }
    25% {
        transform: scale(1.4) translateY(-10px);
        opacity: 1;
    }
    60% {
        transform: scale(1.1) translateY(-30px);
        opacity: 1;
    }
    100% {
        transform: scale(0.8) translateY(-55px);
        opacity: 0;
    }
}

/* Confetti fall */
@keyframes confetti-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg) translateX(0);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) rotate(720deg) translateX(40px);
        opacity: 0;
    }
}

/* Confetti wobble (paired with fall) */
@keyframes confetti-wobble {
    0%, 100% { margin-left: 0; }
    25%       { margin-left: 15px; }
    75%       { margin-left: -15px; }
}

/* Spin — loading spinner */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Glow — highlight active nav item, CTA buttons */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 4px rgba(88,204,2,0.3); }
    50%       { box-shadow: 0 0 20px rgba(88,204,2,0.7), 0 0 40px rgba(88,204,2,0.3); }
}

/* Glow Blue */
@keyframes glowBlue {
    0%, 100% { box-shadow: 0 0 4px rgba(28,176,246,0.3); }
    50%       { box-shadow: 0 0 20px rgba(28,176,246,0.7), 0 0 40px rgba(28,176,246,0.3); }
}

/* Streak fire — pulsing flame emoji */
@keyframes streakFire {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    25%       { transform: scale(1.15) rotate(3deg); }
    50%       { transform: scale(1.2) rotate(-2deg); }
    75%       { transform: scale(1.1) rotate(2deg); }
}

/* Wiggle — fun hover on game cards */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    20%       { transform: rotate(-6deg) scale(1.05); }
    40%       { transform: rotate(6deg) scale(1.05); }
    60%       { transform: rotate(-4deg); }
    80%       { transform: rotate(4deg); }
}

/* Float — idle animation for icons/mascots */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

/* Heart beat */
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.2); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.15); }
    70%       { transform: scale(1); }
}

/* Rubber band — playful stretch */
@keyframes rubberBand {
    0%   { transform: scaleX(1); }
    30%  { transform: scaleX(1.25) scaleY(0.75); }
    40%  { transform: scaleX(0.75) scaleY(1.25); }
    50%  { transform: scaleX(1.15) scaleY(0.85); }
    65%  { transform: scaleX(0.95) scaleY(1.05); }
    75%  { transform: scaleX(1.05) scaleY(0.95); }
    100% { transform: scaleX(1); }
}

/* Tada — big celebration */
@keyframes tada {
    0%   { transform: scaleX(1); }
    10%, 20% { transform: scaleX(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scaleX(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scaleX(1.1) rotate(-3deg); }
    100% { transform: scaleX(1) rotate(0); }
}

/* Countdown timer shrink */
@keyframes timerShrink {
    from { width: 100%; }
    to   { width: 0%; }
}

/* Shimmer (skeleton loader) */
@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 150%; }
}

/* Rainbow text */
@keyframes rainbow {
    0%   { color: var(--primary); }
    16%  { color: var(--secondary); }
    33%  { color: var(--purple); }
    50%  { color: var(--pink); }
    66%  { color: var(--warning); }
    83%  { color: var(--danger); }
    100% { color: var(--primary); }
}

/* Progress fill */
@keyframes progressFill {
    from { width: 0%; }
    to   { width: var(--target-width, 100%); }
}

/* XP bar fill */
@keyframes xpFill {
    from { width: 0%; opacity: 1; }
    to   { width: var(--xp-width, 60%); opacity: 1; }
}

/* Star burst */
@keyframes starBurst {
    0%   { transform: scale(0) rotate(0deg); opacity: 1; }
    50%  { transform: scale(1.5) rotate(180deg); opacity: 1; }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* Typing / dot loader */
@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1); opacity: 1; }
}


/* ============================================================
   UTILITY ANIMATION CLASSES
   ============================================================ */

/* Basic triggers */
.animate-bounce     { animation: bounce 0.5s ease; }
.animate-bounceY    { animation: bounceY 0.5s ease; }
.animate-shake      { animation: shake 0.4s ease; }
.animate-slideUp    { animation: slideUp 0.3s ease; }
.animate-slideDown  { animation: slideDown 0.3s ease; }
.animate-slideLeft  { animation: slideInLeft 0.3s ease; }
.animate-slideRight { animation: slideInRight 0.3s ease; }
.animate-fadeIn     { animation: fadeIn 0.3s ease; }
.animate-fadeOut    { animation: fadeOut 0.3s ease forwards; }
.animate-zoomIn     { animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.animate-zoomOut    { animation: zoomOut 0.2s ease forwards; }
.animate-pop        { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.animate-wiggle     { animation: wiggle 0.6s ease; }
.animate-float      { animation: float 3s ease infinite; }
.animate-heartBeat  { animation: heartBeat 1.3s ease infinite; }
.animate-rubberBand { animation: rubberBand 0.8s ease; }
.animate-tada       { animation: tada 0.8s ease; }

/* Loop utilities */
.animate-pulse      { animation: pulse 1.4s ease infinite; }
.animate-glow       { animation: glow 2s ease infinite; }
.animate-glowBlue   { animation: glowBlue 2s ease infinite; }
.animate-rainbow    { animation: rainbow 3s linear infinite; }
.animate-streakFire { animation: streakFire 1.5s ease infinite; }

/* Spinner */
.loading-spinner    { animation: spin 0.8s linear infinite; }

/* Game-specific */
.animate-correct {
    animation: bounce 0.4s ease;
    background: linear-gradient(180deg, var(--primary-light), var(--primary)) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 16px rgba(88,204,2,0.5), 0 4px 0 var(--primary-dark) !important;
}

.animate-wrong {
    animation: shake 0.4s ease;
    background: linear-gradient(180deg, #FF7070, var(--danger)) !important;
    border-color: var(--danger) !important;
    box-shadow: 0 0 16px rgba(255,75,75,0.5), 0 4px 0 var(--danger-dark) !important;
}

.animate-selected {
    animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-glow: pulseGlow 1s ease;
}

/* Confetti pieces */
.confetti-piece {
    animation: confetti-fall var(--fall-duration, 2s) ease-in var(--fall-delay, 0s) forwards,
               confetti-wobble var(--fall-duration, 2s) ease-in-out var(--fall-delay, 0s) forwards;
}

/* Score popup */
.score-popup {
    animation: scorePopup 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered children (use with JS adding class) */
.stagger-children > * {
    opacity: 0;
    animation: slideUp 0.3s ease forwards;
}

.stagger-children > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger-children > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8)  { animation-delay: 0.40s; }

/* Delay helpers */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* Duration helpers */
.duration-fast   { animation-duration: 0.2s !important; }
.duration-normal { animation-duration: 0.4s !important; }
.duration-slow   { animation-duration: 0.8s !important; }
.duration-slower { animation-duration: 1.2s !important; }

/* Dot loader (three dots) */
.dot-loader {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.dot-loader span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    animation: dotBounce 1.2s ease infinite;
}

.dot-loader span:nth-child(1) { animation-delay: 0s; }
.dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.dot-loader span:nth-child(3) { animation-delay: 0.4s; }

/* Typing loader (same style, secondary color) */
.dot-loader.blue span { background: var(--secondary); }
.dot-loader.purple span { background: var(--purple); }


/* ============================================================
   PAGE TRANSITION EFFECTS
   ============================================================ */

/* Pages animate in */
.page.active {
    animation: fadeIn 0.25s ease;
}

/* Slide-in for forward navigation */
.page.slide-in-right {
    animation: slideInRight 0.3s ease;
}

.page.slide-in-left {
    animation: slideInLeft 0.3s ease;
}


/* ============================================================
   INTERACTIVE HOVER EFFECTS
   ============================================================ */

/* Game cards wiggle on hover */
.game-mode-card:hover .gm-icon,
.bonus-card:hover .bonus-icon,
.quick-action-btn:hover .qa-icon {
    animation: wiggle 0.5s ease;
    display: inline-block;
}

/* Flashcard hover lift */
.flashcard:hover {
    filter: brightness(1.04);
}

/* Nav item active bounce */
.nav-item.active .nav-icon {
    animation: bounceY 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Lesson card hover */
.lesson-card:hover .lesson-icon {
    animation: wiggle 0.4s ease;
    display: inline-flex;
}

/* Streak fire pulse */
.streak-fire {
    display: inline-block;
    animation: streakFire 1.5s ease infinite;
}

/* Profile avatar bounce on click */
.profile-pill:active .pill-avatar {
    animation: bounce 0.3s ease;
    display: inline-block;
}

/* Answer button press effect */
.answer-btn:active,
.quiz-option:active {
    animation: none;
}


/* ============================================================
   CELEBRATION / COMPLETION ANIMATIONS
   ============================================================ */

/* Completion emoji entrance */
.completion-emoji,
.complete-emoji {
    display: inline-block;
    animation: tada 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

/* Score big number */
.score-big {
    animation: zoomIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
    display: block;
}

/* Leaderboard items stagger in */
.leaderboard-item {
    opacity: 0;
    animation: slideInLeft 0.3s ease forwards;
}

.leaderboard-item:nth-child(1) { animation-delay: 0.05s; }
.leaderboard-item:nth-child(2) { animation-delay: 0.10s; }
.leaderboard-item:nth-child(3) { animation-delay: 0.15s; }
.leaderboard-item:nth-child(4) { animation-delay: 0.20s; }
.leaderboard-item:nth-child(5) { animation-delay: 0.25s; }

/* Top 3 gold shimmer */
.leaderboard-item:nth-child(1) .lb-rank {
    animation: heartBeat 2s ease infinite 1s;
    display: inline-block;
}

/* Stat cards pop in */
.stat-card {
    opacity: 0;
    animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.12s; }
.stat-card:nth-child(3) { animation-delay: 0.19s; }
.stat-card:nth-child(4) { animation-delay: 0.26s; }

/* Avatar options animate in */
.avatar-option {
    animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.avatar-option:nth-child(1)  { animation-delay: 0.02s; }
.avatar-option:nth-child(2)  { animation-delay: 0.04s; }
.avatar-option:nth-child(3)  { animation-delay: 0.06s; }
.avatar-option:nth-child(4)  { animation-delay: 0.08s; }
.avatar-option:nth-child(5)  { animation-delay: 0.10s; }
.avatar-option:nth-child(6)  { animation-delay: 0.12s; }
.avatar-option:nth-child(7)  { animation-delay: 0.14s; }
.avatar-option:nth-child(8)  { animation-delay: 0.16s; }
.avatar-option:nth-child(9)  { animation-delay: 0.18s; }
.avatar-option:nth-child(10) { animation-delay: 0.20s; }

/* Game mode cards stagger */
.game-mode-card {
    opacity: 0;
    animation: slideUp 0.3s ease forwards;
}

.game-mode-card:nth-child(1) { animation-delay: 0.04s; }
.game-mode-card:nth-child(2) { animation-delay: 0.08s; }
.game-mode-card:nth-child(3) { animation-delay: 0.12s; }
.game-mode-card:nth-child(4) { animation-delay: 0.16s; }
.game-mode-card:nth-child(5) { animation-delay: 0.20s; }
.game-mode-card:nth-child(6) { animation-delay: 0.24s; }

/* Answer buttons pop in */
.answer-btn,
.quiz-option {
    opacity: 0;
    animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#ans-0, .quiz-option:nth-child(1) { animation-delay: 0.08s; }
#ans-1, .quiz-option:nth-child(2) { animation-delay: 0.14s; }
#ans-2, .quiz-option:nth-child(3) { animation-delay: 0.20s; }
#ans-3, .quiz-option:nth-child(4) { animation-delay: 0.26s; }

/* When answers are shown again (JS resets), class 'answered' stops animation */
.answer-btn.answered,
.quiz-option.answered {
    opacity: 1;
    animation: none;
}


/* ============================================================
   REDUCE MOTION — accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .confetti-piece {
        display: none !important;
    }
}