/* Glitch Text Effect */
.glitch-text {
    position: relative;
    color: #4ade80;
}

.glitch-text:hover:after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 red;
    top: 0;
    color: #4ade80;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(5px, 9999px, 10px, 0);
    }
    25% {
        clip: rect(25px, 9999px, 40px, 0);
    }
    50% {
        clip: rect(50px, 9999px, 60px, 0);
    }
    75% {
        clip: rect(75px, 9999px, 90px, 0);
    }
    100% {
        clip: rect(100px, 9999px, 120px, 0);
    }
}

/* Scanline Effect */
.scanline {
    position: fixed;
    top: 50%;
    width: 100%;
    height: 1px;
    background: rgba(78, 222, 128, 0.3);
    pointer-events: none;
    z-index: 9999;
}

/* Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH6AIQDwQBHgO8IQAAA1tJREFUaN7tmD2LFEEQht+e2132NDcsT2LEQDDE1eQ0MlEU/CcCRgYnYiJmaGCgIIgYaCLGCoYKJiImBsL5EfMRnLeLu+zszOz0V9nt5s6gpncWxj6hobtneqarq6r7HR28Tqnx7nJZrc8fXlJAMgCvAEwDqAMoJAwkAPASwFUA5R4AJBzAcwDLCogoOaIALAG4AaBi8TtVOb1UAEaHlf7AvM8BWAUwIgHEQ0IkqvQK29pGJYC0bSKR00uU9nYJIK74zCJAKiJAgiTqkXAUAGJSk2iQxhgWo8ZG4ohJQxesBzDbxbf+FDAC4H6W1R4HxCFdOAGAmQ6+vwKgBuBOxuONAzEC1gDM9OBrKwCecZKnLGsN5nWiOQ/gWsBGBaA+BuBBhH9sMYlmH1kCMJ+i9FV5AxFnX+VGIZM2Zs1E0BRluTfE9ZLNpClqd2XekTYCaQoAkh0ABQNJC4C0AEgLgGwFIO0xaL8BZJtJXQk/1CjypvqtRxGQsoQfqpXKEkDCfvNNSbTfhC4ARBlIoABEyQ1hWBQIWWAcBSCOAhClAERbDkg/e6RvgIiY1G7IKxog/RpaAGRAAMkSSCijlzYpDSmQcgaQUAKI5ihmWu5qRYBiRpDbEiBZvEpVc4BMHI4jRG63uJYqADBxOI4QU9HqpyWAWPMZVPaFk4PtCeGY2jxKpCztPrHFNNOMZoTQttrjU8zzVDKwU2l1M85zxb4QdJxZNs9mKCCuKB8ZVfprWdx4JrCqiYcVmwdEpRj/QYCWPvoxAKCmWu1YQD/OABgAUCtV64O1Qb81LDpxqkWADAOYODoxlJyIeGMANarXUZQDaKoNz7yOVG4H/FsAsHD947GhvAAAbB6aFo31gY2tDQCTmcm0EJAmgJeKT5u10wQDUuBm1AAwrRMWp24AmHnz83f11d1v37eajXr9xJmJuVXF4YCGZqx7aLxSFMiXQBL8o4M5NQDFcZVGVFNKs8+EjRzQmjWKJ9BH5eVxBPNlhVGXKVBURFm0iuHCaWLOWwCtNIcKm5EAlORMGmqcOMAw7TqA00J7ZOeIMH9GyP6aYZbO0pyA8yH7k3MARljzKFEQ7fSOyKmBQ9wfmB+IvLN9vQPwBxDJTjrGVy6LAAAAAElFTkSuQmCC');
    opacity: 0.03;
    pointer-events: none;
    z-index: 9998;
}

/* Screen Flicker */
.flicker {
    opacity: 0.9;
}

/* Terminal Cursor */
.terminal-cursor {
    position: absolute;
    width: 2px;
    background-color: #4ade80;
    animation: blink 1s infinite;
    display: none;
}

@keyframes blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* CRT effect */
.campaign-database-container {
    position: relative;
    overflow: hidden;
}

/* Button hover effects */
.category-filter {
    transition: all 0.2s ease-in-out;
    border: 2px solid;
    box-shadow: 0 0 5px rgba(78, 222, 128, 0.2);
}

.category-filter:hover {
    background-color: rgba(74, 222, 128, 0.1) !important;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}

/* Active state for category buttons */
.category-filter.active {
    background-color: rgba(0, 20, 0, 0.8) !important;
    box-shadow: 0 0 8px currentColor, inset 0 0 5px currentColor;
}

/* Match the style from the image for article containers */
[onclick*="showCampaignArticle"],
.border.border-green-500\/30.p-4 {
    transition: all 0.1s ease;
    position: relative;
    z-index: 1;
}

[onclick*="showCampaignArticle"]:hover,
.border.border-green-500\/30.p-4:hover {
    background-color: rgba(0, 20, 0, 0.8) !important;
    box-shadow: inset 0 0 10px rgba(78, 222, 128, 0.2), 0 0 10px rgba(78, 222, 128, 0.3);
    transform: translateY(-1px);
    z-index: 2;
}

/* Create the scanline effect on article hover */
[onclick*="showCampaignArticle"]:hover:before,
.border.border-green-500\/30.p-4:hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.7;
}

/* Ensure content stays above effects */
[onclick*="showCampaignArticle"] > *,
.border.border-green-500\/30.p-4 > * {
    position: relative;
    z-index: 2;
}

/* Color categories as seen in the image */
.category-filter[data-category="pop"],
.text-purple-400 {
    color: #d183ff !important;
}

.category-filter[data-category="merchandising"], 
.text-cyan-400 {
    color: #42d5ff !important;
}

.category-filter[data-category="uncategorized"], 
.text-cyan-light {
    color: #42d5ff !important;
}

.border-purple-400 {
    border-color: #d183ff !important;
}

.border-cyan-400 {
    border-color: #42d5ff !important;
}