/* All Animations and Visual Effects */

/* Basic animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Sakura petal animation */
.sakura-petal {
    position: fixed;
    width: 20px;
    height: 20px;
    background: rgba(255, 182, 193, 0.6);
    border-radius: 0 100% 0 100%;
    animation: fall 10s linear infinite;
    pointer-events: none;
}

@keyframes fall {
    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* Audio visual effects - Romanization shake (matching focus mode elegant pink) */
.flashcard.audio-playing .romanization {
    animation: shakeRomanization 0.8s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.4) 0%, rgba(245, 87, 108, 0.3) 100%);
    border: 1px solid rgba(240, 147, 251, 0.6);
    box-shadow: 0 8px 35px rgba(240, 147, 251, 0.4),
                0 4px 15px rgba(245, 87, 108, 0.2);
    color: #f093fb;
    transition: all 0.3s ease-out;
}

.flashcard.audio-fading .romanization {
    animation: shakeRomanizationFadeOut 0.8s cubic-bezier(0.32, 0, 0.67, 0) forwards;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.35) 0%, rgba(245, 87, 108, 0.28) 100%);
    border: 1px solid rgba(240, 147, 251, 0.5);
    box-shadow: 0 8px 32px rgba(240, 147, 251, 0.35),
                0 4px 15px rgba(245, 87, 108, 0.18);
    color: #e589f0;
    opacity: 0.8;
    filter: blur(0.5px);
}

@keyframes shakeRomanizationFadeOut {
    0% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shakeRomanization {
    0%, 100% {
        transform: translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateX(-4px) rotate(-2deg) scale(1.02);
    }
    50% {
        transform: translateX(4px) rotate(2deg) scale(1.04);
    }
    75% {
        transform: translateX(-2px) rotate(-1deg) scale(1.02);
    }
}

/* Card breathing effect - applied to card faces to not interfere with flip transform */
/* Combined with glow border for simultaneous effects */
.flashcard.audio-playing .card-face {
    animation: cardBreathingWithGlow 2s ease-in-out infinite;
}

.flashcard.audio-fading .card-face {
    animation: cardBreathingFadeOut 1.4s cubic-bezier(0.32, 0, 0.67, 0) forwards;
    filter: blur(0.3px);
}

@keyframes cardBreathingWithGlow {
    0%, 100% {
        transform: scale(1) translateY(0);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12),
                    0 0 0 0 rgba(102, 126, 234, 0);
    }
    50% {
        transform: scale(1.015) translateY(-3px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12),
                    0 0 30px 5px rgba(102, 126, 234, 0.3);
    }
}

@keyframes cardBreathingFadeOut {
    0% {
        transform: scale(1.012) translateY(-2.5px);
    }
    30% {
        transform: scale(1.008) translateY(-1.5px);
    }
    60% {
        transform: scale(1.004) translateY(-0.8px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* Ripple effect */
.ripple-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.flashcard.audio-playing .ripple-container {
    opacity: 1;
}

.flashcard.audio-fading .ripple-container {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.32, 0, 0.67, 0);
    filter: blur(0.5px);
}

.ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(102, 126, 234, 0.3);
    border-radius: 50%;
    animation: rippleExpand 2s ease-out infinite;
}

.ripple:nth-child(2) {
    animation-delay: 0.5s;
}

.ripple:nth-child(3) {
    animation-delay: 1s;
}

@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 600px;
        height: 600px;
        opacity: 0;
    }
}

/* Floating music notes - emanating from Japanese text */
.music-notes {
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    width: 200px;
    height: 200px;
}

.flashcard.audio-playing .music-notes {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

.flashcard.audio-fading .music-notes {
    opacity: 0.3;
    transition: opacity 1.2s cubic-bezier(0.32, 0, 0.67, 0);
    filter: blur(0.5px);
}

.flashcard.audio-playing .music-note {
    position: absolute;
    font-size: 20px;
    opacity: 0;
    color: rgba(102, 126, 234, 0.8);
    animation: floatFromText 2s ease-out forwards;
    left: 50%;
    top: 50%;
}

.flashcard.audio-fading .music-note {
    position: absolute;
    font-size: 20px;
    opacity: 0 !important;
    color: rgba(102, 126, 234, 0.6);
    animation: none !important;
    left: 50%;
    top: 50%;
}

/* Ensure notes are hidden when not playing */
.flashcard:not(.audio-playing):not(.audio-fading) .music-note {
    opacity: 0 !important;
    animation: none !important;
}

/* Staggered positions and delays for organic feel (OPTIMIZED: compressed to 0-1.6s to match audio) */
.flashcard.audio-playing .music-note:nth-child(1) {
    animation-delay: 0s;
}

.flashcard.audio-playing .music-note:nth-child(2) {
    animation-delay: 0.4s;
}

.flashcard.audio-playing .music-note:nth-child(3) {
    animation-delay: 0.8s;
}

.flashcard.audio-playing .music-note:nth-child(4) {
    animation-delay: 1.2s;
}

.flashcard.audio-playing .music-note:nth-child(5) {
    animation-delay: 1.6s;
}

.flashcard.audio-fading .music-note:nth-child(1) {
    animation-delay: 0s;
}

.flashcard.audio-fading .music-note:nth-child(2) {
    animation-delay: 0.15s;
}

.flashcard.audio-fading .music-note:nth-child(3) {
    animation-delay: 0.3s;
}

.flashcard.audio-fading .music-note:nth-child(4) {
    animation-delay: 0.45s;
}

.flashcard.audio-fading .music-note:nth-child(5) {
    animation-delay: 0.6s;
}

@keyframes floatFromText {
    0% {
        transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    15% {
        opacity: 0.9;
    }
    85% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) translateY(-180px) translateX(var(--drift-x, 20px)) rotate(360deg) scale(1);
        opacity: 0;
    }
}

@keyframes floatNoteFadeOut {
    0% {
        transform: translate(-50%, -50%) translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) translateY(-120px) translateX(15px) rotate(180deg);
        opacity: 0;
    }
}

/* Add slight horizontal drift variation for each note */
.music-note:nth-child(1) { --drift-x: -25px; }
.music-note:nth-child(2) { --drift-x: 15px; }
.music-note:nth-child(3) { --drift-x: -10px; }
.music-note:nth-child(4) { --drift-x: 30px; }
.music-note:nth-child(5) { --drift-x: -20px; }

/* Focus mode - lighter color to match anime sky */
body.focus-mode .flashcard.audio-playing .music-note {
    color: rgba(135, 206, 235, 0.85);
}

body.focus-mode .flashcard.audio-fading .music-note {
    color: rgba(135, 206, 235, 0.6);
}

/* Glowing border animation - now combined with cardBreathing above */

/* Sound wave bars */
.sound-wave {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100;
}

.flashcard.audio-playing .sound-wave {
    opacity: 1;
}

.flashcard.audio-fading .sound-wave {
    opacity: 0;
    transition: opacity 1.0s cubic-bezier(0.32, 0, 0.67, 0);
    filter: blur(0.5px);
}

.sound-bar {
    width: 4px;
    background: linear-gradient(to top, #00d4ff, #0099ff);
    border-radius: 2px;
    animation: soundWave 0.8s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
}

.sound-bar:nth-child(1) {
    height: 20px;
    animation-delay: 0s;
}

.sound-bar:nth-child(2) {
    height: 30px;
    animation-delay: 0.1s;
}

.sound-bar:nth-child(3) {
    height: 25px;
    animation-delay: 0.2s;
}

.sound-bar:nth-child(4) {
    height: 35px;
    animation-delay: 0.3s;
}

.sound-bar:nth-child(5) {
    height: 28px;
    animation-delay: 0.4s;
}

@keyframes soundWave {
    0%, 100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1);
    }
}

/* Audio wobble for autoplay - applied to card faces to not interfere with flip */
.flashcard.audio-wobble .card-face {
    animation: subtleWobble 0.5s ease-in-out;
}

@keyframes subtleWobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-0.5deg); }
    75% { transform: rotate(0.5deg); }
}

/* Focus mode animations - combined breathing and glow */
body.focus-mode .flashcard.audio-playing .card-face {
    animation: focusCardBreathingWithGlow 2.5s ease-in-out infinite;
}

@keyframes focusCardBreathingWithGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 20px 60px rgba(135, 206, 235, 0.2),
                    0 10px 30px rgba(0, 0, 0, 0.05);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 20px 60px rgba(135, 206, 235, 0.4),
                    0 10px 30px rgba(0, 0, 0, 0.05),
                    0 0 60px 10px rgba(135, 206, 235, 0.2);
    }
}

/* Focus mode transition animations */
body.focus-mode .flashcard.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

body.focus-mode .flashcard.fade-in {
    animation: fadeInFocus 0.3s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes fadeInFocus {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes expandCard {
    from {
        transform: scale(0.8);
        opacity: 0.8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Video Mode Animations */

/* ===== KINETIC TYPOGRAPHY ANIMATIONS - WRITING EFFECTS ===== */

/* Japanese Character - Brush stroke effect (character-by-character) */
@keyframes japaneseCharacterDraw {
    from {
        opacity: 0;
        transform: scale(0.6) translateY(10px);
        filter: blur(2px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) translateY(-2px);
        filter: blur(0.5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* Romanization Letter - Typewriter effect (letter-by-letter) */
@keyframes romanizationLetterType {
    from {
        opacity: 0;
        transform: translateX(-3px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateX(1px) scale(1.05);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* English Word - Word-by-word fade */
@keyframes englishWordReveal {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Container animations for non-split text (fallback) */
@keyframes japaneseStrokeReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes romanizationTypewriter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes englishWordFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progressive reveal - text fade in and scale (legacy fallback) */
@keyframes videoTextReveal {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Subtle image zoom for engagement */
@keyframes videoImageZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

/* ============================================================
   PREMIUM CINEMATIC CROSSFADE TRANSITION
   Netflix/Disney-style overlapped transition with depth and motion blur
   Total duration: 2.0s with 0.5s overlap window
   ============================================================ */

/* ============================================================
   PREMIUM CROSSFADE - Apple-quality synchronized choreography
   Exit: Dissolve with subtle drift (1.0s)
   Entrance: Materialize with grace (0.8s, 0.3s delay)
   Overlap: 0.3s to 0.8s for smooth handoff
   ============================================================ */

/* EXIT: Smooth linear dissolve - 2 keyframes, no inflection points */
@keyframes enhancedCrossfadeExit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0) translateZ(0);
        filter: blur(0px) brightness(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.92)
                  translateY(calc(-20px + var(--exit-y, 0px)))
                  translateX(var(--exit-x, 0px))
                  translateZ(-80px);
        filter: blur(4px) brightness(1.12);
    }
}

/* ENTRANCE: Premium materialization with perfect landing */
@keyframes enhancedCrossfadeEntrance {
    0% {
        opacity: 0;
        transform: scale(1.02) translateY(12px);
        filter: blur(3px) brightness(1.1); /* Starts bright and dreamy */
    }
    /* 30% - Quick opacity rise for better overlap visibility */
    30% {
        opacity: 0.7;
        transform: scale(1.01) translateY(6px);
        filter: blur(1.5px) brightness(1.05);
    }
    /* 70% - Nearly there, slight overshoot for life */
    70% {
        opacity: 0.95;
        transform: scale(1.002) translateY(-1px); /* Tiny overshoot */
        filter: blur(0.3px) brightness(1.01);
    }
    /* 100% - Perfect landing into Phase 1 */
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px) brightness(1.02) contrast(1.02); /* Match Phase 1 enhancement */
    }
}

/* Container breathing - subtle pulse during transition */
@keyframes containerDepthShift {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.995); /* Barely perceptible contraction */
    }
    70% {
        transform: scale(1.002); /* Tiny expansion as new card arrives */
    }
    100% {
        transform: scale(1);
    }
}

/* Video mode progress bar animation */
@keyframes videoProgressFill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* ===== APPLY KINETIC TYPOGRAPHY IN VIDEO MODE - PASTEL FRIENDLY ===== */

/* Japanese Text - Soft purple/indigo pastel */
body.video-mode .japanese-text.reveal {
    animation: japaneseStrokeReveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    color: #5e72e4; /* Soft indigo - friendly and approachable */
    text-shadow: 0 2px 6px rgba(94, 114, 228, 0.15),
                 0 1px 3px rgba(94, 114, 228, 0.1);
}

/* Romanization - Light pastel gray */
body.video-mode .romanization.reveal {
    animation: romanizationTypewriter 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    color: #a0aec0; /* Light blue-gray - soft and airy */
    text-shadow: 0 1px 3px rgba(160, 174, 192, 0.15);
}

/* English - Soft coral/salmon pastel */
/* Animation ONLY applies to un-animated elements (prevents restart on phase change) */
body.video-mode .english-text.reveal:not(.animated) {
    animation: englishWordFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    color: #f5716c; /* Soft coral - warm and inviting */
    text-shadow: 0 2px 4px rgba(245, 113, 108, 0.15);
}

/* After animation completes, lock state and allow transitions */
body.video-mode .english-text.animated {
    animation: none !important; /* Prevent any animation restart */
    color: #f5716c;
    text-shadow: 0 2px 4px rgba(245, 113, 108, 0.15);
}

/* Ken Burns effect REMOVED - using phase-specific transforms instead */
/* Old continuous zoom was causing jarring visual effect */

/* ============================================================
   ENHANCED CROSSFADE CLASSES - Applying animations
   ============================================================ */

/* Enable 3D transforms - Cinematic depth perspective */
body.video-mode .flashcard-container {
    perspective: 1200px !important; /* Premium cinematic depth */
    perspective-origin: 50% 45%; /* Slightly above center for natural viewing angle */
}

body.video-mode .flashcard {
    transform-style: preserve-3d; /* Maintain 3D space through animations */
}

/* EXIT: Fast smooth exit with linear timing (0.5s - quick and decisive!) */
body.video-mode #flashcard-exiting-clone.crossfade-exit {
    transform-style: preserve-3d !important; /* Enable 3D transforms */
    -webkit-transform-style: preserve-3d !important; /* Safari support */
    will-change: transform, opacity, filter; /* GPU optimization for M2 Max */
    animation: enhancedCrossfadeExit 0.5s linear both !important; /* Linear: perfectly even progression, no perceptual variance */
    -webkit-animation: enhancedCrossfadeExit 0.5s linear both !important;
    pointer-events: none;
    z-index: 1; /* Below incoming card */
}

/* Also apply to regular flashcard if it gets the exit class */
body.video-mode .flashcard.crossfade-exit {
    transform-style: preserve-3d !important;
    will-change: transform, opacity, filter; /* GPU optimization */
    animation: enhancedCrossfadeExit 0.5s linear both !important; /* Linear: perfectly even */
    pointer-events: none;
    z-index: 1;
}

/* ENTRANCE: Premium materialization (0.8s animation, starts at 0.3s = elegant overlap) */
body.video-mode .flashcard.crossfade-entrance {
    /* Initial state before animation starts (matches first keyframe) */
    opacity: 0 !important;
    transform: scale(1.02) translateY(12px) !important;
    filter: blur(3px) brightness(1.1) !important;

    animation: enhancedCrossfadeEntrance 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
    animation-delay: 0.3s !important; /* Earlier start for better overlap synchronization */
    animation-fill-mode: both !important; /* Apply initial state during delay AND final state after */
    z-index: 2; /* Above exiting card */
}

/* Container subtle depth shift during transition (1.0s) */
body.video-mode .flashcard-container.crossfade-active {
    animation: containerDepthShift 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Enhanced shadow for exiting card - creates depth illusion */
body.video-mode #flashcard-exiting-clone {
    box-shadow:
        0 10px 30px rgba(0,0,0,0.12),  /* Main shadow */
        0 30px 60px rgba(0,0,0,0.06);  /* Atmospheric shadow */
    will-change: box-shadow;
    animation: shadowFade 0.5s linear forwards !important; /* Match linear exit timing */
}

@keyframes shadowFade {
    0% {
        box-shadow:
            0 10px 30px rgba(0,0,0,0.12),
            0 30px 60px rgba(0,0,0,0.06);
    }
    100% {
        box-shadow:
            0 30px 80px rgba(0,0,0,0.02),
            0 60px 120px rgba(0,0,0,0.01);
    }
}

/* Instant jump mode - quick flash for rapid navigation */
body.video-mode .flashcard.instant-jump {
    transition: opacity 0.1s ease-out !important;
}

/* Legacy support - keep old classes working if still referenced */
body.video-mode .flashcard.cinematic-exit {
    animation: enhancedCrossfadeExit 0.6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    pointer-events: none;
}

body.video-mode .flashcard.cinematic-entrance {
    animation: enhancedCrossfadeEntrance 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===== TEXT BACKGROUND SCRIM - PASTEL STYLE ===== */

/* Soft pastel backgrounds with gentle gradients */
body.video-mode .japanese-text {
    background: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.92) 0%,
                                rgba(237, 241, 253, 0.88) 100%); /* Soft lavender tint */
    padding: 12px 24px;
    border-radius: 12px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(94, 114, 228, 0.15);
    box-shadow: 0 3px 12px rgba(94, 114, 228, 0.12);
}

body.video-mode .romanization {
    background: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.55) 0%,
                                rgba(248, 250, 253, 0.50) 100%); /* Subtle tint, less glow on frost */
    padding: 7px 18px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(160, 174, 192, 0.08);
    box-shadow: 0 1px 3px rgba(160, 174, 192, 0.03);
}

body.video-mode .english-text {
    background: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.9) 0%,
                                rgba(255, 245, 244, 0.86) 100%); /* Soft peachy tint */
    padding: 10px 22px;
    border-radius: 10px;
    backdrop-filter: blur(11px);
    border: 1px solid rgba(245, 113, 108, 0.15);
    box-shadow: 0 3px 10px rgba(245, 113, 108, 0.1);
}

/* ===== WRITING EFFECT STYLES ===== */

/* Individual character/letter/word wrappers */
.char, .letter, .word {
    display: inline-block;
    opacity: 0;
}

/* Japanese characters with staggered animation */
body.video-mode .japanese-text .char {
    animation: japaneseCharacterDraw 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center bottom;
}

/* Romanization letters with staggered animation */
body.video-mode .romanization .letter {
    animation: romanizationLetterType 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* English words with staggered animation */
body.video-mode .english-text .word {
    animation: englishWordReveal 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    margin-right: 0.3em;
    /* Inherit smooth transitions from parent for phase changes */
    transition: inherit;
}

/* Last word shouldn't have margin */
body.video-mode .english-text .word:last-child {
    margin-right: 0;
}

/* Preserve spaces in romanization */
body.video-mode .romanization .letter.space {
    width: 0.25em;
    animation: none;
    opacity: 1;
}

/* ===== VIDEO MODE FONT SYSTEM - FRIENDLY ROUNDED ===== */

/* Japanese: Friendly rounded font for approachable feel */
body.video-mode .japanese-text {
    font-family: 'M PLUS Rounded 1c', 'Kosugi Maru', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Romanization: Clean rounded sans for consistency */
body.video-mode .romanization {
    font-family: 'Quicksand', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-style: normal; /* Override italic */
}

/* English: Rounded friendly sans-serif */
body.video-mode .english-text {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}