* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0a0a0a;
    font-family: 'Orbitron', monospace;
    color: #ffffff;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Static/TV Noise Overlay */
.static-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9Im5vaXNlIiB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogICAgICA8ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9IjAuOSIgbnVtT2N0YXZlcz0iNCIgc2VlZD0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuMDUiLz4KPC9zdmc+');
    opacity: 0.05;
    animation: static-flicker 0.15s infinite;
    pointer-events: none;
    z-index: 1;
}

/* Scanlines Effect */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent 50%, 
        rgba(0, 255, 0, 0.03) 50%
    );
    background-size: 100% 4px;
    animation: scanline-move 0.1s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes static-flicker {
    0% { opacity: 0.05; }
    50% { opacity: 0.1; }
    100% { opacity: 0.05; }
}

@keyframes scanline-move {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

.container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

/* Main Logo Glitch Effect */
.glitch-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.glitch {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    color: #ffffff;
    letter-spacing: 0.2em;
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(0, 255, 255, 0.4),
        0 0 15px rgba(255, 0, 64, 0.3),
        0 0 20px rgba(0, 255, 0, 0.2),
        2px 2px 0px rgba(0, 0, 0, 0.8);
    animation: glitch-main 2s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    animation: glitch-1 0.5s infinite;
    color: #ff0040;
    z-index: -1;
}

.glitch::after {
    animation: glitch-2 0.5s infinite;
    color: #00ffff;
    z-index: -2;
}

@keyframes glitch-main {
    0%, 90%, 100% {
        transform: translate(0);
    }
    91% {
        transform: translate(-2px, -1px);
    }
    92% {
        transform: translate(2px, 1px);
    }
    93% {
        transform: translate(-1px, 2px);
    }
    94% {
        transform: translate(1px, -2px);
    }
    95% {
        transform: translate(-2px, 1px);
    }
}

@keyframes glitch-1 {
    0%, 90%, 100% {
        transform: translate(0);
    }
    91% {
        transform: translate(2px, 1px);
    }
    92% {
        transform: translate(-2px, -1px);
    }
    93% {
        transform: translate(1px, -1px);
    }
}

@keyframes glitch-2 {
    0%, 90%, 100% {
        transform: translate(0);
    }
    91% {
        transform: translate(-1px, -2px);
    }
    92% {
        transform: translate(1px, 2px);
    }
    93% {
        transform: translate(-2px, 1px);
    }
}

/* Subtitle */
.subtitle-wrapper {
    margin-bottom: 3rem;
}

.subtitle {
    font-size: clamp(1rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.3em;
    color: #888;
    position: relative;
}

.glitch-text {
    animation: text-glitch 3s infinite;
}

@keyframes text-glitch {
    0%, 95%, 100% {
        color: #888;
        text-shadow: none;
    }
    96% {
        color: #ff0040;
        text-shadow: 2px 0 #00ffff;
    }
    97% {
        color: #00ffff;
        text-shadow: -2px 0 #ff0040;
    }
    98% {
        color: #888;
        text-shadow: none;
    }
}

/* Coming Soon */
.coming-soon {
    margin-bottom: 2rem;
    font-family: 'JetBrains Mono', monospace;
}

.coming-text,
.soon-text {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    display: inline-block;
    margin: 0 1rem;
    position: relative;
}

.coming-text {
    color: #ff0040;
    animation: rgb-shift 1.5s infinite;
}

.soon-text {
    color: #00ffff;
    animation: rgb-shift 1.5s infinite 0.75s;
}

@keyframes rgb-shift {
    0%, 100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    25% {
        transform: translate(-1px, 1px);
        filter: hue-rotate(90deg);
    }
    50% {
        transform: translate(1px, -1px);
        filter: hue-rotate(180deg);
    }
    75% {
        transform: translate(-1px, -1px);
        filter: hue-rotate(270deg);
    }
}

/* Tagline */
.tagline {
    margin-bottom: 3rem;
}

.tagline-text {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    letter-spacing: 0.2em;
    color: #666;
    font-weight: 400;
    text-transform: uppercase;
}

/* Email Signup */
.email-signup {
    margin-bottom: 3rem;
    width: 100%;
    max-width: 500px;
}

.cf-turnstile {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.email-input {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #333;
    color: #fff;
    padding: 1rem;
    font-size: 1rem;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    outline: none;
}

.email-input:focus {
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    background: rgba(0, 20, 0, 0.8);
}

.email-input::placeholder {
    color: #666;
}

.submit-btn {
    background: #ff0040;
    border: none;
    color: #ffffff;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Orbitron', monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 0, 64, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.social-link {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
}

.social-link:hover {
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
}

.social-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: #00ff00;
    transition: width 0.3s ease;
}

.social-link:hover::after {
    width: 100%;
}

/* Graffiti Elements */
.graffiti-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.spray-1, .spray-2, .spray-3, .spray-4, .spray-5,
.spray-6, .spray-7, .spray-8, .spray-9, .spray-10,
.spray-11, .spray-12, .spray-13, .spray-14, .spray-15,
.spray-16, .spray-17, .spray-18, .spray-19, .spray-20,
.spray-21, .spray-22, .spray-23, .spray-24, .spray-25,
.spray-26, .spray-27, .spray-28, .spray-29, .spray-30,
.spray-31, .spray-32, .spray-33, .spray-34, .spray-35,
.spray-36, .spray-37, .spray-38, .spray-39, .spray-40 {
    position: absolute;
    font-size: 2rem;
    font-weight: 900;
    opacity: 0.15;
    animation: spray-float 4s infinite ease-in-out;
}

/* Original 5 */
.spray-1 { top: 10%; left: 15%; color: #ff0040; animation-delay: 0s; }
.spray-2 { top: 20%; right: 20%; color: #00ffff; animation-delay: 1s; }
.spray-3 { bottom: 30%; left: 10%; color: #00ff00; animation-delay: 2s; }
.spray-4 { bottom: 20%; right: 15%; color: #ff0040; animation-delay: 3s; }
.spray-5 { top: 50%; left: 5%; color: #00ffff; animation-delay: 0.5s; }

/* New chaotic elements */
.spray-6 { top: 15%; left: 80%; color: #ff0040; animation-delay: 0.2s; font-size: 1.5rem; }
.spray-7 { top: 35%; right: 10%; color: #00ff00; animation-delay: 1.5s; font-size: 2.5rem; }
.spray-8 { bottom: 45%; left: 25%; color: #00ffff; animation-delay: 2.2s; font-size: 1.8rem; }
.spray-9 { top: 60%; right: 30%; color: #ff8000; animation-delay: 3.1s; font-size: 2.2rem; }
.spray-10 { bottom: 15%; left: 50%; color: #8000ff; animation-delay: 0.8s; font-size: 1.7rem; }
.spray-11 { top: 25%; left: 40%; color: #ff0040; animation-delay: 1.8s; font-size: 2.3rem; }
.spray-12 { bottom: 50%; right: 5%; color: #00ffff; animation-delay: 2.5s; font-size: 1.6rem; }
.spray-13 { top: 45%; left: 70%; color: #00ff00; animation-delay: 0.3s; font-size: 2.1rem; }
.spray-14 { bottom: 35%; right: 40%; color: #ff0040; animation-delay: 3.3s; font-size: 1.9rem; }
.spray-15 { top: 70%; left: 20%; color: #00ffff; animation-delay: 1.2s; font-size: 2.4rem; }
.spray-16 { bottom: 60%; right: 25%; color: #ff8000; animation-delay: 2.8s; font-size: 1.4rem; }
.spray-17 { top: 30%; left: 60%; color: #8000ff; animation-delay: 0.7s; font-size: 2.6rem; }
.spray-18 { bottom: 25%; left: 35%; color: #ff0040; animation-delay: 3.5s; font-size: 1.3rem; }
.spray-19 { top: 55%; right: 50%; color: #00ff00; animation-delay: 1.7s; font-size: 2.0rem; }
.spray-20 { bottom: 10%; left: 75%; color: #00ffff; animation-delay: 2.3s; font-size: 1.8rem; }

/* New chaotic spray elements 21-40 */
.spray-21 { top: 8%; left: 60%; color: #ff0040; animation-delay: 0.1s; font-size: 1.9rem; }
.spray-22 { top: 25%; right: 35%; color: #00ffff; animation-delay: 1.3s; font-size: 2.2rem; }
.spray-23 { bottom: 55%; left: 45%; color: #00ff00; animation-delay: 2.6s; font-size: 1.5rem; }
.spray-24 { top: 65%; right: 8%; color: #ff8000; animation-delay: 3.9s; font-size: 2.1rem; }
.spray-25 { bottom: 18%; left: 28%; color: #8000ff; animation-delay: 0.4s; font-size: 1.7rem; }
.spray-26 { top: 18%; left: 85%; color: #ff0040; animation-delay: 1.6s; font-size: 2.4rem; }
.spray-27 { bottom: 48%; right: 18%; color: #00ffff; animation-delay: 2.9s; font-size: 1.4rem; }
.spray-28 { top: 48%; left: 12%; color: #00ff00; animation-delay: 0.6s; font-size: 2.0rem; }
.spray-29 { bottom: 38%; right: 55%; color: #ff0040; animation-delay: 3.2s; font-size: 1.8rem; }
.spray-30 { top: 78%; left: 38%; color: #00ffff; animation-delay: 1.1s; font-size: 2.3rem; }
.spray-31 { bottom: 65%; right: 12%; color: #ff8000; animation-delay: 2.4s; font-size: 1.6rem; }
.spray-32 { top: 35%; left: 78%; color: #8000ff; animation-delay: 0.9s; font-size: 2.5rem; }
.spray-33 { bottom: 28%; left: 58%; color: #ff0040; animation-delay: 3.7s; font-size: 1.2rem; }
.spray-34 { top: 58%; right: 28%; color: #00ff00; animation-delay: 1.4s; font-size: 1.9rem; }
.spray-35 { bottom: 8%; left: 48%; color: #00ffff; animation-delay: 2.7s; font-size: 2.1rem; }
.spray-36 { top: 12%; right: 45%; color: #ff8000; animation-delay: 0.3s; font-size: 1.7rem; }
.spray-37 { bottom: 42%; left: 68%; color: #8000ff; animation-delay: 3.4s; font-size: 2.2rem; }
.spray-38 { top: 42%; right: 68%; color: #ff0040; animation-delay: 1.9s; font-size: 1.5rem; }
.spray-39 { bottom: 22%; left: 18%; color: #00ff00; animation-delay: 2.1s; font-size: 1.8rem; }
.spray-40 { top: 88%; right: 38%; color: #00ffff; animation-delay: 0.7s; font-size: 2.0rem; }

@keyframes spray-float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.15;
    }
    25% {
        transform: translate(15px, -5px) rotate(45deg);
        opacity: 0.25;
    }
    50% {
        transform: translate(10px, -15px) rotate(180deg);
        opacity: 0.3;
    }
    75% {
        transform: translate(-5px, -10px) rotate(270deg);
        opacity: 0.2;
    }
}

/* Graffiti Tags */
.graffiti-tags {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
}

.tag-1, .tag-2, .tag-3, .tag-4, .tag-5,
.tag-6, .tag-7, .tag-8, .tag-9, .tag-10 {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.8rem;
    opacity: 0.08;
    transform: rotate(-15deg);
    letter-spacing: 0.2em;
    animation: tag-glitch 6s infinite ease-in-out;
}

.tag-1 {
    top: 5%;
    left: 5%;
    color: #ff0040;
    animation-delay: 0s;
}

.tag-2 {
    top: 15%;
    right: 10%;
    color: #00ffff;
    animation-delay: 1.2s;
    transform: rotate(25deg);
}

.tag-3 {
    bottom: 40%;
    left: 8%;
    color: #00ff00;
    animation-delay: 2.4s;
    transform: rotate(-30deg);
}

.tag-4 {
    bottom: 10%;
    right: 12%;
    color: #ff8000;
    animation-delay: 3.6s;
    transform: rotate(10deg);
}

.tag-5 {
    top: 40%;
    left: 3%;
    color: #8000ff;
    animation-delay: 4.8s;
    transform: rotate(-45deg);
}

.tag-6 {
    top: 75%;
    right: 5%;
    color: #ff0040;
    animation-delay: 6.0s;
    transform: rotate(35deg);
}

.tag-7 {
    bottom: 55%;
    left: 15%;
    color: #00ffff;
    animation-delay: 7.2s;
    transform: rotate(-20deg);
}

.tag-8 {
    top: 22%;
    right: 35%;
    color: #00ff00;
    animation-delay: 8.4s;
    transform: rotate(50deg);
}

.tag-9 {
    bottom: 15%;
    left: 55%;
    color: #ff8000;
    animation-delay: 9.6s;
    transform: rotate(-35deg);
}

.tag-10 {
    top: 60%;
    right: 15%;
    color: #8000ff;
    animation-delay: 10.8s;
    transform: rotate(15deg);
}

@keyframes tag-glitch {
    0%, 90%, 100% {
        opacity: 0.08;
        transform: rotate(var(--rotation, 0deg));
    }
    91%, 95% {
        opacity: 0.2;
        transform: rotate(var(--rotation, 0deg)) translate(2px, -2px);
    }
    96%, 98% {
        opacity: 0.15;
        transform: rotate(var(--rotation, 0deg)) translate(-1px, 1px);
    }
}

/* Floating Symbols */
.floating-symbols {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.float-1, .float-2, .float-3, .float-4, .float-5,
.float-6, .float-7, .float-8, .float-9, .float-10,
.float-11, .float-12, .float-13, .float-14, .float-15,
.float-16, .float-17, .float-18, .float-19, .float-20 {
    position: absolute;
    font-size: 1rem;
    font-weight: 900;
    opacity: 0.1;
    animation: float-chaos 3s infinite linear;
}

.float-1 { top: 20%; left: 30%; color: #ff0040; animation-delay: 0s; }
.float-2 { top: 40%; left: 60%; color: #00ffff; animation-delay: 0.3s; }
.float-3 { top: 60%; left: 20%; color: #00ff00; animation-delay: 0.6s; }
.float-4 { top: 80%; left: 70%; color: #ff0040; animation-delay: 0.9s; }
.float-5 { top: 10%; left: 50%; color: #00ffff; animation-delay: 1.2s; }
.float-6 { top: 30%; left: 80%; color: #ff8000; animation-delay: 1.5s; }
.float-7 { top: 50%; left: 10%; color: #8000ff; animation-delay: 1.8s; }
.float-8 { top: 70%; left: 40%; color: #ff0040; animation-delay: 2.1s; }
.float-9 { top: 90%; left: 15%; color: #00ff00; animation-delay: 2.4s; }
.float-10 { top: 5%; left: 75%; color: #00ffff; animation-delay: 2.7s; }
.float-11 { top: 15%; left: 45%; color: #ff8000; animation-delay: 0.15s; }
.float-12 { top: 35%; left: 25%; color: #8000ff; animation-delay: 0.45s; }
.float-13 { top: 55%; left: 85%; color: #ff0040; animation-delay: 0.75s; }
.float-14 { top: 75%; left: 55%; color: #00ffff; animation-delay: 1.05s; }
.float-15 { top: 25%; left: 5%; color: #00ff00; animation-delay: 1.35s; }
.float-16 { top: 45%; left: 65%; color: #ff8000; animation-delay: 1.65s; }
.float-17 { top: 65%; left: 35%; color: #8000ff; animation-delay: 1.95s; }
.float-18 { top: 85%; left: 45%; color: #ff0040; animation-delay: 2.25s; }
.float-19 { top: 10%; left: 95%; color: #00ff00; animation-delay: 2.55s; }
.float-20 { top: 95%; left: 25%; color: #00ffff; animation-delay: 2.85s; }

@keyframes float-chaos {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.1;
    }
    25% {
        transform: translate(20px, -30px) rotate(90deg) scale(1.2);
        opacity: 0.2;
    }
    50% {
        transform: translate(-15px, -60px) rotate(180deg) scale(0.8);
        opacity: 0.15;
    }
    75% {
        transform: translate(30px, -90px) rotate(270deg) scale(1.1);
        opacity: 0.25;
    }
    100% {
        transform: translate(0, -120px) rotate(360deg) scale(1);
        opacity: 0;
    }
}



/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    .input-wrapper {
        flex-direction: column;
    }
    
    .social-links {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .coming-text,
    .soon-text {
        display: block;
        margin: 0.5rem 0;
    }
}

/* Additional Glitch Effects */
@media (prefers-reduced-motion: no-preference) {
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent 98%,
            rgba(255, 0, 64, 0.1) 100%
        );
        animation: screen-flicker 0.3s infinite;
        pointer-events: none;
        z-index: 5;
    }
}

@keyframes screen-flicker {
    0%, 90%, 100% {
        opacity: 0;
    }
    91%, 95% {
        opacity: 1;
    }
}