body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-touch {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-touch:active {
    transform: scale(0.97);
}

/* Primary CTA buttons inside lesson cards (e.g. "Next Question") stay
   pinned above the bottom workspace footer instead of being hidden under it
   on narrow/short mobile viewports. */
.card-cta-sticky {
    position: sticky;
    bottom: 0.75rem;
    z-index: 30;
}

.wave-bar {
    animation: bounce-wave 1.2s ease-in-out infinite alternate;
}
.wave-bar:nth-child(2) { animation-delay: 0.15s; }
.wave-bar:nth-child(3) { animation-delay: 0.3s; }
.wave-bar:nth-child(4) { animation-delay: 0.45s; }
.wave-bar:nth-child(5) { animation-delay: 0.6s; }
@keyframes bounce-wave {
    0%   { height: 4px; }
    100% { height: 28px; }
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

details[open] summary ~ * {
    animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
    0%   { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* Calm, slow ambient glow behind video */
@keyframes fire-glow {
    0% {
        transform: scale(0.98) translate(0, 0) rotate(0deg);
        filter: blur(18px);
    }
    33% {
        transform: scale(1.02) translate(-2px, -3px) rotate(0.5deg);
        filter: blur(24px);
    }
    66% {
        transform: scale(0.99) translate(1px, 2px) rotate(-0.3deg);
        filter: blur(20px);
    }
    100% {
        transform: scale(1.01) translate(-1px, -1px) rotate(0.2deg);
        filter: blur(22px);
    }
}

#video-glow-effect, #lecture-glow-effect {
    background: radial-gradient(circle, var(--brand-200) 0%, var(--brand-500) 45%, var(--brand-800) 100%);
    filter: blur(20px);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out, filter 1.2s ease-in-out;
}

#video-glow-effect.glow-active, #lecture-glow-effect.glow-active {
    opacity: 0.45; /* Balanced transparency, visible but not overwhelming */
}

.glow-playing {
    animation: fire-glow 8s ease-in-out infinite alternate;
}