/* Custom CSS: animations, flip effects, scrollbars */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.fade-in { animation: fadeIn 0.4s ease-out; }
.slide-in { animation: slideIn 0.3s ease-out; }

.flashcard { perspective: 1000px; }
.flashcard-inner {
    position: relative; width: 100%; height: 100%; text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 0.75rem;
    padding: 1.5rem; display: flex; flex-direction: column; justify-content: center;
}
.flashcard-back { transform: rotateY(180deg); }
.progress-bar { transition: width 0.5s ease-in-out; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a5b4fc; }
html.dark ::-webkit-scrollbar-thumb { background: #4f46e5; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #6366f1; }

.shortcut-tooltip { position: relative; cursor: help; }
.shortcut-tooltip::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #1e293b; color: white;
    padding: 0.5rem 0.75rem; border-radius: 0.375rem;
    font-size: 0.75rem; white-space: nowrap;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 10; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.shortcut-tooltip:hover::after {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

html.dark body {
    background-color: #0f172a;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(79, 70, 229, 0.15) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(168, 85, 247, 0.1) 0%, transparent 25%);
}