/**
 * quiz_animations.css
 * Additive layer of motion/feedback for the quiz screens.
 * Loaded after lernen_style.css — only adds classes/keyframes, doesn't
 * override existing layout rules.
 */

/* ============================
   CATEGORY GRID — playful hover/press
   ============================ */
.category-btn {
    position: relative;
    overflow: hidden;
}

.category-btn:hover .category-icon {
    animation: iconBounce 0.5s ease;
}

.category-btn:active {
    transform: scale(0.96);
}

@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-6px) scale(1.15);
    }

    60% {
        transform: translateY(1px) scale(0.98);
    }
}

/* ============================
   RIPPLE — click feedback on any .rippleable element
   ============================ */
.rippleable {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: scale(0);
    pointer-events: none;
    animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ============================
   QUIZ CARD — entrance transition per question
   ============================ */
.quiz-card.question-enter {
    animation: questionSlideIn 0.4s ease both;
}

@keyframes questionSlideIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================
   OPTION BUTTONS — answer feedback
   ============================ */
.option-btn {
    position: relative;
}

.option-btn.correct-pop {
    animation: correctPop 0.5s ease;
}

@keyframes correctPop {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.045);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
    }

    100% {
        transform: scale(1);
    }
}

.option-btn.incorrect-shake {
    animation: incorrectShake 0.45s ease;
}

@keyframes incorrectShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(7px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(3px);
    }
}

.floating-feedback {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    font-size: 1.1rem;
    pointer-events: none;
    animation: floatUp 0.9s ease forwards;
}

.floating-feedback.positive {
    color: var(--correct-color);
}

.floating-feedback.negative {
    color: var(--incorrect-color);
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateY(0) scale(0.8);
    }

    20% {
        opacity: 1;
        transform: translateY(-50%) translateY(-6px) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) translateY(-38px) scale(1);
    }
}

/* ============================
   SCORE — pop when it changes
   ============================ */
.quiz-score.score-pop {
    animation: scorePop 0.4s ease;
}

@keyframes scorePop {
    0% {
        transform: scale(1);
        color: var(--primary-color);
    }

    40% {
        transform: scale(1.25);
        color: var(--correct-color);
    }

    100% {
        transform: scale(1);
        color: var(--primary-color);
    }
}

/* ============================
   STREAK BADGE
   ============================ */
.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.25s ease, transform 0.25s ease;
    vertical-align: middle;
}

.streak-badge.show {
    opacity: 1;
    transform: scale(1);
}

.streak-badge.bump {
    animation: streakBump 0.4s ease;
}

@keyframes streakBump {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25) rotate(-4deg);
    }
}

.streak-flame {
    animation: flameFlicker 1s ease-in-out infinite;
    display: inline-block;
}

@keyframes flameFlicker {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.12) rotate(-3deg);
    }
}

/* ============================
   TIMER BAR — urgency pulse
   ============================ */
.timer-bar.low-time {
    background-color: var(--incorrect-color);
    animation: timerPulse 0.6s ease-in-out infinite;
}

@keyframes timerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* ============================
   RESULTS SCREEN
   ============================ */
.results-card>* {
    opacity: 0;
    animation: resultsFadeUp 0.5s ease forwards;
}

.results-header {
    animation-delay: 0.05s;
}

.results-art {
    animation-delay: 0.15s;
}

.star-rating {
    animation-delay: 0.25s;
}

.results-score {
    animation-delay: 0.35s;
}

.results-percentage {
    animation-delay: 0.45s;
}

.results-message {
    animation-delay: 0.55s;
}

.results-actions {
    animation-delay: 0.65s;
}

#status-message:empty {
    display: none;
    animation: none;
}

@keyframes resultsFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.results-art {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    animation-name: resultsFadeUp, artBounce;
    animation-duration: 0.5s, 0.7s;
    animation-delay: 0.15s, 0.5s;
    animation-fill-mode: forwards;
}

@keyframes artBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(0);
    }

    70% {
        transform: translateY(-5px);
    }
}

.star-rating {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
    font-size: 1.6rem;
}

.star-rating .star {
    color: #e5e7eb;
    opacity: 0;
    transform: scale(0) rotate(-30deg);
    animation: starPop 0.4s ease forwards;
}

.star-rating .star.filled {
    color: #f59e0b;
}

@keyframes starPop {
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

    .category-btn:hover .category-icon,
    .quiz-card.question-enter,
    .option-btn.correct-pop,
    .option-btn.incorrect-shake,
    .floating-feedback,
    .quiz-score.score-pop,
    .streak-badge.bump,
    .streak-flame,
    .timer-bar.low-time,
    .results-card>*,
    .results-art,
    .star-rating .star {
        animation: none !important;
        transition: none !important;
    }

    .results-card>* {
        opacity: 1;
        transform: none;
    }

    .star-rating .star {
        opacity: 1;
        transform: none;
    }
}