/* ==========================
   Morse Visual Flash Overlay
   ========================== */

.morse-visual-flash-overlay {
    /* Positioning */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none; /* Don't block clicks */
    
    /* Very fast transition for crisp morse timing */
    transition: background 15ms ease-out;
    
    /* Hidden by default (not playing morse) */
    opacity: 0;
    visibility: hidden;
}

/* Light Mode: Bright base with dark flash for contrast */
:root .morse-visual-flash-overlay,
:root:not([data-theme]) .morse-visual-flash-overlay,
[data-theme="light"] .morse-visual-flash-overlay {
    /* Light/bright overlay base (shown during morse playback in light mode) */
    background: 
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.35) 0%,    /* Bright center */
            rgba(255, 255, 255, 0.25) 50%,    /* Medium bright */
            rgba(255, 255, 255, 0.15) 100%    /* Lighter edges */
        );
}

/* Dark Mode: Dark base with bright flash for contrast */
[data-theme="dark"] .morse-visual-flash-overlay {
    /* Dark tint for contrast base (shown during morse playback in dark mode) */
    background: 
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.35) 0%,      /* Dark center */
            rgba(0, 0, 0, 0.25) 50%,      /* Medium dark */
            rgba(0, 0, 0, 0.15) 100%      /* Lighter edges */
        );
}

.morse-visual-flash-overlay.visible {
    /* Show the overlay base when morse is playing */
    opacity: 1;
    visibility: visible;
}

/* Light Mode Flash: Dark flash on bright base */
:root .morse-visual-flash-overlay.active,
:root:not([data-theme]) .morse-visual-flash-overlay.active,
[data-theme="light"] .morse-visual-flash-overlay.active {
    /* Flash! Dark on bright base creates contrast in light mode */
    background: 
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.95) 0%,        /* Very dark center */
            rgba(0, 0, 0, 0.75) 25%,        /* Strong nearby */
            rgba(0, 0, 0, 0.45) 50%,        /* Medium outer */
            rgba(0, 0, 0, 0.15) 75%,        /* Soft far edge */
            rgba(0, 0, 0, 0) 100%           /* Fade to transparent */
        );
    opacity: 1;
    visibility: visible;
}

/* Dark Mode Flash: Bright flash on dark base */
[data-theme="dark"] .morse-visual-flash-overlay.active {
    /* Flash! Bright white on dark base creates contrast in dark mode */
    background: 
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.95) 0%,      /* Very bright center */
            rgba(255, 255, 255, 0.75) 25%,      /* Strong nearby */
            rgba(255, 255, 255, 0.45) 50%,      /* Medium outer */
            rgba(255, 255, 255, 0.15) 75%,      /* Soft far edge */
            rgba(255, 255, 255, 0) 100%         /* Fade to transparent */
        );
    opacity: 1;
    visibility: visible;
}

/* ========================================
   ALTERNATIVE FLASH STYLES (try these!)
   ======================================== */

/* OPTION 1: Brighter center, tighter gradient (more noticeable) */
/*
.morse-visual-flash-overlay {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 30%,
        rgba(255, 255, 255, 0.2) 60%,
        rgba(255, 255, 255, 0) 100%
    );
}
*/

/* OPTION 2: Warm white/yellow flash (easier on eyes) */
/*
.morse-visual-flash-overlay {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 250, 230, 0.8) 0%,
        rgba(255, 250, 230, 0.5) 40%,
        rgba(255, 250, 230, 0.15) 70%,
        rgba(255, 250, 230, 0) 100%
    );
}
*/

/* OPTION 3: Blue flash (high-tech feel) */
/*
.morse-visual-flash-overlay {
    background: radial-gradient(
        ellipse at center,
        rgba(100, 150, 255, 0.7) 0%,
        rgba(100, 150, 255, 0.4) 40%,
        rgba(100, 150, 255, 0.1) 70%,
        rgba(100, 150, 255, 0) 100%
    );
}
*/

/* OPTION 4: Centered circle flash (focused indicator) */
/*
.morse-visual-flash-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}

.morse-visual-flash-overlay::before {
    content: '';
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    transition: opacity 20ms ease-out;
}

.morse-visual-flash-overlay.active::before {
    opacity: 1;
}
*/

/* OPTION 5: Corner indicator (minimal, non-intrusive) */
/*
.morse-visual-flash-overlay {
    background: none;
}

.morse-visual-flash-overlay::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.4) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 15ms ease-out;
}

.morse-visual-flash-overlay.active::before {
    opacity: 1;
}
*/

/* OPTION 6: Subtle border pulse (very minimal) */
/*
.morse-visual-flash-overlay {
    background: none;
    border: 0 solid rgba(255, 255, 255, 0);
    transition: border-width 20ms ease-out, border-color 20ms ease-out;
}

.morse-visual-flash-overlay.active {
    border-width: 8px;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.3);
}
*/

/* Theme-aware flash: Inverted colors for optimal contrast
   - Light mode: Bright overlay base → Dark flash
   - Dark mode: Dark overlay base → Bright flash
   This ensures maximum visibility in both themes! */

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .morse-visual-flash-overlay {
        transition: none;
    }
}