/* ===== TIER-BASED INTELLIGENT SIZING (MOBILE-FIRST) ===== */
/* Progressive enhancement: tier-based + container queries */
/* Using vw for aspect-ratio-aware scaling on YouTube 1920x1080 */

/* Enable container queries on card content */
body.revision-mode .card-front .card-content {
    container-type: inline-size !important;
    container-name: card-content;
}

/* YouTube Safe Zones */
:root {
    --safe-zone-top: 40px;
    --safe-zone-bottom: 10vh;      /* YouTube UI overlay */
    --safe-zone-horizontal: 40px;  /* Left/right margins */
}

/* TIER 1: Short text (1-8 chars) - Full cinematic mobile experience */
body.revision-mode .flashcard[data-text-tier="short"] {
    /* Mobile-first: 3x bigger using vw */
    --text-size-ja: clamp(5rem, 9vw, 11rem);     /* 80-172px @ 1920px */
    --text-size-en: clamp(3rem, 5.5vw, 7rem);    /* 48-105px @ 1920px */
    --text-size-roma: clamp(2rem, 3vw, 4rem);    /* 32-58px @ 1920px */
    --image-size-phase1: min(850px, 62vh);
    --image-size-phase2-4: min(700px, 52vh);
    --image-size-phase5: min(750px, 55vh);
}

/* TIER 2: Medium text (9-15 chars) - Balanced mobile layout */
body.revision-mode .flashcard[data-text-tier="medium"] {
    /* Mobile-first: 2.5x bigger, slightly reduced for longer text */
    --text-size-ja: clamp(4rem, 7.5vw, 9rem);    /* 64-144px @ 1920px */
    --text-size-en: clamp(2.5rem, 4.5vw, 6rem);  /* 40-86px @ 1920px */
    --text-size-roma: clamp(1.75rem, 2.5vw, 3.5rem); /* 28-48px @ 1920px */
    --image-size-phase1: min(750px, 58vh);
    --image-size-phase2-4: min(620px, 48vh);
    --image-size-phase5: min(680px, 52vh);
}

/* TIER 3: Long text (16+ chars) - Mobile readability priority */
body.revision-mode .flashcard[data-text-tier="long"] {
    /* Mobile-first: 2x bigger, conservative for long text containment */
    --text-size-ja: clamp(3.5rem, 6vw, 8rem);    /* 56-115px @ 1920px */
    --text-size-en: clamp(2rem, 4vw, 5rem);      /* 32-77px @ 1920px */
    --text-size-roma: clamp(1.5rem, 2.2vw, 3rem); /* 24-42px @ 1920px */
    --image-size-phase1: min(680px, 54vh);
    --image-size-phase2-4: min(550px, 44vh);
    --image-size-phase5: min(600px, 48vh);
}

/* Apply tier-based sizing to text elements */
/* Container query enhancement: use min() to combine tier size with container-based limit */
/* ========================================
   MOBILE-FIRST TEXT SIZING (YouTube 1920x1080)
   Using vw for aspect-ratio-aware scaling
   ======================================== */

body.revision-mode .japanese-text {
    /* Mobile-first: 3x bigger for YouTube readability */
    font-size: min(var(--text-size-ja, clamp(5rem, 9vw, 11rem)), 90cqw);
    /* 5rem = 80px min, 9vw = 172px @ 1920px, 11rem = 176px max */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.revision-mode .english-text,
body.revision-mode #video-mode-english {
    /* Mobile-first: 2.5x bigger for YouTube readability */
    font-size: min(var(--text-size-en, clamp(3rem, 5.5vw, 7rem)), 90cqw);
    /* 3rem = 48px min, 5.5vw = 105px @ 1920px, 7rem = 112px max */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.revision-mode .romanization,
body.revision-mode .front-romanization {
    /* Mobile-first: 2x bigger for YouTube readability */
    font-size: min(var(--text-size-roma, clamp(2rem, 3vw, 4rem)), 90cqw);
    /* 2rem = 32px min, 3vw = 58px @ 1920px, 4rem = 64px max */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Apply tier-based sizing to images (phase-specific) */
body.revision-mode .flashcard[data-text-tier] .vocabulary-image {
    max-height: var(--image-size-phase2-4);
    max-width: 76vw;
    /* Smooth transitions between tiers */
    transition:
        max-height 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        transform 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        filter 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phase 1: No image shown (active recall text only) */

/* Phase 2: Show image with full reveal */
body.revision-mode .flashcard[data-text-tier].revision-phase-2 .vocabulary-image {
    max-height: min(850px, 62vh);  /* Full cinematic size for reveal */
    max-width: 82vw;
}

/* Video mode specific spacing */
body.revision-mode .japanese-text {
    margin-top: clamp(30px, 4vh, 50px);
}

/* ===== TEXT GLOW EFFECTS WHEN AUDIO PLAYS (VIDEO MODE) ===== */

/* Phase 3: Audio phase - keep purple color, ensure visibility */
body.revision-mode .flashcard.revision-phase-3 .japanese-text {
    opacity: 1; /* Override Phase 2's opacity: 0, ensure visible before audio */
    /* Keep purple color (same as Phase 2) */
    color: #5e72e4;
    text-shadow: 0 2px 6px rgba(94, 114, 228, 0.15),
                 0 1px 3px rgba(94, 114, 228, 0.1);
    transition: text-shadow 0.3s ease-out, color 0.3s ease-out;
}

/* Phase 3: Ensure romanization and English are visible */
body.revision-mode .flashcard.revision-phase-3 .romanization,
body.revision-mode .flashcard.revision-phase-3 .front-romanization,
body.revision-mode .flashcard.revision-phase-3 #video-mode-english,
body.revision-mode .flashcard.revision-phase-3 .english-text {
    opacity: 1; /* Override Phase 2's opacity: 0, ensure visible before audio */
}

/* During audio: darker blue + glow (overrides Phase 2/3 purple) */
body.revision-mode .flashcard.audio-playing .japanese-text {
    color: #3d5a80; /* Darker blue during audio */
    text-shadow:
        0 0 10px rgba(102, 126, 234, 0.3),
        0 2px 10px rgba(61, 90, 128, 0.15);
    /* When audio ends, .audio-playing class removed → reverts to purple */
}

/* Romanization in revision mode - white text for frosted glass visibility */
body.revision-mode .flashcard.audio-playing .romanization {
    animation: shakeRomanization 0.8s ease-in-out infinite !important;
    background: rgba(102, 126, 234, 0.2) !important;
    border: 1px solid rgba(102, 126, 234, 0.7) !important;
    box-shadow: 0 8px 35px rgba(102, 126, 234, 0.5),
                0 4px 15px rgba(118, 75, 162, 0.3) !important;
    color: #ffffff !important; /* White for maximum readability on frosted glass */
    transition: all 0.3s ease-out;
}

body.revision-mode .flashcard.audio-fading .romanization {
    animation: shakeRomanizationFadeOut 0.8s cubic-bezier(0.32, 0, 0.67, 0) forwards !important;
    background: rgba(102, 126, 234, 0.15) !important;
    border: 1px solid rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4),
                0 4px 15px rgba(118, 75, 162, 0.2) !important;
    color: #ffffff !important;
    opacity: 0.7;
    filter: blur(0.5px);
}

/* English text subtle glow when visible */
body.revision-mode .flashcard .english-text {
    text-shadow:
        0 2px 15px rgba(94, 124, 163, 0.3),
        0 4px 25px rgba(94, 124, 163, 0.2);
    /* Smooth transition for phase changes (prevents blink when Phase 4 → 5) */
    transition: color 0.8s ease, text-shadow 0.8s ease, opacity 0.3s ease;
}

/* Pulsing glow animation */
@keyframes textGlowPulse {
    0%, 100% {
        text-shadow:
            0 0 20px rgba(102, 126, 234, 0.8),
            0 0 40px rgba(102, 126, 234, 0.6),
            0 0 60px rgba(102, 126, 234, 0.4),
            0 4px 10px rgba(0, 0, 0, 0.3);
    }
    50% {
        text-shadow:
            0 0 30px rgba(102, 126, 234, 1),
            0 0 60px rgba(102, 126, 234, 0.8),
            0 0 90px rgba(102, 126, 234, 0.6),
            0 4px 10px rgba(0, 0, 0, 0.3);
    }
}
/* ===== LOWER THIRD UI (VIDEO MODE ONLY) ===== */

.lower-third {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(180deg,
                                rgba(0, 0, 0, 0) 0%,
                                rgba(0, 0, 0, 0.4) 40%,
                                rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(12px);
    z-index: 200;
    display: none;
    align-items: center;
    padding: 0 40px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Subtle category color tint on lower-third */
.lower-third::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                                transparent 0%,
                                var(--category-primary) 40%,
                                var(--category-secondary) 100%);
    opacity: 0.12;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

body.revision-mode .lower-third {
    display: flex;
}

body.revision-mode .lower-third.visible {
    opacity: 1;
}

/* Lower third sections */
.lower-third-left {
    display: none; /* Hidden - clean design, category moved to top-right */
}

.lower-third-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.lower-third-right {
    flex: 0 0 280px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Category info - REMOVED (now in top-right badge) */
.category-info {
    display: none;
}

.category-name {
    display: none;
}

/* Word counter - HIDDEN (redundant with card top-left counter) */
.word-counter {
    display: none; /* Mobile-first: remove redundant counter */
}

.word-counter-current {
    display: none;
}

.word-counter-total {
    display: none;
}

/* Number change animation (odometer effect) */
@keyframes counterTick {
    0% {
        transform: translateY(0px);
        opacity: 1;
    }
    50% {
        transform: translateY(-8px);
        opacity: 0;
    }
    51% {
        transform: translateY(8px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.word-counter-current.updating {
    animation: counterTick 0.4s ease-out;
}

/* Progress bar container - NOW CENTER FEATURE */
.progress-track {
    flex: 1;
    height: 8px; /* Slightly taller for mobile visibility */
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    max-width: 600px; /* Prevent excessive width on large screens */
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--category-primary) 0%, var(--category-secondary) 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 12px rgba(102, 126, 234, 0.4),
        0 0 24px rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

/* Animated shimmer effect on progress bar */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%);
    animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* Progress percentage - LARGER for mobile */
.progress-percentage {
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 2rem; /* Much bigger for mobile visibility */
    font-weight: 700;
    min-width: 80px;
    text-align: right;
    transition: transform 0.2s ease-out;
}

/* Percentage pulse when updating */
.progress-percentage.updating {
    animation: percentagePulse 0.5s ease-out;
}

@keyframes percentagePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
        color: rgba(255, 255, 255, 1);
    }
}

/* Phase indicator icon - REMOVED (sound waves + screen content provide enough context) */
/*
.phase-indicator {
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.phase-indicator.active {
    opacity: 1;
}
*/

/* ========================================
   VIDEO MODE: FROSTED GLASS CARD EFFECT
   ======================================== */

/* Base frosted glass for all video mode phases */
body.revision-mode .card-face {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: background 0.8s ease-out, backdrop-filter 0.8s ease-out;
}

/* Phase 1: Maximum background visibility (Silent viewing) */
body.revision-mode .flashcard.revision-phase-1 .card-face {
    background: rgba(255, 255, 255, 0.12) !important; /* Step 3: All phases boost */
    backdrop-filter: blur(16px) saturate(125%); /* Step 3: +4px blur */
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Padding handled by smart scale calculation - no manual overrides needed */

/* Phase 2-4: Text readability priority */
body.revision-mode .flashcard.revision-phase-2 .card-face,
body.revision-mode .flashcard.revision-phase-3 .card-face,
body.revision-mode .flashcard.revision-phase-4 .card-face {
    background: rgba(255, 255, 255, 0.42) !important; /* Step 3: +0.04 more opacity */
    backdrop-filter: blur(46px) saturate(175%); /* Step 3: +4px blur, +5% sat */
    -webkit-backdrop-filter: blur(46px) saturate(175%);
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

/* Phase 5: Balanced consolidation */
body.revision-mode .flashcard.revision-phase-5 .card-face {
    background: rgba(255, 255, 255, 0.20) !important; /* Step 3: +0.05 more */
    backdrop-filter: blur(24px) saturate(140%); /* Step 3: +6px blur */
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Text readability enhancement with subtle shadows */
body.revision-mode .japanese-text,
body.revision-mode .front-romanization,
body.revision-mode #video-mode-english {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Darker romanization color for frosted background visibility */
body.revision-mode .romanization,
body.revision-mode .front-romanization {
    color: #4338ca !important; /* Darker indigo from #667eea */
}

/* Image maintains clarity against frosted background */
body.revision-mode .vocabulary-image {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

/* ========================================
   ENHANCEMENT 1: WASHI PAPER TEXTURE
   ======================================== */

/* Subtle washi paper texture overlay to unify zen backgrounds with anime content */
body.revision-mode .card-face::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),
        repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0, 0, 0, 0.01) 3px, rgba(0, 0, 0, 0.01) 6px);
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

/* Ensure content stays above texture */
body.revision-mode .card-content {
    position: relative;
    z-index: 2;
}

/* ========================================
   ENHANCEMENT 2: SHARED COLOR PALETTE
   ======================================== */

/* Category-matched tint overlay - uses dynamic CSS variables from theming.js */
/* Disabled when color mode classes are active (EN→JP blue, JP→EN purple) */
body.revision-mode:not(.revision-en-jp):not(.revision-jp-en)::before {
    content: '';
    position: fixed;
    inset: 0;
    /* Extract RGB from category primary color and apply at 4% opacity */
    background: color-mix(in srgb, var(--category-primary, #FFF8F0) 4%, transparent);
    pointer-events: none;
    z-index: 1; /* Above breathing background, below UI elements */
}

/* No filter on body - we'll apply desaturation only to background layer */

/* ========================================
   ENHANCEMENT 3: BREATHING BACKGROUNDS
   ======================================== */

/* Subtle breathing animation for backgrounds - synced to 20s word cycle */
@keyframes backgroundBreathe {
    0%, 100% {
        transform: scale(1.0) translate(0, 0);
    }
    25% {
        transform: scale(1.03) translate(-1%, 0);
    }
    50% {
        transform: scale(1.05) translate(-1%, -1%);
    }
    75% {
        transform: scale(1.03) translate(0, -1%);
    }
}

/* Background layer with breathing animation - sits behind everything */
body.revision-mode::after {
    content: '';
    position: fixed;
    inset: -5%; /* Slight overflow to prevent edges showing during animation */
    background-image: var(--category-background);
    background-size: cover;
    background-position: center;
    animation: backgroundBreathe 20s ease-in-out infinite;
    will-change: transform, filter;
    z-index: -1; /* Behind everything including tint overlay */
    /* Default state = Phase 1 (blurred) to avoid flash when loading new words */
    filter: blur(28px) saturate(60%) brightness(80%) contrast(0.95);
    transform: scale(1.05);
    /* CRITICAL FIX: Instant blur-increase (0→28px), slow blur-decrease (28→0px) */
    /* This prevents showing unblurred background during word transitions */
    transition: filter 0s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

/* ========================================
   CINEMATIC PHASE TRANSITIONS
   Netflix/Disney+ Quality Reveal System
   ======================================== */

/* PHASE 1: Heavy blur + slight zoom out (calm, meditative atmosphere) */
body.revision-mode:has(.flashcard.revision-phase-1)::after {
    filter: blur(28px) saturate(60%) brightness(80%) contrast(0.95);
    transform: scale(1.05); /* Slight zoom creates depth */
    animation: backgroundBreathe 20s ease-in-out infinite;
    /* CRITICAL: Instant re-blur when returning to Phase 1 (prevents hint leakage) */
    transition: filter 0s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PHASE 1: Remove blur for EN→JP mode (English prompt doesn't need blur) */
body.revision-mode.revision-english-first:has(.flashcard.revision-phase-1)::after {
    filter: blur(0px) saturate(85%) brightness(98%);
    transform: scale(1.0);
}

/* PHASE 2: Static background (aligned with practice mode architecture) */
body.revision-mode:has(.flashcard.revision-phase-2)::after {
    /* PERFORMANCE FIX: Static filter like practice mode - no animation at 5K = smooth */
    filter: saturate(85%) brightness(98%);
    transform: scale(1.0);
    animation: backgroundBreathe 20s ease-in-out infinite;
    /* Slow cinematic unblur (Phase 1→2 reveal effect) */
    transition: filter 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PHASE 3: Warm consolidation - subtle color grading */
body.revision-mode:has(.flashcard.revision-phase-3)::after {
    filter: blur(0px) saturate(100%) brightness(100%) contrast(1.02);
    transform: scale(1.0);
}

/* ========================================
   COLOR TEMPERATURE SHIFTS
   Warm/cool color grading evolution through phases
   ======================================== */

/* Phase 1: Cool blue tint (mystery) */
body.revision-mode .flashcard.revision-phase-1 .card-face {
    transition: filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phase 2: Gentle warmth during reveal (subtle, not flashy) */
body.revision-mode .flashcard.revision-phase-2 .card-face {
    animation: gentleWarmthReveal 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes gentleWarmthReveal {
    0% {
        filter: hue-rotate(0deg) brightness(1.0);
    }
    60% {
        filter: hue-rotate(3deg) brightness(1.06); /* Subtle peak - reduced from 1.12 */
    }
    100% {
        filter: hue-rotate(2deg) brightness(1.04); /* Settled warm - reduced from 1.08 */
    }
}

/* Phase 3: Neutral balanced (consolidation) */
body.revision-mode .flashcard.revision-phase-3 .card-face {
    filter: hue-rotate(0deg) brightness(1.05);
}

/* ========================================
   IMAGE TRANSFORMATION SYSTEM
   Vocabulary image reveal with scale and glow
   ======================================== */

/* Base image properties */
body.revision-mode .vocabulary-image {
    will-change: transform, filter, opacity;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

/* PHASE 1: Image hidden for active recall */
body.revision-mode .flashcard.revision-phase-1 .vocabulary-image {
    display: none;
    opacity: 0;
}

/* PHASE 2: GENTLE IMAGE REVEAL - Smooth clarity emergence */
body.revision-mode .flashcard.revision-phase-2 .vocabulary-image {
    animation: imageGentleReveal 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes imageGentleReveal {
    0% {
        transform: scale(0.96);
        filter: brightness(0.9) saturate(0.85) blur(0.5px) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
        opacity: 0.85;
    }
    30% {
        transform: scale(0.98); /* Gentle start */
        filter: brightness(0.95) saturate(0.92) blur(0.3px) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18));
        opacity: 0.92;
    }
    60% {
        transform: scale(1.02); /* Subtle peak - no overshoot */
        filter: brightness(1.05) saturate(1.05) blur(0px) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
        opacity: 1;
    }
    85% {
        transform: scale(1.01); /* Near final */
        filter: brightness(1.02) saturate(1.02) blur(0px) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.18));
        opacity: 1;
    }
    100% {
        transform: scale(1.0);
        filter: brightness(1.01) saturate(1.01) blur(0px) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.18));
        opacity: 1;
    }
}

/* PHASE 3: Settled warm state */
body.revision-mode .flashcard.revision-phase-3 .vocabulary-image {
    transform: scale(1.0);
    filter: brightness(1.02) saturate(1.02) blur(0px) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.15));
    opacity: 1;
}

/* ========================================
   ENHANCED FROSTED GLASS EVOLUTION
   Dynamic backdrop blur through phases
   ======================================== */

/* Phase-specific frosted glass with smooth transitions */
body.revision-mode .flashcard .card-face {
    transition: background 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                border 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PHASE 1: Maximum transparency (background focus) */
body.revision-mode .flashcard.revision-phase-1 .card-face {
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.08),
        inset 0 0 40px rgba(102, 126, 234, 0.06);
}

/* ========================================
   COUNTDOWN CRESCENDO: TEXT ZOOM + GLOW
   Ken Burns effect synced with countdown
   ======================================== */

/* Phase 1 text has smooth transitions for crescendo effect */
body.revision-mode .flashcard.revision-phase-1 .japanese-text,
body.revision-mode .flashcard.revision-phase-1 .english-text {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                text-shadow 0.6s ease;
    will-change: transform, text-shadow;

    /* Smart text wrapping - safety net for edge cases */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal; /* Don't break mid-word unless necessary */
    line-height: 1.3; /* Comfortable spacing if text wraps */
    max-width: 90vw; /* Container safety - never exceed viewport */
    padding: 0 2vw; /* Breathing room from edges */
    box-sizing: border-box;
}

/* Progressive Ken Burns zoom synced with countdown - Count 3 */
body.revision-mode .flashcard.revision-phase-1[data-countdown="3"] .japanese-text,
body.revision-mode .flashcard.revision-phase-1[data-countdown="3"] .english-text {
    transform: scale(1.0);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Count 2 - Building tension, text rushing closer */
body.revision-mode .flashcard.revision-phase-1[data-countdown="2"] .japanese-text,
body.revision-mode .flashcard.revision-phase-1[data-countdown="2"] .english-text {
    transform: scale(var(--safe-scale-count-2, 1.2)); /* Dynamic safe scale with fallback */
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 0 12px rgba(255, 255, 255, 0.12);
}

/* Count 1 - Maximum impact, text fills vision */
body.revision-mode .flashcard.revision-phase-1[data-countdown="1"] .japanese-text,
body.revision-mode .flashcard.revision-phase-1[data-countdown="1"] .english-text {
    transform: scale(var(--safe-scale-count-1, 1.35)); /* Dynamic safe scale with fallback */
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 0 24px rgba(255, 255, 255, 0.2);
}

/* ========================================
   SMART DYNAMIC SCALING (Phase 2/3 Algorithm Applied to Countdown)
   JavaScript calculates safe scale ceiling per word before overflow
   CSS uses --safe-scale-count-2 and --safe-scale-count-1 variables
   Fallback values: 1.2 and 1.35 (if JS hasn't run yet)
   Result: Maximum drama WITHOUT overflow - works for ANY word length
   ======================================== */

/* NO tier-specific overrides needed - dynamic calculation handles all cases! */

/* PHASE 2: Enhanced opacity for text readability during reveal */
body.revision-mode .flashcard.revision-phase-2 .card-face {
    /* Static backdrop-filter - focus on content, not glass effects */
    background: rgba(255, 255, 255, 0.44) !important;
    backdrop-filter: blur(48px) saturate(175%);
    -webkit-backdrop-filter: blur(48px) saturate(175%);
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    box-shadow:
        0 12px 42px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(255, 255, 255, 0.06),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    /* CSS transition handles Phase 1→2 smoothly */
}

/* PHASE 3: Balanced transparency for consolidation */
body.revision-mode .flashcard.revision-phase-3 .card-face {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.10),
        0 0 25px rgba(255, 255, 255, 0.08),
        inset 0 0 30px rgba(255, 255, 255, 0.08);
}

/* ========================================
   SUBTLE TEXT DEPTH (Phase 2)
   Gentle glow for clarity, no glitch effects
   ======================================== */

/* Soft text glow during reveal - NO chromatic aberration */
body.revision-mode .flashcard.revision-phase-2 .japanese-text,
body.revision-mode .flashcard.revision-phase-2 .romanization,
body.revision-mode .flashcard.revision-phase-2 #video-mode-english {
    animation: subtleTextGlow 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes subtleTextGlow {
    0% {
        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.15),
            0 4px 16px rgba(0, 0, 0, 0.1);
    }
    60% {
        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.15),
            0 4px 16px rgba(0, 0, 0, 0.1),
            0 0 12px rgba(255, 255, 255, 0.12); /* Gentle peak glow */
    }
    100% {
        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.15),
            0 4px 16px rgba(0, 0, 0, 0.1),
            0 1px 3px rgba(255, 255, 255, 0.2); /* Subtle clarity */
    }
}

/* ========================================
   MINIMAL BORDER ACCENT (Phase 2)
   Very subtle border presence, barely visible
   ======================================== */

/* Minimal border glow during Phase 2 reveal */
body.revision-mode .flashcard.revision-phase-2 {
    position: relative;
}

body.revision-mode .flashcard.revision-phase-2::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px; /* Match card radius + 2px */
    background: linear-gradient(
        135deg,
        rgba(102, 126, 234, 0.2) 0%,  /* Reduced from 0.4 */
        rgba(118, 75, 162, 0.2) 25%,  /* Reduced from 0.4 */
        rgba(237, 100, 166, 0.2) 50%, /* Reduced from 0.4 */
        rgba(255, 154, 158, 0.2) 75%, /* Reduced from 0.4 */
        rgba(102, 126, 234, 0.2) 100% /* Reduced from 0.4 */
    );
    background-size: 300% 300%;
    opacity: 0;
    z-index: -1;
    animation: minimalBorderReveal 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
               borderGlowFlow 4s ease-in-out infinite; /* Slower flow */
    filter: blur(8px);
}

@keyframes minimalBorderReveal {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0.3; /* Very subtle - reduced from 0.6 */
    }
    100% {
        opacity: 0.12; /* Barely visible - reduced from 0.25 */
    }
}

@keyframes borderGlowFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ========================================
   TEXT REVEAL POLISH
   Enhanced text animations with staggered timing
   ======================================== */

/* Japanese text gentle reveal in Phase 2 */
body.revision-mode .flashcard.revision-phase-2 .japanese-text {
    opacity: 0; /* Start invisible, animation will fade in */
    animation: gentleTextReveal 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.2s; /* Staggered first */
    /* Soft purple/indigo color (matches practice mode .reveal) */
    color: #5e72e4;
    text-shadow: 0 2px 6px rgba(94, 114, 228, 0.15),
                 0 1px 3px rgba(94, 114, 228, 0.1);
}

@keyframes gentleTextReveal {
    0% {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }
    70% {
        opacity: 1;
        transform: translateY(-1px); /* Minimal float */
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
        filter: blur(0px);
    }
}

/* Romanization gentle reveal */
body.revision-mode .flashcard.revision-phase-2 .romanization,
body.revision-mode .flashcard.revision-phase-2 .front-romanization {
    opacity: 0; /* Start invisible, animation will fade in */
    animation: gentleTextReveal 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.4s; /* Staggered middle */
}

/* English text gentle reveal */
body.revision-mode .flashcard.revision-phase-2 #video-mode-english,
body.revision-mode .flashcard.revision-phase-2 .english-text {
    opacity: 0; /* Start invisible, animation will fade in */
    animation: gentleTextReveal 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.6s; /* Staggered last */
}

/* ========================================
   ZEN MINIMALISM TIMER (Phase 1)
   Ultra-subtle presence through gentle border breathing
   Japanese aesthetic: Wabi-sabi, understated elegance
   ======================================== */

/* Zen breathing - single thin border with gentle opacity pulse */
body.revision-mode .flashcard.revision-phase-1 {
    border: 1px solid rgba(60, 60, 60, 0.08);
    animation: zenBreath 3s ease-in-out infinite;
}

@keyframes zenBreath {
    0%, 100% {
        border-color: rgba(60, 60, 60, 0.06);
    }
    50% {
        border-color: rgba(60, 60, 60, 0.14);
    }
}

/* Accelerate breathing in last 2 seconds (subtle time awareness) */
body.revision-mode .flashcard.revision-phase-1.almost-time {
    animation: zenBreathFast 1.5s ease-in-out infinite;
}

@keyframes zenBreathFast {
    0%, 100% {
        border-color: rgba(60, 60, 60, 0.08);
    }
    50% {
        border-color: rgba(60, 60, 60, 0.18);
    }
}

/* ============================================================
   GENTLE COUNTDOWN OVERLAY - ZEN BREATHING TIMER
   Calm, meditative countdown for active recall
   Philosophy: Awareness without pressure, breathing without urgency
   ============================================================ */

/* Main Container - Fullscreen overlay */
.countdown-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10003;
    pointer-events: none;
    overflow: hidden;
}

/* Show countdown when active */
body.revision-mode .countdown-overlay.active {
    display: block;
}

/* ===== LAYER 1: SOFT AMBIENT BACKGROUND ===== */
.countdown-vignette {
    position: absolute;
    bottom: 0;
    left: calc(50% - 690px); /* Position at bottom-left of flashcard area */
    width: 300px;
    height: 300px;
    background: radial-gradient(
        ellipse at bottom left,
        rgba(102, 126, 234, 0.03) 0%,
        transparent 60%
    );
    pointer-events: none;
    animation: gentleBreath 4s ease-in-out infinite;
}

@keyframes gentleBreath {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

/* ===== LAYER 2: GENTLE BREATHING RINGS ===== */
.countdown-pulse-waves {
    position: absolute;
    bottom: 140px;
    left: calc(50% - 540px); /* Align with countdown center: 50% - 640px + 40px + 60px = -540px */
    pointer-events: none;
}

.pulse-wave {
    position: absolute;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 1px solid rgba(102, 126, 234, 0.15);
    opacity: 0;
    will-change: transform, opacity;
}

/* Slow, meditative breathing waves */
body.revision-mode .countdown-overlay.active .pulse-wave-1 {
    animation: breathingRing 3s ease-in-out infinite;
}

body.revision-mode .countdown-overlay.active .pulse-wave-2 {
    animation: breathingRing 3s ease-in-out 1s infinite;
}

body.revision-mode .countdown-overlay.active .pulse-wave-3 {
    animation: breathingRing 3s ease-in-out 2s infinite;
}

@keyframes breathingRing {
    0% {
        transform: scale(0.95);
        opacity: 0;
        border-width: 1px;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.3;
        border-width: 1px;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
        border-width: 1px;
    }
}

/* ===== LAYER 3: GENTLE FLOATING PARTICLES ===== */
.countdown-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.countdown-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(102, 126, 234, 0.2);
    pointer-events: none;
}

/* Gentle floating animation (like snow or petals) */
@keyframes gentleFloat {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translate(var(--tx), calc(var(--ty) * 0.5)) scale(1.2);
        opacity: 0.3;
    }
    100% {
        transform: translate(calc(var(--tx) * 0.3), var(--ty)) scale(0.8);
        opacity: 0;
    }
}

/* ===== LAYER 4: MAIN RING AND NUMBER CONTAINER ===== */
.countdown-ring-container {
    position: absolute;
    top: 30%; /* Upper-center - above the main word */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Perfect centering */
    width: 200px; /* Increased from 120px - 67% bigger */
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    /* No scaling animations - static size to prevent overflow */
}

/* NO progressive scaling - keep constant size to avoid overflow */
.countdown-overlay[data-count="3"] .countdown-ring-container {
    transform: translate(-50%, -50%);
}

.countdown-overlay[data-count="2"] .countdown-ring-container {
    transform: translate(-50%, -50%);
}

.countdown-overlay[data-count="1"] .countdown-ring-container {
    transform: translate(-50%, -50%);
}

/* NO pulse animations - removed to prevent overflow */
.countdown-overlay[data-count="3"] .countdown-ring-container.impact {
    /* No animation */
}

.countdown-overlay[data-count="2"] .countdown-ring-container.impact {
    /* No animation */
}

.countdown-overlay[data-count="1"] .countdown-ring-container.impact {
    /* No animation */
}

/* Pulse animations removed */
@keyframes gentlePulse3 {
    0% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -50%); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes gentlePulse2 {
    0% { transform: scale(1.15); }
    50% { transform: scale(1.23); }
    100% { transform: scale(1.15); }
}

@keyframes gentlePulse1 {
    0% { transform: scale(1.3); }
    50% { transform: scale(1.38); }
    100% { transform: scale(1.3); }
}

/* Outer soft glow ring */
.countdown-outer-glow {
    position: absolute;
    width: 240px; /* Increased to match new ring size */
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        transparent 65%,
        rgba(102, 126, 234, 0.12) 75%,
        transparent 90%
    );
    animation: gentleGlow 3s ease-in-out infinite;
}

@keyframes gentleGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
}

/* SVG Ring System - Bigger for mobile visibility */
.countdown-ring {
    position: absolute;
    width: 180px; /* Increased from 100px - 80% bigger */
    height: 180px;
    filter: drop-shadow(0 0 12px rgba(102, 126, 234, 0.3));
    transform: rotate(-90deg);
    transition: filter 0.8s ease;
}

.countdown-ring .ring-track {
    transition: stroke 0.8s ease;
}

.countdown-ring .ring-progress {
    transition: stroke 0.8s ease;
    filter: drop-shadow(0 0 4px currentColor);
    /* Smooth real-time depletion over 3 seconds */
    stroke-dashoffset: 0;
}

/* Animate ring depletion when countdown is active */
body.revision-mode .countdown-overlay.active .ring-progress {
    animation: ringDeplete 3s linear forwards;
}

@keyframes ringDeplete {
    0% {
        stroke-dashoffset: 0; /* Full ring */
    }
    100% {
        stroke-dashoffset: 628.32; /* Empty ring */
    }
}

/* PAUSE STATE: Freeze all countdown animations */
.countdown-overlay.paused *,
.countdown-overlay.paused .countdown-number,
.countdown-overlay.paused .countdown-number-shadow,
.countdown-overlay.paused .countdown-number-highlight,
.countdown-overlay.paused .ring-progress {
    animation-play-state: paused !important;
}

.countdown-ring .ring-inner {
    opacity: 0.15;
}

/* Calm monochromatic color - stays soothing throughout */
.countdown-overlay[data-count="3"] .ring-progress {
    stroke: rgba(102, 126, 234, 0.6);
}

.countdown-overlay[data-count="2"] .ring-progress {
    stroke: rgba(102, 126, 234, 0.7);
}

.countdown-overlay[data-count="1"] .ring-progress {
    stroke: rgba(102, 126, 234, 0.85);
}

/* Countdown Number - Soft and minimal */
.countdown-number-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Shadow layer (subtle depth) */
.countdown-number-shadow {
    position: absolute;
    font-size: 72px; /* Increased from 48px - 50% bigger */
    font-weight: 400; /* Slightly bolder */
    color: rgba(0, 0, 0, 0.15);
    font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
    line-height: 1;
    transform: translate(3px, 4px);
    filter: blur(4px);
    opacity: 0;
}

/* Main number - bigger for mobile visibility */
.countdown-number {
    position: relative;
    font-size: 72px; /* Increased from 48px - 50% bigger */
    font-weight: 400; /* Slightly bolder for better readability */
    color: rgba(102, 126, 234, 0.95);
    font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
    line-height: 1;
    text-shadow:
        0 0 20px rgba(102, 126, 234, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: scale(1);
    will-change: transform, opacity;
}

/* Highlight layer (subtle) */
.countdown-number-highlight {
    position: absolute;
    font-size: 72px; /* Increased from 48px - 50% bigger */
    font-weight: 400;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 60%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
    line-height: 1;
    opacity: 0;
}

/* Gentle breathing entrance */
.countdown-number.animate,
.countdown-number-shadow.animate,
.countdown-number-highlight.animate {
    animation: gentleBreatheIn 1s ease-out forwards;
}

@keyframes gentleBreatheIn {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    60% {
        opacity: 0.9;
        transform: scale(1.04);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Gentle breathing exit */
.countdown-number.exit,
.countdown-number-shadow.exit,
.countdown-number-highlight.exit {
    animation: gentleBreatheOut 0.6s ease-in forwards;
}

@keyframes gentleBreatheOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

/* Prompt text - encouraging, not demanding */
.countdown-prompt {
    position: absolute;
    bottom: -35px;
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(102, 126, 234, 0.6);
    letter-spacing: 0.1em;
    opacity: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.countdown-prompt.show {
    animation: gentlePromptFade 3s ease-in-out;
}

@keyframes gentlePromptFade {
    0%, 100% { opacity: 0; transform: translateY(5px); }
    30%, 70% { opacity: 0.6; transform: translateY(0); }
}

/* ===== LAYER 5: GENTLE RIPPLE (NO SHOCKWAVE) ===== */
.countdown-shockwave {
    position: absolute;
    bottom: 140px;
    left: calc(50% - 540px); /* Align with countdown center */
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 1px solid rgba(102, 126, 234, 0.3);
    opacity: 0;
    pointer-events: none;
}

.countdown-shockwave.trigger {
    animation: gentleRipple 1.2s ease-out forwards;
}

@keyframes gentleRipple {
    0% {
        transform: scale(1);
        opacity: 0.4;
        border-width: 1px;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
        border-width: 1px;
    }
}

/* ===== LAYER 6: SOFT AMBIENT GLOW (NO RAYS) ===== */
.countdown-light-rays {
    display: none; /* Hidden for corner countdown - no need for full-screen ambience */
}

.light-ray {
    display: none;
}

/* Countdown complete fade-out */
.countdown-overlay.fade-out {
    animation: countdownComplete 0.8s ease-out forwards;
}

@keyframes countdownComplete {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* ========================================
   CINEMATIC CARD TRANSFORMATION SYSTEM
   Phase-based depth, scale, and glow evolution
   ======================================== */

/* Base card transformation properties */
body.revision-mode .flashcard {
    will-change: transform, filter, box-shadow;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

/* PHASE 1: Slightly smaller, soft focus (contemplation) */
body.revision-mode .flashcard.revision-phase-1 {
    transform: scale(0.97);
    filter: brightness(0.95) saturate(0.9);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 0 40px rgba(102, 126, 234, 0.08); /* Soft inner glow */
}

/* PHASE 2: GENTLE CARD REVEAL - Smooth emergence, no flash */
body.revision-mode .flashcard.revision-phase-2 {
    animation: cardGentleReveal 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes cardGentleReveal {
    0% {
        transform: scale(0.97);
        filter: brightness(0.95) saturate(0.9);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 4px 16px rgba(0, 0, 0, 0.08),
            inset 0 0 40px rgba(102, 126, 234, 0.06);
    }
    30% {
        transform: scale(0.99); /* Gentle start */
        filter: brightness(1.0) saturate(0.96);
        box-shadow:
            0 10px 36px rgba(0, 0, 0, 0.13),
            0 5px 18px rgba(0, 0, 0, 0.09),
            0 0 12px rgba(255, 255, 255, 0.04),
            inset 0 0 25px rgba(255, 255, 255, 0.04);
    }
    60% {
        transform: scale(1.01); /* Subtle peak - no overshoot */
        filter: brightness(1.05) saturate(1.05);
        box-shadow:
            0 14px 45px rgba(0, 0, 0, 0.14),
            0 7px 24px rgba(0, 0, 0, 0.1),
            0 0 25px rgba(255, 255, 255, 0.08), /* Reduced: was 40px/0.15 */
            inset 0 0 20px rgba(255, 255, 255, 0.06); /* Reduced: was 30px/0.12 */
    }
    85% {
        transform: scale(1.0); /* Near final */
        filter: brightness(1.03) saturate(1.03);
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.12),
            0 6px 20px rgba(0, 0, 0, 0.08),
            0 0 12px rgba(255, 255, 255, 0.03),
            inset 0 0 12px rgba(255, 255, 255, 0.03);
    }
    100% {
        transform: scale(1.0);
        filter: brightness(1.03) saturate(1.02);
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.12),
            0 6px 20px rgba(0, 0, 0, 0.08),
            0 0 10px rgba(255, 255, 255, 0.02), /* Minimal glow */
            inset 0 0 8px rgba(255, 255, 255, 0.02);
    }
}

/* PHASE 3: Warm settled state (consolidation) */
body.revision-mode .flashcard.revision-phase-3 {
    transform: scale(1.0);
    filter: brightness(1.05) saturate(1.02);
    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.1),
        0 5px 18px rgba(0, 0, 0, 0.06),
        0 0 20px rgba(255, 255, 255, 0.05);
}

/* ========================================
   DYNAMIC LIGHTING SYSTEM
   Phase-matched vignette and spotlight effects
   Using flashcard-container to avoid pseudo-element conflicts
   ======================================== */

/* Lighting overlay using container's ::after */
body.revision-mode .flashcard-container::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5; /* Above card (z-index: 2), below lower-third (z-index: 200) */
    transition: background 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    mix-blend-mode: overlay;
}

/* PHASE 1: Soft vignette (gentle focus, not dramatic spotlight) */
body.revision-mode .flashcard-container:has(.flashcard.revision-phase-1)::after {
    background: radial-gradient(
        ellipse 900px 700px at center,
        transparent 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.15) 80%,
        rgba(0, 0, 0, 0.25) 100%
    );
    opacity: 1;
}

/* PHASE 2: Gentle light emergence (soft glow, no burst) */
body.revision-mode .flashcard-container:has(.flashcard.revision-phase-2)::after {
    background: radial-gradient(
        ellipse 1200px 900px at center,
        rgba(255, 255, 255, 0.08) 0%,  /* Reduced from 0.15 */
        rgba(255, 255, 255, 0.04) 20%, /* Reduced from 0.08 */
        transparent 50%,
        rgba(0, 0, 0, 0.15) 90%,
        rgba(0, 0, 0, 0.25) 100%
    );
    animation: gentleLightEmergence 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes gentleLightEmergence {
    0% {
        opacity: 0.3;
    }
    60% {
        opacity: 0.6; /* Subtle peak - reduced from 1.0 */
    }
    100% {
        opacity: 0.4; /* Settle - reduced from 0.7 */
    }
}

/* PHASE 3: Balanced neutral lighting */
body.revision-mode .flashcard-container:has(.flashcard.revision-phase-3)::after {
    background: radial-gradient(
        ellipse 1000px 750px at center,
        rgba(255, 255, 255, 0.05) 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.1) 90%,
        rgba(0, 0, 0, 0.2) 100%
    );
    opacity: 1;
}

/* ========================================
   LIGHT RAY EFFECT (Phase 2 Reveal)
   Cinematic god rays during revelation
   Using flashcard-container's ::before
   ======================================== */

/* Light rays using container's ::before */
body.revision-mode .flashcard-container::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4; /* Below lighting overlay (z-index: 5) */
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    mix-blend-mode: screen; /* Additive blending for light */
}

/* Subtle light rays during Phase 2 (barely visible) */
body.revision-mode .flashcard-container:has(.flashcard.revision-phase-2)::before {
    background:
        /* Diagonal light rays from center - very subtle */
        linear-gradient(45deg, transparent 0%, transparent 48%, rgba(255, 255, 255, 0.04) 49%, rgba(255, 255, 255, 0.04) 51%, transparent 52%, transparent 100%),
        linear-gradient(135deg, transparent 0%, transparent 48%, rgba(255, 255, 255, 0.04) 49%, rgba(255, 255, 255, 0.04) 51%, transparent 52%, transparent 100%),
        /* Radial glow center - minimal */
        radial-gradient(ellipse 1200px 900px at center, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    animation: subtleLightRays 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes subtleLightRays {
    0% {
        opacity: 0;
        transform: scale(1.1) rotate(0deg);
    }
    60% {
        opacity: 0.2; /* Very subtle - reduced from 0.4 */
        transform: scale(1.0) rotate(3deg);
    }
    100% {
        opacity: 0.08; /* Barely visible - reduced from 0.15 */
        transform: scale(0.98) rotate(5deg);
    }
}

/* ========================================
   PREMIUM INTRO OVERLAY (Video Mode)
   5-second YouTube-style intro sequence
   ======================================== */

/* Container - fullscreen overlay, hidden by default */
.intro-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10002; /* Above all UI */
    pointer-events: none;
    overflow: hidden;
    cursor: none !important; /* Force cursor hiding during intro */
}

/* Ensure all intro children also hide cursor */
.intro-overlay * {
    cursor: none !important;
}

/* Show intro when video mode starts */
body.revision-mode .intro-overlay.active {
    display: block;
}

/* Layer 1: Subtle Gradient Background (Netflix/Disney+ Style) */
.intro-gradient-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--category-primary, #FF9800) 0%,
        var(--category-secondary, #FFAA00) 100%
    );
    opacity: 0;
}

.intro-overlay.active .intro-gradient-bg {
    animation: introGradientSubtle 5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes introGradientSubtle {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 0.3;
    }
    85% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

/* Layer 2: Enhanced Vignette for Readability */
.intro-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 20%,
        rgba(0, 0, 0, 0.5) 100%
    );
    opacity: 0;
}

.intro-overlay.active .intro-vignette {
    animation: introVignetteFade 5s ease-in-out;
}

@keyframes introVignetteFade {
    0%, 15% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Layer 3: Light Rays */
.intro-light-rays {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.light-ray {
    position: absolute;
    width: 300px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%
    );
    transform-origin: top center;
    opacity: 0;
}

.light-ray.ray-1 {
    left: 10%;
    transform: rotate(-15deg);
}

.light-ray.ray-2 {
    right: 10%;
    transform: rotate(15deg);
}

.intro-overlay.active .light-ray {
    animation: lightRayShine 5s ease-in-out;
}

@keyframes lightRayShine {
    0%, 20% {
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    60% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
    }
}

/* Layer 4: Floating Particles (populated via JS) */
.intro-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.intro-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

@keyframes floatParticle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    50% {
        transform: translate(20px, -50px) scale(1.2);
        opacity: 0.6;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-20px, -100px) scale(0.8);
        opacity: 0;
    }
}

/* Layer 5: Character Scene - FILLS SCREEN (Netflix Style) */
.intro-scene-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(0, 0, 0, 0.8); /* Dark background for letterboxing */
}

.intro-scene-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.intro-overlay.active .intro-scene-layer {
    animation: introSceneFadeScale 5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes introSceneFadeScale {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    15% {
        opacity: 1;
        transform: scale(1);
    }
    85% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

/* Layer 6: Typography & Branding - INTEGRATED OVERLAY (Netflix/Disney+) */
.intro-branding {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    pointer-events: none;
}

/* Category Main - Upper Left with Glassmorphism */
.intro-category-main {
    position: absolute;
    top: 8vh;
    left: 6vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 2rem 3rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.intro-category-name {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 900;
    color: #FFFFFF;
    text-align: left;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.intro-category-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.intro-overlay.active .intro-category-main {
    animation: introCategorySlide 5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes introCategorySlide {
    0% {
        opacity: 0;
        transform: translateX(-80px);
    }
    20% {
        opacity: 1;
        transform: translateX(0);
    }
    75% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-40px);
    }
}

/* Meta Info - Bottom Right with Glassmorphism */
.intro-meta-info {
    position: absolute;
    bottom: 6vh;
    right: 6vw;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-align: right;
    letter-spacing: 0.05em;
    padding: 1.2rem 2rem;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.intro-separator {
    margin: 0 0.8rem;
    opacity: 0.6;
}

.intro-overlay.active .intro-meta-info {
    animation: introMetaSlide 5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes introMetaSlide {
    0%, 40% {
        opacity: 0;
        transform: translateX(60px);
    }
    55% {
        opacity: 1;
        transform: translateX(0);
    }
    80% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* Removed breathing animation - conflicts with main animations */

/* Fade out entire overlay at end */
.intro-overlay.fade-out {
    animation: introOverlayFadeOut 0.8s ease-out forwards;
}

@keyframes introOverlayFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ============================================================
   REVISION MODE CROSSFADE - Pure opacity (no transforms)
   Overrides video-mode transforms to prevent corner overlap
   ============================================================ */

/* EXIT: Pure opacity fade - no scale/translate (prevents misalignment) */
body.revision-mode .flashcard.crossfade-exit,
body.revision-mode #flashcard-exiting-clone {
    animation: revisionCrossfadeExit 0.5s linear both !important;
    pointer-events: none;
    z-index: 1;
}

@keyframes revisionCrossfadeExit {
    0% {
        opacity: 1;
        transform: none; /* No transforms - prevents corner overlap */
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform: none; /* Stay in place - perfect alignment */
        filter: blur(2px); /* Subtle blur for smoothness */
    }
}

/* ENTRANCE: Pure opacity fade - no scale/translate (prevents misalignment) */
body.revision-mode .flashcard.crossfade-entrance {
    opacity: 0 !important;
    transform: none !important; /* No transforms */
    filter: blur(2px) !important;

    animation: revisionCrossfadeEntrance 0.5s ease-out both !important;
    animation-delay: 0.25s !important; /* Slight overlap for smoothness */
    animation-fill-mode: both !important;
    z-index: 2; /* Above exiting card */
}

@keyframes revisionCrossfadeEntrance {
    0% {
        opacity: 0;
        transform: none; /* No transforms - prevents corner overlap */
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: none; /* Stay in place - perfect alignment */
        filter: blur(0px);
    }
}

/* ===== ATMOSPHERIC COLOR SYSTEM: Mode-Specific Temperature ===== */
/*
 * Creates subtle "room temperature" changes between quiz modes
 * Philosophy: Change the ATMOSPHERE, not the CONTENT
 * - EN→JP Quiz: Cool blue (focused, testing)
 * - JP→EN Quiz: Soft purple (accomplished, mastery)
 */

/* EN→JP QUIZ: Cool Blue Focus */
/* Psychological: Clarity, concentration, memory recall */
body.revision-mode.revision-en-jp::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(100, 150, 255, 0.08); /* 8% opacity - very subtle atmospheric shift */
    opacity: 1 !important; /* Force full opacity (something was setting it to 0.3) */
    pointer-events: none;
    z-index: 100; /* Above all content */
    mix-blend-mode: normal; /* Direct color tint */
    transition: background 3s ease, opacity 3s ease;
}

/* JP→EN QUIZ: Soft Purple Achievement */
/* Psychological: Accomplishment, wisdom, final challenge */
body.revision-mode.revision-jp-en::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(200, 100, 255, 0.08); /* 8% opacity - very subtle atmospheric shift */
    opacity: 1 !important; /* Force full opacity (something was setting it to 0.3) */
    pointer-events: none;
    z-index: 100; /* Above all content */
    mix-blend-mode: normal; /* Direct color tint */
    transition: background 3s ease, opacity 3s ease;
}

/* Preserve natural colors - images and text unaffected */
body.revision-mode .vocabulary-image,
body.revision-mode .vocabulary-image img,
body.revision-mode .intro-background-image {
    filter: none !important;
    mix-blend-mode: normal !important;
}