/* ULTIMATE HOLOGRAPHIC TEXT FIX */
/* This CSS file contains the most specific selectors possible to override any conflicting styles */

/* Target every possible holographic text element with maximum specificity */
html body .holographic-text,
html body h1.holographic-text,
html body h2.holographic-text,
html body .hero-title.holographic-text,
html body .hero-subtitle.holographic-text,
html body .story-title.holographic-text,
html body .section-title.holographic-text,
html body .diablo-title.holographic-text,
html body section .holographic-text,
html body section h1.holographic-text,
html body section h2.holographic-text,
html body section .hero-title.holographic-text,
html body section .hero-subtitle.holographic-text,
html body section .story-title.holographic-text,
html body section .section-title.holographic-text {
    background: linear-gradient(45deg, 
        #ff00ff 0%,    /* Magenta */
        #00ff00 25%,   /* Green */ 
        #00ffff 50%,   /* Cyan */
        #ffff00 75%,   /* Yellow */
        #ff00ff 100%   /* Back to Magenta */
    ) !important;
    background-size: 400% 400% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    text-fill-color: transparent !important;
    filter: drop-shadow(0 0 30px #ff00ff) !important;
    animation: holographic-rainbow 3s ease-in-out infinite !important;
}

/* Enhanced animation with color-matching glow */
@keyframes holographic-rainbow {
    0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 30px #ff00ff) drop-shadow(0 0 60px #ff00ff);
    }
    25% {
        background-position: 25% 50%;
        filter: drop-shadow(0 0 30px #00ff00) drop-shadow(0 0 60px #00ff00);
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 30px #00ffff) drop-shadow(0 0 60px #00ffff);
    }
    75% {
        background-position: 75% 50%;
        filter: drop-shadow(0 0 30px #ffff00) drop-shadow(0 0 60px #ffff00);
    }
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
    .holographic-text {
        background: none !important;
        color: #ff00ff !important;
        text-shadow: 
            0 0 10px #ff00ff,
            0 0 20px #00ff00,
            0 0 30px #00ffff,
            0 0 40px #ffff00 !important;
    }
}