/* ==========================================================================
   RESPONSIVE.CSS - Animations, Media Queries, Print Styles
   ========================================================================== */

/* --- ANIMATIONS --- */
.anim-fade {
    animation: fadeIn 0.3s ease-in-out;
}

.anim-pop {
    animation: popScale 0.15s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0.4;
        transform: translateY(5px);
    }

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

@keyframes popScale {
    0% {
        transform: scale(0.98);
    }

    50% {
        transform: scale(1.02);
    }

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

@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 var(--amb-min) var(--amb-c1);
    }

    100% {
        box-shadow: 0 0 var(--amb-max) var(--amb-c2);
    }
}

@keyframes pulse-border {
    0% {
        border-color: #fbbf24;
    }

    50% {
        border-color: transparent;
    }

    100% {
        border-color: #fbbf24;
    }
}

@keyframes pulse-yellow {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* Animation for Streak Increase */
.streak-pop {
    animation: streakPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

    50% {
        transform: scale(1.5);
    }

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

/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {
    #work-area.split-view {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    #quiz-card {
        padding: 1.5rem;
    }
}

/* --- PRINT STYLES --- */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    body::before {
        display: none;
    }

    #controls-bar,
    #shortcuts-btn,
    #shortcuts-panel,
    #pdf-pane,
    #nav-row {
        display: none !important;
    }

    #quiz-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        background: #fff !important;
    }
}