/**
 * Letter Effects for Blurred Tracks
 * Special effects for individual letters when tracks are blurred
 */

/* Base styles for letter effect containers */
.track-text.track-blurred .letter-effects-container {
    display: inline;
    position: relative;
}

.track-text.track-blurred .letter-effects-container .letter-span {
    display: inline;
    position: relative;
    transition: all 0.3s ease;
}

/* Always visible letters - pierce through the blur */
.track-text.track-blurred .letter-span.always-visible {
    filter: none !important;
    opacity: 1 !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    z-index: 10;
    position: relative;
    font-weight: bold;
}

/* Flashing letter effects */
.track-text.track-blurred .letter-span.flashing {
    filter: none !important;
    z-index: 10;
    position: relative;
}

/* Glow effect */
.track-text.track-blurred .letter-span.flashing.effect-glow {
    animation: letterGlow var(--flash-duration, 1s) infinite;
}

@keyframes letterGlow {
    0%, 100% { 
        opacity: 0.7; 
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); 
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8); 
    }
}

/* Bright flash effect */
.track-text.track-blurred .letter-span.flashing.effect-bright {
    animation: letterBright var(--flash-duration, 1s) infinite;
}

@keyframes letterBright {
    0%, 100% { 
        opacity: 0.8; 
        color: inherit;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% { 
        opacity: 1; 
        color: #ffff00;
        text-shadow: 0 0 15px rgba(255, 255, 0, 1);
    }
}

/* Color shift effect */
.track-text.track-blurred .letter-span.flashing.effect-color {
    animation: letterColor var(--flash-duration, 1s) infinite;
}

@keyframes letterColor {
    0% { color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
    20% { color: #ff4444; text-shadow: 0 0 10px rgba(255, 68, 68, 0.8); }
    40% { color: #44ff44; text-shadow: 0 0 10px rgba(68, 255, 68, 0.8); }
    60% { color: #4444ff; text-shadow: 0 0 10px rgba(68, 68, 255, 0.8); }
    80% { color: #ff44ff; text-shadow: 0 0 10px rgba(255, 68, 255, 0.8); }
    100% { color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
}

/* Shadow pulse effect */
.track-text.track-blurred .letter-span.flashing.effect-shadow {
    animation: letterShadow var(--flash-duration, 1s) infinite;
}

@keyframes letterShadow {
    0%, 100% { 
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); 
    }
    50% { 
        text-shadow: 
            0 0 25px rgba(255, 0, 0, 1),
            0 0 35px rgba(255, 0, 0, 0.8),
            0 0 45px rgba(255, 0, 0, 0.6);
    }
}

/* Scale effect */
.track-text.track-blurred .letter-span.flashing.effect-scale {
    animation: letterScale var(--flash-duration, 1s) infinite;
    transform-origin: center;
}

@keyframes letterScale {
    0%, 100% { 
        transform: scale(1); 
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% { 
        transform: scale(1.3); 
        text-shadow: 0 0 15px rgba(255, 255, 255, 1);
    }
}

/* Flash speed variations */
.letter-span.flash-slow {
    --flash-duration: 2s;
}

.letter-span.flash-medium {
    --flash-duration: 1s;
}

.letter-span.flash-fast {
    --flash-duration: 0.5s;
}

.letter-span.flash-pulse {
    --flash-duration: 3s;
}

/* Theme-specific enhancements */
.theme-evil .track-text.track-blurred .letter-span.flashing {
    --primary-color: #ff0000;
}

.theme-evil .track-text.track-blurred .letter-span.flashing.effect-glow {
    animation: letterGlowEvil var(--flash-duration, 1s) infinite;
}

@keyframes letterGlowEvil {
    0%, 100% { 
        opacity: 0.7; 
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); 
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 20px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, 0.8); 
    }
}

.theme-mourning .track-text.track-blurred .letter-span.flashing.effect-glow {
    animation: letterGlowMourning var(--flash-duration, 1s) infinite;
}

@keyframes letterGlowMourning {
    0%, 100% { 
        opacity: 0.7; 
        text-shadow: 0 0 5px rgba(0, 100, 255, 0.5); 
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 20px rgba(0, 100, 255, 1), 0 0 30px rgba(0, 100, 255, 0.8); 
    }
}

.theme-burn .track-text.track-blurred .letter-span.flashing.effect-glow {
    animation: letterGlowBurn var(--flash-duration, 1s) infinite;
}

@keyframes letterGlowBurn {
    0%, 100% { 
        opacity: 0.7; 
        text-shadow: 0 0 5px rgba(255, 140, 0, 0.5); 
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 20px rgba(255, 140, 0, 1), 0 0 30px rgba(255, 140, 0, 0.8); 
    }
}

.theme-suburbs .track-text.track-blurred .letter-span.flashing.effect-glow {
    animation: letterGlowSuburbs var(--flash-duration, 1s) infinite;
}

@keyframes letterGlowSuburbs {
    0%, 100% { 
        opacity: 0.7; 
        text-shadow: 0 0 5px rgba(255, 255, 0, 0.5); 
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 20px rgba(255, 255, 0, 1), 0 0 30px rgba(255, 255, 0, 0.8); 
    }
}

.theme-split .track-text.track-blurred .letter-span.flashing.effect-glow {
    animation: letterGlowSplit var(--flash-duration, 1s) infinite;
}

@keyframes letterGlowSplit {
    0%, 100% { 
        opacity: 0.7; 
        text-shadow: 0 0 5px rgba(128, 0, 128, 0.5); 
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 20px rgba(128, 0, 128, 1), 0 0 30px rgba(128, 0, 128, 0.8); 
    }
}

/* Accessibility considerations */
@media (prefers-reduced-motion: reduce) {
    .letter-span.flashing {
        animation: none !important;
        opacity: 1 !important;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .track-text.track-blurred .letter-span.always-visible,
    .track-text.track-blurred .letter-span.flashing {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 1) !important;
        outline: 1px solid rgba(255, 255, 255, 0.8);
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .track-text.track-blurred .letter-span.flashing {
        animation-duration: calc(var(--flash-duration, 1s) * 1.5) !important;
    }
    
    .track-text.track-blurred .letter-span.always-visible {
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    }
}

/* Performance optimization for multiple flashing letters */
.track-text.track-blurred .letter-span.flashing {
    will-change: opacity, text-shadow, transform, color;
}

/* Hover effects for better interactivity */
.track-text.track-blurred:hover .letter-span.always-visible {
    text-shadow: 0 0 12px rgba(255, 255, 255, 1);
}

.track-text.track-blurred:hover .letter-span.flashing {
    animation-duration: calc(var(--flash-duration, 1s) * 0.7);
}