/**
 * Track Visibility Controls CSS
 * Handles hiding and blurring of tracks based on admin settings
 */

/* Hidden tracks - completely invisible */
.track-text.track-hidden,
.track-item.track-hidden {
    display: none !important;
}

/* Blurred tracks - blur only the title, keep numbers visible */
.track-text.track-blurred,
.track-item.track-blurred {
    opacity: 0.8 !important;
    transition: all 0.3s ease;
    pointer-events: none;
    cursor: not-allowed;
    animation: none !important; /* Override fadeIn animation */
}

/* Hover effects for blurred tracks */
.track-text.track-blurred:hover,
.track-item.track-blurred:hover {
    opacity: 0.9 !important;
}

/* Keep track numbers visible and clear when track is blurred */
.track-text.track-blurred .track-number,
.track-item.track-blurred .track-number {
    filter: none !important;
    opacity: 1 !important;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Blur only the track titles */
.track-text.track-blurred .track-title,
.track-item.track-blurred .track-title {
    filter: blur(4px) !important;
    opacity: 0.6 !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Hover effect for blurred titles */
.track-text.track-blurred:hover .track-title,
.track-item.track-blurred:hover .track-title {
    filter: blur(2px) !important;
    opacity: 0.8 !important;
}

/* Disabled state for blurred tracks */
.track-text.track-blurred .track-content,
.track-item.track-blurred .track-content {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Animation for visibility changes */
.track-text,
.track-item {
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.3s ease;
}

/* Fade in animation for visible tracks */
.track-text.track-visible,
.track-item.track-visible {
    opacity: 1 !important;
    filter: none !important;
    animation: fadeIn 1s ease forwards; /* Restore original animation for visible tracks */
}

/* Enhanced blur effect for dramatic themes */
.theme-evil .track-item.track-blurred {
    filter: blur(4px) brightness(0.7);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

.theme-mourning .track-item.track-blurred {
    filter: blur(4px) hue-rotate(180deg);
    box-shadow: 0 0 20px rgba(0, 100, 255, 0.3);
}

.theme-burn .track-item.track-blurred {
    filter: blur(4px) sepia(0.8) saturate(1.5);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
}

.theme-suburbs .track-item.track-blurred {
    filter: blur(4px) contrast(0.8);
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
}

.theme-split .track-item.track-blurred {
    filter: blur(4px) invert(0.2);
    box-shadow: 0 0 20px rgba(128, 0, 128, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* On mobile, hide titles for blurred tracks entirely to prevent readable text */
    .track-text.track-blurred .track-title,
    .track-item.track-blurred .track-title { display: none !important; }
    .track-text.track-blurred { pointer-events: none !important; }
}

/* Admin preview styling */
.admin-track-preview {
    padding: 5px 10px;
    margin: 5px 0;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
}

.admin-track-preview.preview-hidden {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    opacity: 0.5;
    text-decoration: line-through;
}

.admin-track-preview.preview-blurred {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    filter: blur(1px);
}

.admin-track-preview.preview-visible {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Loading state for tracks */
.track-item.loading-visibility {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Accessibility improvements */
.track-item.track-blurred[aria-label]::after {
    content: " (Blurred)";
    font-size: 0.8em;
    opacity: 0.6;
}

.track-item.track-hidden[aria-label]::after {
    content: " (Hidden)";
    font-size: 0.8em;
    opacity: 0.6;
}

/* Focus states for keyboard navigation */
.track-item.track-blurred:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    filter: blur(1px);
}

/* Print styles */
@media print {
    .track-item.track-hidden {
        display: none !important;
    }
    
    .track-item.track-blurred {
        filter: none !important;
        opacity: 0.7 !important;
    }
}

/* Letter Effects for Blurred Tracks */
/* Container for letter effects */
.letter-effects-container {
    display: inline;
}

/* Default letter state (blurred with track) */
.letter-span {
    display: inline;
    transition: all 0.3s ease;
}

/* Always visible letters - override blur with maximum strength */
.track-text.track-blurred .track-title .letter-span.always-visible,
.track-item.track-blurred .track-title .letter-span.always-visible {
    position: relative !important;
    z-index: 999 !important;
    filter: none !important;
    color: white !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px currentColor, 0 0 16px currentColor !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 0 2px !important;
    border-radius: 2px !important;
    opacity: 1 !important;
}

/* Flashing letters - override blur with maximum strength */
.track-text.track-blurred .track-title .letter-span.flashing,
.track-item.track-blurred .track-title .letter-span.flashing {
    position: relative !important;
    z-index: 999 !important;
    filter: none !important;
    color: white !important;
    font-weight: bold !important;
    animation: letterFlash 1.5s ease-in-out infinite !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 0 2px !important;
    border-radius: 2px !important;
    opacity: 1 !important;
}

/* Glow effect for letters */
.letter-span.effect-glow {
    text-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
}

/* Flash animation speeds */
.letter-span.flash-slow {
    animation: letterFlash 2s ease-in-out infinite;
}

.letter-span.flash-medium {
    animation: letterFlash 1.5s ease-in-out infinite;
}

.letter-span.flash-fast {
    animation: letterFlash 1s ease-in-out infinite;
}

/* Flash animation keyframes */
@keyframes letterFlash {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
    }
    50% {
        opacity: 0.3;
        text-shadow: 0 0 2px currentColor;
    }
}

/* Additional letter effects */
.letter-span.effect-pulse {
    animation: letterPulse 1.5s ease-in-out infinite;
}

@keyframes letterPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.letter-span.effect-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    background-size: 200% 100%;
    animation: letterShimmer 2s ease-in-out infinite;
    -webkit-background-clip: text;
    background-clip: text;
}

@keyframes letterShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Letter Effects Overlay System */
.letter-effects-overlay {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 12 !important; /* Below track numbers (z-index: 15) but above titles (z-index: 10) */
    /* Ensure overlay doesn't affect layout */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Ensure crisp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    white-space: nowrap;
    /* Ensure it only covers the title area */
    overflow: hidden;
}

.letter-effects-overlay .overlay-letter {
    display: inline;
    transition: opacity 0.3s ease;
}

.letter-effects-overlay .overlay-letter.flashing {
    animation: overlayFlash 1s infinite alternate !important;
}

@keyframes overlayFlash {
    0% { opacity: 1; text-shadow: 0 0 8px currentColor; }
    100% { opacity: 0.3; text-shadow: 0 0 16px currentColor; }
}

/* Theme-specific letter colors - simple and on top */
.theme-mourning .letter-span.always-visible,
.theme-mourning .letter-span.flashing {
    color: #87CEEB !important;
}

.theme-evil .letter-span.always-visible,
.theme-evil .letter-span.flashing {
    color: #DC143C !important;
}

.theme-burn .letter-span.always-visible,
.theme-burn .letter-span.flashing {
    color: #FF8C00 !important;
}

.theme-suburbs .letter-span.always-visible,
.theme-suburbs .letter-span.flashing {
    color: #D2691E !important;
}

.theme-split .letter-span.always-visible,
.theme-split .letter-span.flashing {
    color: #9932CC !important;
}