body {
        margin: 0;
        font-family: sans-serif;
        color: white;
        overflow-x: hidden;
        background: #0f172a;
}

/* ---------- CYBERPUNK BACKGROUND ---------- */
.stage {
        position: fixed;
        inset: 0;
        overflow: hidden;
        z-index: -1;
        pointer-events: none;
}

/* Base gradient layer (Tokyo Night style) */
#bg-gradient {
        position: absolute;
        inset: 0;
        background:
                radial-gradient(600px 300px at 12% 10%, rgba(0, 238, 255, .22), transparent 60%),
                radial-gradient(800px 400px at 88% 18%, rgba(255, 42, 109, .20), transparent 55%),
                radial-gradient(700px 400px at 35% 85%, rgba(123, 97, 255, .18), transparent 60%),
                linear-gradient(135deg, #0b1020 0%, #121423 35%, #16161e 55%, #1a1b26 72%, #0f172a 100%);
        filter: saturate(1.25) contrast(1.05);
        transition: opacity .6s ease;
}

/* Scanlines */
#scanlines {
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .04) 0 1px, transparent 2px 3px);
        animation: scan 8s linear infinite;
        opacity: .16;
        mix-blend-mode: screen;
}

@keyframes scan {
        0% {
                background-position-y: 0;
        }

        100% {
                background-position-y: 100px;
        }
}

/* Retro grid floor */
#grid {
        position: absolute;
        left: 50%;
        bottom: -15vh;
        transform: translateX(-50%) perspective(900px) rotateX(60deg) scale(1.2);
        width: 220vw;
        height: 65vh;
        background-image:
                linear-gradient(rgba(0, 238, 255, .35) 2px, transparent 2px),
                linear-gradient(90deg, rgba(255, 42, 109, .35) 2px, transparent 2px);
        background-size: 38px 38px;
        background-position: center center;
        filter: drop-shadow(0 0 30px rgba(0, 238, 255, .18));
        opacity: .55;
        mask-image: radial-gradient(120% 100% at 50% 100%, black 40%, transparent 85%);
        animation: gridPulse 6s ease-in-out infinite alternate;
}

@keyframes gridPulse {
        0% {
                transform: translateX(-50%) perspective(900px) rotateX(60deg) scale(1.18);
        }

        100% {
                transform: translateX(-50%) perspective(900px) rotateX(60deg) scale(1.24);
        }
}

/* Flicker glitch */
@keyframes glitch-flicker {
        0% {
                clip-path: inset(0 0 85% 0);
                transform: translate(0);
        }

        10% {
                clip-path: inset(10% 0 60% 0);
                transform: translate(-1px, -1px);
        }

        20% {
                clip-path: inset(20% 0 70% 0);
                transform: translate(1px, 1px);
        }

        30% {
                clip-path: inset(40% 0 30% 0);
                transform: translate(-1px, 0);
        }

        40% {
                clip-path: inset(60% 0 10% 0);
                transform: translate(1px, -1px);
        }

        50% {
                clip-path: inset(30% 0 60% 0);
                transform: translate(0, 1px);
        }

        60% {
                clip-path: inset(10% 0 50% 0);
                transform: translate(-1px, 0);
        }

        70% {
                clip-path: inset(40% 0 20% 0);
                transform: translate(1px, 1px);
        }

        80% {
                clip-path: inset(60% 0 30% 0);
                transform: translate(-1px, -1px);
        }

        90% {
                clip-path: inset(20% 0 60% 0);
                transform: translate(1px, 0);
        }

        100% {
                clip-path: inset(0 0 85% 0);
                transform: translate(0);
        }
}

.animate-glitch::before,
.animate-glitch::after {
        animation: glitch-flicker 1s infinite linear alternate-reverse;
}

/* ---------- Full Stacked Glitch Effect ---------- */
.glitch-stack {
        display: inline-grid;
        position: relative;
        font-weight: bold;
        font-size: 2.5rem;
        color: #fff;
}

.glitch-stack span {
        grid-row-start: 1;
        grid-column-start: 1;
        --glitch-translate: 0px;
        animation: glitch-stack-anim 2s ease infinite alternate-reverse;
}

.glitch-stack span:nth-child(odd) {
        --glitch-translate: 8px;
}

.glitch-stack span:nth-child(even) {
        --glitch-translate: -8px;
}

@keyframes glitch-stack-anim {
        0% {
                text-shadow: -2px 3px 0 #ff2a6d, 2px -3px 0 #0ff;
                transform: translate(var(--glitch-translate), 0);
        }

        2% {
                text-shadow: 2px -3px 0 #ff2a6d, -2px 3px 0 #0ff;
                transform: translate(calc(var(--glitch-translate) / 2), 0);
        }

        4% {
                text-shadow: none;
                transform: none;
        }

        100% {
                text-shadow: none;
                transform: none;
        }
}

/* Floating neon blobs */
.blob {
        position: absolute;
        border-radius: 9999px;
        filter: blur(60px);
        mix-blend-mode: screen;
        opacity: .32;
        animation: float 18s ease-in-out infinite;
}

.blob.cyan {
        background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, .75), rgba(0, 255, 255, 0) 60%);
}

.blob.magenta {
        background: radial-gradient(circle at 60% 40%, rgba(255, 42, 109, .65), rgba(255, 42, 109, 0) 60%);
}

.blob.violet {
        background: radial-gradient(circle at 40% 60%, rgba(123, 97, 255, .70), rgba(123, 97, 255, 0) 60%);
}

.blob.one {
        width: 48vw;
        height: 48vw;
        top: -10vh;
        left: -10vw;
        animation-duration: 24s;
}

.blob.two {
        width: 40vw;
        height: 40vw;
        top: 5vh;
        right: -8vw;
        animation-duration: 28s;
}

.blob.three {
        width: 36vw;
        height: 36vw;
        bottom: 5vh;
        left: 10vw;
        animation-duration: 22s;
}

@keyframes float {
        0% {
                transform: translate3d(0, 0, 0) scale(1);
        }

        50% {
                transform: translate3d(2vw, -1vh, 0) scale(1.08);
        }

        100% {
                transform: translate3d(0, 0, 0) scale(1);
        }
}

/* Neon title */
.neon-title {
        text-shadow: 0 0 6px #0ff, 0 0 22px #0ff, 0 0 44px #ff2a6d;
        letter-spacing: .02em;
}

/* Old glitch effect (optional fallback) */
.glitch {
        position: relative;
        display: inline-block;
}

.glitch::before,
.glitch::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        pointer-events: none;
        mix-blend-mode: screen;
}

.glitch::before {
        transform: translate(1px, 0);
        text-shadow: -2px 0 #0ff;
        animation: g1 2s infinite linear alternate-reverse;
}

.glitch::after {
        transform: translate(-1px, 0);
        text-shadow: 2px 0 #ff2a6d;
        animation: g2 2.2s infinite linear alternate;
}

@keyframes g1 {
        0% {
                clip-path: inset(0 0 85% 0);
        }

        20% {
                clip-path: inset(0 0 20% 0);
        }

        40% {
                clip-path: inset(60% 0 0 0);
        }

        60% {
                clip-path: inset(10% 0 65% 0);
        }

        80% {
                clip-path: inset(0 0 40% 0);
        }

        100% {
                clip-path: inset(70% 0 0 0);
        }
}

@keyframes g2 {
        0% {
                clip-path: inset(70% 0 0 0);
        }

        20% {
                clip-path: inset(0 0 40% 0);
        }

        40% {
                clip-path: inset(10% 0 65% 0);
        }

        60% {
                clip-path: inset(60% 0 0 0);
        }

        80% {
                clip-path: inset(0 0 20% 0);
        }

        100% {
                clip-path: inset(0 0 85% 0);
        }
}