/* ================================================================================
   ADVANCED LIGHTING SYSTEMS - Cinematic Visual Enhancement
   ================================================================================ */

/* ================================================================================
   SYSTEM A: DRAMATIC & CINEMATIC (Netflix Prestige Style)
   Golden hour, deep shadows, volumetric god rays
   ================================================================================ */

/* Base lighting overlay architecture */
body.video-mode.lighting-system-a {
    --lighting-brightness: 1.0;
    --lighting-contrast: 1.0;
    --lighting-saturation: 1.0;
    --lighting-hue: 0deg;
    --vignette-intensity: 0.3;
    --god-ray-opacity: 0;
    --spotlight-opacity: 0;
    --color-temp: #FFF8F0; /* Neutral warm */
}

/* God Rays - Volumetric light beams from top-right */
/* Applied directly to card-face with proper clipping */
body.video-mode.lighting-system-a .card-face {
    position: relative;
    overflow: hidden; /* Critical: Clip god rays to card boundaries */
    border-radius: 24px; /* Explicit border-radius */
}

body.video-mode.lighting-system-a .card-face::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background:
        linear-gradient(
            135deg,
            rgba(255, 248, 220, var(--god-ray-opacity)) 0%,
            transparent 30%,
            transparent 70%,
            rgba(255, 248, 220, calc(var(--god-ray-opacity) * 0.3)) 100%
        );
    pointer-events: none;
    z-index: 5;
    opacity: var(--god-ray-opacity);
    animation: godRaysDrift 20s ease-in-out infinite;
    mix-blend-mode: soft-light;
    transition: opacity 800ms ease-in-out;
    border-radius: 24px; /* Explicit border-radius */
}

@keyframes godRaysDrift {
    0%, 100% { transform: translateX(0) translateY(0) rotate(-45deg); }
    50% { transform: translateX(-3%) translateY(2%) rotate(-43deg); }
}

/* Ensure flashcard container has proper clipping */
body.video-mode.lighting-system-a .flashcard {
    overflow: hidden; /* Critical: Clip all overlays */
    border-radius: 24px; /* Match card-face border-radius */
}

/* Cinematic Vignette - Dark edges forcing center focus */
body.video-mode.lighting-system-a .flashcard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0, 0, 0, calc(var(--vignette-intensity) * 0.3)) 70%,
        rgba(0, 0, 0, var(--vignette-intensity)) 100%
    );
    pointer-events: none;
    z-index: 10;
    border-radius: 24px; /* Explicit border-radius */
    transition: all 800ms ease-in-out;
}

/* Color Temperature Overlay - Warm/Cool shifts */
body.video-mode.lighting-system-a .flashcard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-temp);
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 11;
    border-radius: 24px; /* Explicit border-radius */
    transition: all 800ms ease-in-out;
}

/* Dynamic Shadows - Text depth */
body.video-mode.lighting-system-a .japanese-text,
body.video-mode.lighting-system-a .english-text,
body.video-mode.lighting-system-a .romanization {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2);
    transition: text-shadow 800ms ease-in-out;
}

/* Spotlight Effect - Phase 4 dramatic reveal */
body.video-mode.lighting-system-a .flashcard {
    position: relative;
}

body.video-mode.lighting-system-a .card-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(255, 235, 180, var(--spotlight-opacity)) 0%,
        transparent 50%
    );
    pointer-events: none;
    z-index: -1;
    opacity: var(--spotlight-opacity);
    transition: opacity 800ms ease-in-out;
}

/* Overall lighting filter on flashcard */
body.video-mode.lighting-system-a .flashcard {
    filter:
        brightness(var(--lighting-brightness))
        contrast(var(--lighting-contrast))
        saturate(var(--lighting-saturation))
        hue-rotate(var(--lighting-hue));
    transition: filter 800ms ease-in-out;
}

/* ================================================================================
   PHASE-SPECIFIC LIGHTING (System A: Dramatic & Cinematic)
   ================================================================================ */

/* PHASE 1: Moody Blue Twilight - Cool, contemplative */
body.video-mode.lighting-system-a .flashcard.video-phase-1 {
    --lighting-brightness: 0.85;
    --lighting-contrast: 1.15;
    --lighting-saturation: 0.9;
    --lighting-hue: 10deg; /* Slight blue shift */
    --vignette-intensity: 0.5;
    --god-ray-opacity: 0.1;
    --spotlight-opacity: 0;
    --color-temp: #E0E8FF; /* Cool blue */
}

/* PHASE 2: Warmth Emerges - Sunrise beginning */
body.video-mode.lighting-system-a .flashcard.video-phase-2 {
    --lighting-brightness: 0.95;
    --lighting-contrast: 1.1;
    --lighting-saturation: 1.05;
    --lighting-hue: 5deg;
    --vignette-intensity: 0.4;
    --god-ray-opacity: 0.2;
    --spotlight-opacity: 0;
    --color-temp: #FFF8E0; /* Warm cream */
}

body.video-mode.lighting-system-a .flashcard.video-phase-2 .japanese-text {
    text-shadow:
        0 2px 12px rgba(255, 200, 100, 0.4),
        0 4px 24px rgba(255, 200, 100, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

/* PHASE 3: Building Intensity - Midday approach (TONED DOWN for education) */
body.video-mode.lighting-system-a .flashcard.video-phase-3 {
    --lighting-brightness: 1.0;
    --lighting-contrast: 1.05;
    --lighting-saturation: 1.05; /* Reduced from 1.1 */
    --lighting-hue: 0deg;
    --vignette-intensity: 0.35;
    --god-ray-opacity: 0.18; /* Reduced from 0.25 */
    --spotlight-opacity: 0;
    --color-temp: #FFF4D0; /* Warmer */
}

body.video-mode.lighting-system-a .flashcard.video-phase-3 .romanization {
    text-shadow:
        0 1px 6px rgba(255, 220, 150, 0.5),
        0 2px 12px rgba(255, 220, 150, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

/* PHASE 4: GOLDEN HOUR PEAK - Dramatic reveal moment (TONED DOWN for education) */
body.video-mode.lighting-system-a .flashcard.video-phase-4 {
    --lighting-brightness: 1.08; /* Reduced from 1.15 */
    --lighting-contrast: 1.08; /* Reduced from 1.12 */
    --lighting-saturation: 1.1; /* Reduced from 1.2 */
    --lighting-hue: -5deg; /* Slight warm shift */
    --vignette-intensity: 0.3;
    --god-ray-opacity: 0.25; /* Reduced from 0.4 */
    --spotlight-opacity: 0.18; /* Reduced from 0.3 */
    --color-temp: #FFE8B0; /* Golden hour */
}

body.video-mode.lighting-system-a .flashcard.video-phase-4 .english-text {
    text-shadow:
        0 0 15px rgba(255, 235, 180, 0.6),
        0 2px 12px rgba(255, 200, 100, 0.4),
        0 4px 24px rgba(255, 200, 100, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.3);
    /* Removed pulsing animation - distracting for learning content */
}

/* PHASE 5: Sunset Afterglow - Warm, satisfied */
body.video-mode.lighting-system-a .flashcard.video-phase-5 {
    --lighting-brightness: 1.05;
    --lighting-contrast: 1.05;
    --lighting-saturation: 1.15;
    --lighting-hue: -3deg;
    --vignette-intensity: 0.35;
    --god-ray-opacity: 0.25;
    --spotlight-opacity: 0.15; /* Fading */
    --color-temp: #FFECC0; /* Sunset amber */
}

/* ================================================================================
   SYSTEM B: MAGICAL & ETHEREAL (Studio Ghibli Style)
   Soft pastels, gentle glows, dreamy atmosphere, floating light orbs
   ================================================================================ */

/* Base lighting variables for System B */
body.video-mode.lighting-system-b {
    --lighting-brightness: 1.0;
    --lighting-contrast: 0.95; /* Softer contrast than System A */
    --lighting-saturation: 1.1;
    --lighting-hue: 0deg;
    --vignette-intensity: 0.15; /* Much softer vignette */
    --orb-opacity: 0;
    --halo-opacity: 0;
    --color-temp: #F8F4FF; /* Soft lavender */
}

/* Ensure proper clipping for System B */
body.video-mode.lighting-system-b .flashcard {
    overflow: hidden;
    border-radius: 24px;
}

body.video-mode.lighting-system-b .card-face {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

/* Floating Light Orbs - Gentle drifting magical lights */
body.video-mode.lighting-system-b .card-face::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(200, 180, 255, var(--orb-opacity)) 0%, transparent 15%),
        radial-gradient(circle at 80% 60%, rgba(180, 255, 220, var(--orb-opacity)) 0%, transparent 12%),
        radial-gradient(circle at 50% 80%, rgba(255, 200, 220, var(--orb-opacity)) 0%, transparent 18%),
        radial-gradient(circle at 70% 20%, rgba(255, 240, 200, var(--orb-opacity)) 0%, transparent 10%);
    pointer-events: none;
    z-index: 5;
    opacity: var(--orb-opacity);
    animation: orbsFloat 15s ease-in-out infinite;
    mix-blend-mode: screen;
    transition: opacity 1000ms ease-in-out;
    border-radius: 24px;
}

@keyframes orbsFloat {
    0%, 100% {
        transform: translate(0, 0);
        filter: blur(8px);
    }
    25% {
        transform: translate(-2%, 2%);
        filter: blur(10px);
    }
    50% {
        transform: translate(1%, -1%);
        filter: blur(12px);
    }
    75% {
        transform: translate(-1%, 1%);
        filter: blur(10px);
    }
}

/* Soft Ethereal Vignette - Gentle edge darkening */
body.video-mode.lighting-system-b .flashcard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(150, 130, 180, calc(var(--vignette-intensity) * 0.2)) 80%,
        rgba(100, 80, 150, var(--vignette-intensity)) 100%
    );
    pointer-events: none;
    z-index: 10;
    border-radius: 24px;
    transition: all 1000ms ease-in-out;
}

/* Pastel Color Temperature Overlay */
body.video-mode.lighting-system-b .flashcard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-temp);
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 11;
    border-radius: 24px;
    transition: all 1000ms ease-in-out;
}

/* Ethereal Text Halos - Soft glows instead of hard shadows */
body.video-mode.lighting-system-b .japanese-text,
body.video-mode.lighting-system-b .english-text,
body.video-mode.lighting-system-b .romanization {
    text-shadow:
        0 0 20px rgba(200, 180, 255, 0.3),
        0 0 40px rgba(180, 200, 255, 0.2);
    transition: text-shadow 1000ms ease-in-out;
}

/* Enchanted Spotlight - Soft magical glow */
body.video-mode.lighting-system-b .card-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(230, 200, 255, var(--halo-opacity)) 0%,
        rgba(200, 230, 255, calc(var(--halo-opacity) * 0.5)) 30%,
        transparent 60%
    );
    pointer-events: none;
    z-index: -1;
    opacity: var(--halo-opacity);
    transition: opacity 1000ms ease-in-out;
    filter: blur(30px);
}

/* Overall soft filter on flashcard */
body.video-mode.lighting-system-b .flashcard {
    filter:
        brightness(var(--lighting-brightness))
        contrast(var(--lighting-contrast))
        saturate(var(--lighting-saturation))
        hue-rotate(var(--lighting-hue));
    transition: filter 1000ms ease-in-out;
}

/* ================================================================================
   PHASE-SPECIFIC LIGHTING (System B: Magical & Ethereal)
   ================================================================================ */

/* PHASE 1: Soft Twilight - Gentle lavender mood */
body.video-mode.lighting-system-b .flashcard.video-phase-1 {
    --lighting-brightness: 0.92;
    --lighting-contrast: 0.92;
    --lighting-saturation: 1.05;
    --lighting-hue: 5deg; /* Slight purple shift */
    --vignette-intensity: 0.2;
    --orb-opacity: 0.12;
    --halo-opacity: 0;
    --color-temp: #F0E8FF; /* Soft lavender */
}

/* PHASE 2: Gentle Warmth - Rosy morning */
body.video-mode.lighting-system-b .flashcard.video-phase-2 {
    --lighting-brightness: 0.98;
    --lighting-contrast: 0.95;
    --lighting-saturation: 1.08;
    --lighting-hue: 3deg;
    --vignette-intensity: 0.15;
    --orb-opacity: 0.2;
    --halo-opacity: 0;
    --color-temp: #FFF0F8; /* Soft rose */
}

body.video-mode.lighting-system-b .flashcard.video-phase-2 .japanese-text {
    text-shadow:
        0 0 25px rgba(255, 200, 220, 0.5),
        0 0 45px rgba(255, 180, 200, 0.3),
        0 0 60px rgba(255, 200, 220, 0.2);
}

/* PHASE 3: Dreamy Clarity - Mint freshness (TONED DOWN for education) */
body.video-mode.lighting-system-b .flashcard.video-phase-3 {
    --lighting-brightness: 1.0;
    --lighting-contrast: 0.96;
    --lighting-saturation: 1.05; /* Reduced from 1.12 */
    --lighting-hue: 0deg;
    --vignette-intensity: 0.12;
    --orb-opacity: 0.18; /* Reduced from 0.25 */
    --halo-opacity: 0;
    --color-temp: #F0FFF8; /* Soft mint */
}

body.video-mode.lighting-system-b .flashcard.video-phase-3 .romanization {
    text-shadow:
        0 0 20px rgba(180, 255, 220, 0.5),
        0 0 40px rgba(200, 255, 230, 0.3),
        0 0 55px rgba(180, 255, 220, 0.2);
}

/* PHASE 4: ENCHANTED GLOW - Magical reveal moment (TONED DOWN for education) */
body.video-mode.lighting-system-b .flashcard.video-phase-4 {
    --lighting-brightness: 1.02; /* Reduced from 1.05 */
    --lighting-contrast: 0.98;
    --lighting-saturation: 1.08; /* Reduced from 1.15 */
    --lighting-hue: -2deg;
    --vignette-intensity: 0.1;
    --orb-opacity: 0.2; /* Reduced from 0.3 */
    --halo-opacity: 0.18; /* Reduced from 0.3 */
    --color-temp: #FFF8F0; /* Soft golden-white */
}

body.video-mode.lighting-system-b .flashcard.video-phase-4 .english-text {
    text-shadow:
        0 0 20px rgba(230, 200, 255, 0.5),
        0 0 35px rgba(200, 230, 255, 0.4),
        0 0 50px rgba(255, 220, 240, 0.3);
    /* Removed pulsing animation - distracting for learning content */
}

/* PHASE 5: Peaceful Afterglow - Dreamy contentment */
body.video-mode.lighting-system-b .flashcard.video-phase-5 {
    --lighting-brightness: 1.0;
    --lighting-contrast: 0.94;
    --lighting-saturation: 1.1;
    --lighting-hue: 2deg;
    --vignette-intensity: 0.15;
    --orb-opacity: 0.2; /* Orbs fading */
    --halo-opacity: 0.15; /* Gentle afterglow */
    --color-temp: #F8F0FF; /* Back to lavender */
}

/* ================================================================================
   SYSTEM C: MODERN & SLEEK (Placeholder for next iteration)
   ================================================================================ */

/* Will be implemented after testing System A */

/* ================================================================================
   SYSTEM D: DYNAMIC & ENERGETIC (Placeholder for next iteration)
   ================================================================================ */

/* Will be implemented after testing System A */