:root {
    --background: #000000;
    --primary-text: #E0E0E0;
    --accent-cyan: #00FFFF;
    --accent-magenta: #FF00FF;
    --border-color: rgba(0, 255, 255, 0.2);
}
body {
    font-family: 'Space Mono', monospace;
    background-color: var(--background);
    color: var(--primary-text);
    background-image:
            linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,1)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23080808' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0h1v5h94v1H6v94H5V6H0V5h5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.font-display {
    font-family: 'Chakra Petch', sans-serif;
}

/* Glitch Effect */
.glitch-text {
    position: relative;
    text-shadow: 0 0 5px var(--accent-cyan), 0 0 10px var(--accent-cyan);
}
.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--background); overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.glitch-text::before {
    left: -2px; text-shadow: 2px 0 var(--accent-magenta);
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch-text::after {
    left: 2px; text-shadow: -2px 0 var(--accent-cyan);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 { 0% { clip: rect(42px, 9999px, 44px, 0); } 10% { clip: rect(12px, 9999px, 60px, 0); } 20% { clip: rect(50px, 9999px, 102px, 0); } 30% { clip: rect(33px, 9999px, 92px, 0); } 40% { clip: rect(22px, 9999px, 75px, 0); } 50% { clip: rect(47px, 9999px, 130px, 0); } 60% { clip: rect(80px, 9999px, 10px, 0); } 70% { clip: rect(10px, 9999px, 80px, 0); } 80% { clip: rect(54px, 9999px, 33px, 0); } 90% { clip: rect(20px, 9999px, 110px, 0); } 100% { clip: rect(88px, 9999px, 40px, 0); } }
@keyframes glitch-anim-2 { 0% { clip: rect(2px, 9999px, 98px, 0); } 10% { clip: rect(95px, 9999px, 2px, 0); } 20% { clip: rect(66px, 9999px, 20px, 0); } 30% { clip: rect(130px, 9999px, 5px, 0); } 40% { clip: rect(40px, 9999px, 115px, 0); } 50% { clip: rect(80px, 9999px, 50px, 0); } 60% { clip: rect(10px, 9999px, 90px, 0); } 70% { clip: rect(110px, 9999px, 15px, 0); } 80% { clip: rect(30px, 9999px, 85px, 0); } 90% { clip: rect(90px, 9999px, 25px, 0); } 100% { clip: rect(40px, 9999px, 70px, 0); } }

/* Animations */
.fade-in-item { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-item.is-visible { opacity: 1; transform: translateY(0); }

.artist-card {
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.artist-card:hover {
    background-color: rgba(0, 255, 255, 0.05);
    border-color: var(--accent-cyan);
}
.artist-card img {
    transition: transform 0.5s ease;
}
.artist-card:hover img {
    transform: scale(1.03);
}
.btn-tickets {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    transition: all 0.3s ease;
}
.btn-tickets:hover {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--background);
    box-shadow: 0 0 15px var(--accent-cyan);
}
.artist-image {
    border: 1px solid var(--border-color);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}
