/* ===== CURSOR HIDING (YOUTUBE RECORDING ONLY) ===== */
/* Hide cursor only in YouTube recording mode for clean screen captures */
/* Regular video/revision test modes keep cursor visible for action bar use */
body.youtube-recording,
body.youtube-recording * {
    cursor: none !important;
}

/* Hide pause button from recordings (users can still use Space key to pause) */
body.video-mode .video-pause-button,
body.revision-mode .video-pause-button {
    display: none !important;
}

/* ===== TIER-BASED INTELLIGENT SIZING (VIDEO MODE) ===== */
/* Progressive enhancement: tier-based + container queries */

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

/* TIER 1: Short text (1-8 chars) - Full cinematic experience */
body.video-mode .flashcard[data-text-tier="short"] {
    --text-size-ja: clamp(64px, 8vh, 108px);
    --text-size-en: clamp(48px, 5vh, 76px);
    --text-size-roma: clamp(22px, 2.2vh, 32px);
    --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 layout */
body.video-mode .flashcard[data-text-tier="medium"] {
    --text-size-ja: clamp(52px, 6.5vh, 88px);
    --text-size-en: clamp(40px, 4.5vh, 64px);
    --text-size-roma: clamp(20px, 2vh, 28px);
    --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) - Readability priority */
body.video-mode .flashcard[data-text-tier="long"] {
    --text-size-ja: clamp(42px, 5.5vh, 72px);
    --text-size-en: clamp(32px, 4vh, 52px);
    --text-size-roma: clamp(18px, 1.8vh, 24px);
    --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 */
body.video-mode .japanese-text {
    font-size: min(var(--text-size-ja, clamp(64px, 8vh, 108px)), 90cqw);
}

body.video-mode .english-text,
body.video-mode #video-mode-english {
    font-size: min(var(--text-size-en, clamp(48px, 5vh, 76px)), 90cqw);
}

body.video-mode .romanization,
body.video-mode .front-romanization {
    font-size: min(var(--text-size-roma, clamp(22px, 2.2vh, 32px)), 90cqw);
}

/* Apply tier-based sizing to images (phase-specific) */
body.video-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 always gets full-size image (image-only phase, no text competition) */
body.video-mode .flashcard[data-text-tier].video-phase-1 .vocabulary-image {
    max-height: min(850px, 62vh);  /* Full cinematic size for all tiers */
    max-width: 82vw;
}

body.video-mode .flashcard[data-text-tier].video-phase-5 .vocabulary-image {
    max-height: var(--image-size-phase5);
    max-width: 80vw;
}

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

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

/* Japanese text glow when audio plays - disabled for cleaner transitions */
body.video-mode .flashcard.audio-playing .japanese-text {
    /* Keep same color as default - no jarring color change */
    color: #3d5a80;
    /* Subtle glow only, no color change */
    text-shadow:
        0 0 10px rgba(102, 126, 234, 0.3),
        0 2px 10px rgba(61, 90, 128, 0.15);
    /* Remove pulsing animation - too distracting */
}

/* Romanization in video mode - white text for frosted glass visibility */
body.video-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.video-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.video-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;
    justify-content: center; /* Center the entire content */
    align-items: center;
    padding: 0;
    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.video-mode .lower-third {
    display: flex;
}

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

/* Lower third sections - SCOPED TO VIDEO MODE for specificity */
body.video-mode .lower-third-left {
    flex: 0 0 280px; /* Match right side for symmetric centering */
    display: flex !important; /* Override revision-mode.css which loads later */
    visibility: hidden; /* Hide content but preserve space */
}

body.video-mode .lower-third-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px; /* Space between progress bar and percentage */
    position: relative;
    z-index: 1;
    padding: 0 20px; /* Breathing room from edges */
}

body.video-mode .lower-third-right {
    flex: 0 0 280px; /* Match left side for symmetric centering */
    display: flex !important; /* Explicit flex display */
    visibility: hidden; /* Hide content but preserve space */
}

/* 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: 0 0 600px; /* Fixed width, no grow/shrink - ensures precise centering */
    height: 8px; /* Slightly taller for mobile visibility */
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.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.video-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.video-mode .flashcard.video-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;
}

/* Phase 2-4: Text readability priority (TONED DOWN saturation for education) */
body.video-mode .flashcard.video-phase-2 .card-face,
body.video-mode .flashcard.video-phase-3 .card-face,
body.video-mode .flashcard.video-phase-4 .card-face {
    background: rgba(255, 255, 255, 0.42) !important; /* Step 3: +0.04 more opacity */
    backdrop-filter: blur(46px) saturate(150%); /* Reduced from 175% - less oversaturated */
    -webkit-backdrop-filter: blur(46px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

/* Phase 5: Balanced consolidation */
body.video-mode .flashcard.video-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.video-mode .japanese-text,
body.video-mode .front-romanization,
body.video-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.video-mode .romanization,
body.video-mode .front-romanization {
    color: #4338ca !important; /* Darker indigo from #667eea */
}

/* Image maintains clarity against frosted background */
body.video-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.video-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.video-mode .card-content {
    position: relative;
    z-index: 2;
}

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

/* Category-matched tint overlay - uses dynamic CSS variables from theming.js */
body.video-mode::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.video-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;
    z-index: -1; /* Behind everything including tint overlay */
    filter: saturate(85%) brightness(98%); /* Desaturate background only, not UI */
}

/* ========================================
   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.video-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;
    }
}