/* All Animations and Visual Effects */

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

@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); }
}


/* Audio loading state - subtle pulse to indicate buffering */
@keyframes audioLoadingPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.flashcard.audio-loading .card-face {
    animation: audioLoadingPulse 0.6s ease-in-out infinite;
}

.flashcard.audio-loading .audio-btn {
    animation: audioLoadingPulse 0.4s ease-in-out infinite;
}

/* Audio visual effects - Romanization Premium Breathing Glow (elegant, professional) */
.flashcard.audio-playing .romanization {
    background: linear-gradient(135deg, rgba(61, 90, 128, 0.35) 0%, rgba(201, 169, 110, 0.25) 100%);
    border: 1px solid rgba(61, 90, 128, 0.5);
    box-shadow: 0 0 20px rgba(61, 90, 128, 0.18),
                0 0 40px rgba(61, 90, 128, 0.09),
                0 4px 15px rgba(201, 169, 110, 0.12);
    color: #2C4A6E;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard.audio-fading .romanization {
    background: linear-gradient(135deg, rgba(61, 90, 128, 0.25) 0%, rgba(201, 169, 110, 0.18) 100%);
    border: 1px solid rgba(61, 90, 128, 0.35);
    box-shadow: 0 0 15px rgba(61, 90, 128, 0.12),
                0 0 30px rgba(61, 90, 128, 0.06),
                0 4px 12px rgba(201, 169, 110, 0.07);
    color: #3D5A80;
}

/* Card glow effect during audio — no transform, no layout shift (和の感性: cards rest) */
.flashcard.audio-playing .card-face {
    animation: cardGlowBreathing 2.5s ease-in-out infinite;
}

.flashcard.audio-fading .card-face {
    animation: cardGlowFadeOut 1.2s ease-out forwards;
}

@keyframes cardGlowBreathing {
    0%, 100% {
        box-shadow: 0 25px 50px rgba(44, 44, 44, 0.07),
                    0 0 0 0 rgba(61, 90, 128, 0.0);
    }
    50% {
        box-shadow: 0 25px 50px rgba(44, 44, 44, 0.07),
                    0 0 30px 5px rgba(61, 90, 128, 0.15);
    }
}

@keyframes cardGlowFadeOut {
    0% {
        box-shadow: 0 25px 50px rgba(44, 44, 44, 0.07),
                    0 0 20px 3px rgba(61, 90, 128, 0.10);
    }
    100% {
        box-shadow: 0 25px 50px rgba(44, 44, 44, 0.07),
                    0 0 0 0 rgba(61, 90, 128, 0.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%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%) scale(0);
    border: 3px solid rgba(61, 90, 128, 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% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

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

/* Sound wave bars - Premium Purple */
.sound-wave {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    align-items: flex-end;
}

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

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

.sound-bar {
    width: 4px;
    background: linear-gradient(to top, #2C4A6E, #3D5A80);
    border-radius: 3px;
    animation: soundWavePulse 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(61, 90, 128, 0.5));
    transform-origin: bottom center;
}

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

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

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

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

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

/* Smoother soundwave animation with organic easing */
@keyframes soundWavePulse {
    0%, 100% {
        transform: scaleY(0.35);
        opacity: 0.7;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Focus mode glow — deeper glow, still no transform */
body.focus-mode .flashcard.audio-playing .card-face {
    animation: focusCardGlowBreathing 2.5s ease-in-out infinite;
}

@keyframes focusCardGlowBreathing {
    0%, 100% {
        box-shadow: 0 20px 60px rgba(61, 90, 128, 0.12),
                    0 10px 30px rgba(44, 44, 44, 0.03);
    }
    50% {
        box-shadow: 0 20px 60px rgba(61, 90, 128, 0.22),
                    0 10px 30px rgba(44, 44, 44, 0.03),
                    0 0 50px 8px rgba(61, 90, 128, 0.10);
    }
}

/* 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); }
}

/* ========================================
   PREMIUM DIRECTIONAL NAVIGATION (Focus Mode)
   Cinematic slide transitions with motion blur
   ======================================== */

/* Spring easing tokens */
:root {
    --nav-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --nav-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --nav-duration: 0.35s;
    --nav-blur-peak: 5px;
}

/* === SLIDE OUT (Exit animations) === */

/* Slide out to LEFT (for NEXT card - content exits left) */
body.focus-mode .flashcard.slide-out-left {
    animation: slideOutLeft var(--nav-duration) var(--nav-ease-out) forwards;
}

@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
    50% {
        opacity: 0.5;
        filter: blur(var(--nav-blur-peak));
    }
    100% {
        opacity: 0;
        transform: translateX(-8%);
        filter: blur(0);
    }
}

/* Slide out to RIGHT (for PREVIOUS card - content exits right) */
body.focus-mode .flashcard.slide-out-right {
    animation: slideOutRight var(--nav-duration) var(--nav-ease-out) forwards;
}

@keyframes slideOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
    50% {
        opacity: 0.5;
        filter: blur(var(--nav-blur-peak));
    }
    100% {
        opacity: 0;
        transform: translateX(8%);
        filter: blur(0);
    }
}

/* === SLIDE IN (Entry animations) === */

/* Slide in from RIGHT (for NEXT card - new content enters from right) */
body.focus-mode .flashcard.slide-in-right {
    animation: slideInRight var(--nav-duration) var(--nav-spring) forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(8%);
        filter: blur(var(--nav-blur-peak));
    }
    40% {
        opacity: 0.8;
        filter: blur(calc(var(--nav-blur-peak) * 0.2));
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* Slide in from LEFT (for PREVIOUS card - new content enters from left) */
body.focus-mode .flashcard.slide-in-left {
    animation: slideInLeft var(--nav-duration) var(--nav-spring) forwards;
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-8%);
        filter: blur(var(--nav-blur-peak));
    }
    40% {
        opacity: 0.8;
        filter: blur(calc(var(--nav-blur-peak) * 0.2));
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* === EDGE GLOW INDICATORS === */

/* Navigation edge glow overlay (injected dynamically) */
.nav-edge-glow {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 120px;
    pointer-events: none;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

/* Right edge glow (NEXT - entering from right) */
.nav-edge-glow.glow-right {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(61, 90, 128, 0.15) 0%,
        rgba(61, 90, 128, 0.07) 30%,
        transparent 100%
    );
}

/* Left edge glow (PREVIOUS - entering from left) */
.nav-edge-glow.glow-left {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(59, 130, 246, 0.07) 30%,
        transparent 100%
    );
}

/* Glow pulse animation */
.nav-edge-glow.active {
    animation: edgeGlowPulse 0.5s ease-out forwards;
}

@keyframes edgeGlowPulse {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* === MOBILE-SPECIFIC ENHANCEMENTS === */
@media (max-width: 768px) {
    :root {
        --nav-duration: 0.25s;
        --nav-blur-peak: 4px;
    }

    /* True swipe feel: card physically leaves the screen */
    @keyframes slideOutLeft {
        0% {
            opacity: 1;
            transform: translateX(0);
        }
        100% {
            opacity: 0;
            transform: translateX(-60%);
        }
    }

    @keyframes slideOutRight {
        0% {
            opacity: 1;
            transform: translateX(0);
        }
        100% {
            opacity: 0;
            transform: translateX(60%);
        }
    }

    @keyframes slideInRight {
        0% {
            opacity: 0;
            transform: translateX(50%);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideInLeft {
        0% {
            opacity: 0;
            transform: translateX(-50%);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Wider, more visible edge glow on mobile */
    .nav-edge-glow {
        width: 80px;
    }

    .nav-edge-glow.glow-right {
        background: linear-gradient(
            to left,
            rgba(61, 90, 128, 0.21) 0%,
            rgba(61, 90, 128, 0.09) 40%,
            transparent 100%
        );
    }

    .nav-edge-glow.glow-left {
        background: linear-gradient(
            to right,
            rgba(59, 130, 246, 0.21) 0%,
            rgba(59, 130, 246, 0.09) 40%,
            transparent 100%
        );
    }
}

/* =============================================================================
   一期一会 (Ichigo Ichie) — Unrepeatable Moments
   ============================================================================= */

/* Gold shimmer on first flip of the day */
@keyframes ichigoShimmer {
    0% {
        background-position: -200% 0;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        background-position: 200% 0;
        opacity: 0;
    }
}

body:not(.video-mode) .ichigo-first-flip .card-face {
    transition: opacity 0.7s ease-out;
}

body:not(.video-mode) .ichigo-first-flip .card-face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        transparent 30%,
        rgba(201, 169, 110, 0.2) 45%,
        rgba(201, 169, 110, 0.35) 50%,
        rgba(201, 169, 110, 0.2) 55%,
        transparent 70%
    );
    background-size: 300% 100%;
    animation: ichigoShimmer 1.2s ease-in-out forwards;
    pointer-events: none;
    z-index: 10;
}

/* Single sakura petal fall for first correct quiz answer of the day */
@keyframes ichigoSinglePetal {
    0% {
        opacity: 0;
        transform: translate(0, -20px) rotate(0deg) scale(0.6);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(30px, 120px) rotate(220deg) scale(0.3);
    }
}

.ichigo-petal {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 200;
    animation: ichigoSinglePetal 2.5s ease-out forwards;
}

.ichigo-petal::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #FFB7C5;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
}

/* =============================================================================
   奥 (Oku) — Depth in Transitions
   ============================================================================= */

/* Vignette closing effect for Grid→Focus transition */
@keyframes okuVignetteClose {
    0% {
        box-shadow: inset 0 0 0 0 rgba(44, 44, 44, 0);
    }
    50% {
        box-shadow: inset 0 0 120px 40px rgba(44, 44, 44, 0.15);
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(44, 44, 44, 0);
    }
}

body:not(.video-mode) .oku-vignette::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    animation: okuVignetteClose 0.5s ease-in-out forwards;
}

/* oku-entering class added/removed by JS — no animation needed,
   modal's own opacity+scale transition handles the open cleanly */
.quiz-modal.oku-entering {
    /* intentionally empty */
}

/* Reduced motion — disable all ichigo + oku animations */
@media (prefers-reduced-motion: reduce) {
    body:not(.video-mode) .ichigo-first-flip .card-face::after {
        animation: none;
        display: none;
    }

    .ichigo-petal {
        display: none;
    }

    body:not(.video-mode) .oku-vignette::after {
        animation: none;
        display: none;
    }

    .quiz-modal.oku-entering {
        animation: none;
    }

    .sumi-entering {
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    .sumi-disperse {
        animation: none !important;
        filter: none !important;
    }
}

/* ===== 気配 (Kehai) — Subtle Character Presence ===== */
/* Static CSS rules — never animated, just quiet presence */

body:not(.video-mode).kehai-active[data-kehai="rice"] .grid-container::after {
    content: '';
    position: fixed;
    bottom: 10%;
    right: 8%;
    width: 120px;
    height: 80px;
    background:
        radial-gradient(circle 2px at 20% 30%, currentColor 50%, transparent 51%),
        radial-gradient(circle 1.5px at 50% 60%, currentColor 50%, transparent 51%),
        radial-gradient(circle 2px at 75% 25%, currentColor 50%, transparent 51%),
        radial-gradient(circle 1.5px at 40% 80%, currentColor 50%, transparent 51%),
        radial-gradient(circle 2px at 85% 70%, currentColor 50%, transparent 51%);
    color: #a8a29e;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

body:not(.video-mode).kehai-active[data-kehai="ear"] .quiz-modal::after {
    content: '';
    position: absolute;
    top: 12%;
    right: -6px;
    width: 18px;
    height: 28px;
    background: #d6cfc7;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

body:not(.video-mode).kehai-active[data-kehai="footprints"] .grid-container {
    background-image:
        radial-gradient(circle 3px at 15% 85%, rgba(168, 162, 158, 0.04) 50%, transparent 51%),
        radial-gradient(circle 2.5px at 16% 82%, rgba(168, 162, 158, 0.04) 50%, transparent 51%),
        radial-gradient(circle 3px at 25% 90%, rgba(168, 162, 158, 0.03) 50%, transparent 51%),
        radial-gradient(circle 2.5px at 26% 87%, rgba(168, 162, 158, 0.03) 50%, transparent 51%);
}

/* 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(1px);
    }
    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 - Ultra-smooth typewriter effect with natural spring bounce */
@keyframes romanizationLetterType {
    0% {
        opacity: 0;
        transform: translateX(-4px) translateY(2px) scale(0.85);
        filter: blur(1px);
    }
    40% {
        opacity: 0.8;
        transform: translateX(0px) translateY(0px) scale(0.98);
        filter: blur(0px);
    }
    70% {
        opacity: 1;
        transform: translateX(0.5px) translateY(-0.5px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(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(2px) brightness(1.12);
    }
}

/* ENTRANCE: Premium materialization with perfect landing */
@keyframes enhancedCrossfadeEntrance {
    0% {
        opacity: 0;
        transform: scale(1.02) translateY(12px);
        filter: blur(2px) 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: #332F2B; /* Warm sumi ink - unified across all modes */
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
}

/* 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.09);
}

/* 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: #57534e; /* Warm stone - unified across all modes */
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
}

/* After animation completes, lock state and allow transitions */
body.video-mode .english-text.animated {
    animation: none !important; /* Prevent any animation restart */
    color: #57534e;
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
}

/* 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(2px) 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(44,44,44,0.07),  /* Main shadow */
        0 30px 60px rgba(44,44,44,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(44,44,44,0.07),
            0 30px 60px rgba(44,44,44,0.04);
    }
    100% {
        box-shadow:
            0 30px 80px rgba(44,44,44,0.01),
            0 60px 120px rgba(44,44,44,0.006);
    }
}

/* 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.55) 0%,
                                rgba(237, 241, 253, 0.53) 100%); /* Soft lavender tint */
    padding: 12px 24px;
    border-radius: 12px;
    backdrop-filter: blur(7px);
    border: 1px solid rgba(61, 90, 128, 0.15);
    box-shadow: 0 3px 12px rgba(61, 90, 128, 0.07);
}

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

body.video-mode .english-text {
    background: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.54) 0%,
                                rgba(250, 249, 247, 0.52) 100%); /* Neutral warm tint */
    padding: 10px 22px;
    border-radius: 10px;
    backdrop-filter: blur(7px);
    border: 1px solid rgba(44, 44, 44, 0.06);
    box-shadow: 0 3px 10px rgba(44, 44, 44, 0.04);
}

/* ===== 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 - EDUCATIONAL HANDWRITING ===== */

/* Japanese: Educational handwriting font for learning */
body.video-mode .japanese-text {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-weight: 600;
    letter-spacing: normal; /* Full-width parentheses have built-in spacing */
}

/* Romanization: Clean rounded sans for consistency */
body.video-mode .romanization {
    font-family: '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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}