/* Pixel Art City Background */

.pixel-city-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(to bottom,
        #0a0e27 0%,
        #1a1f3a 30%,
        #2a2548 60%,
        #3a3058 80%,
        #4a3568 100%);
}

/* City Skyline Layer */
.city-skyline {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
    background-image:
        /* Foreground buildings */
        linear-gradient(to bottom, transparent 60%, #1a1f3a 60%),
        linear-gradient(to bottom, transparent 70%, #262b48 70%),
        linear-gradient(to bottom, transparent 50%, #1a1f3a 50%),
        linear-gradient(to bottom, transparent 65%, #2a2548 65%),
        linear-gradient(to bottom, transparent 55%, #1a1f3a 55%),
        linear-gradient(to bottom, transparent 75%, #262b48 75%),
        linear-gradient(to bottom, transparent 45%, #1a1f3a 45%);
    background-size:
        60px 100%,
        80px 100%,
        120px 100%,
        90px 100%,
        100px 100%,
        70px 100%,
        110px 100%;
    background-position:
        0px bottom,
        60px bottom,
        140px bottom,
        260px bottom,
        350px bottom,
        450px bottom,
        520px bottom;
    background-repeat: repeat-x;
    filter: drop-shadow(0 0 20px rgba(255, 113, 206, 0.3));
}

/* Building Windows */
.building-windows {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
}

.building-windows::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Window pattern */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 8px,
            #ff71ce 8px,
            #ff71ce 10px,
            transparent 10px,
            transparent 20px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            #01cdfe 8px,
            #01cdfe 10px,
            transparent 10px,
            transparent 20px
        );
    mix-blend-mode: screen;
    opacity: 0.3;
    animation: windowFlicker 10s infinite;
}

/* Animated neon signs */
.neon-signs {
    position: absolute;
    bottom: 30%;
    width: 100%;
    height: 30%;
}

.neon-sign {
    position: absolute;
    width: 40px;
    height: 20px;
    background: linear-gradient(135deg, #ff71ce, #b967ff);
    box-shadow:
        0 0 20px #ff71ce,
        0 0 40px #ff71ce,
        0 0 60px #ff71ce;
    animation: neonPulse 2s ease-in-out infinite;
}

.neon-sign:nth-child(1) {
    left: 10%;
    bottom: 40%;
    animation-delay: 0s;
}

.neon-sign:nth-child(2) {
    left: 25%;
    bottom: 60%;
    background: linear-gradient(135deg, #01cdfe, #05ffa1);
    box-shadow:
        0 0 20px #01cdfe,
        0 0 40px #01cdfe,
        0 0 60px #01cdfe;
    animation-delay: 0.5s;
}

.neon-sign:nth-child(3) {
    left: 45%;
    bottom: 35%;
    width: 60px;
    height: 15px;
    background: linear-gradient(135deg, #b967ff, #ff71ce);
    box-shadow:
        0 0 20px #b967ff,
        0 0 40px #b967ff,
        0 0 60px #b967ff;
    animation-delay: 1s;
}

.neon-sign:nth-child(4) {
    right: 30%;
    bottom: 55%;
    background: linear-gradient(135deg, #05ffa1, #01cdfe);
    box-shadow:
        0 0 20px #05ffa1,
        0 0 40px #05ffa1,
        0 0 60px #05ffa1;
    animation-delay: 1.5s;
}

.neon-sign:nth-child(5) {
    right: 15%;
    bottom: 45%;
    width: 50px;
    height: 25px;
    background: linear-gradient(135deg, #fffb96, #ff71ce);
    box-shadow:
        0 0 20px #fffb96,
        0 0 40px #fffb96,
        0 0 60px #fffb96;
    animation-delay: 2s;
}

/* Animated stars/lights */
.city-lights {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 40% 50%, #ff71ce, transparent),
        radial-gradient(2px 2px at 60% 10%, #01cdfe, transparent),
        radial-gradient(2px 2px at 80% 40%, white, transparent),
        radial-gradient(2px 2px at 15% 60%, #b967ff, transparent),
        radial-gradient(2px 2px at 35% 80%, white, transparent),
        radial-gradient(2px 2px at 55% 25%, #05ffa1, transparent),
        radial-gradient(2px 2px at 75% 70%, white, transparent),
        radial-gradient(2px 2px at 90% 20%, #ff71ce, transparent),
        radial-gradient(2px 2px at 10% 90%, #01cdfe, transparent);
    background-size: 200% 200%;
    animation: twinkle 20s infinite;
}

/* Fog/mist effect */
.city-fog {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 40%;
    background: linear-gradient(to top,
        rgba(185, 103, 255, 0.1) 0%,
        transparent 100%);
    animation: fogDrift 30s infinite linear;
}

/* Grid overlay for that retro feel */
.retro-grid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    background-image:
        repeating-linear-gradient(
            90deg,
            #ff71ce 0px,
            #ff71ce 1px,
            transparent 1px,
            transparent 80px
        ),
        repeating-linear-gradient(
            0deg,
            #01cdfe 0px,
            #01cdfe 1px,
            transparent 1px,
            transparent 80px
        );
    opacity: 0.1;
    perspective: 1000px;
    transform: rotateX(60deg);
    transform-origin: center bottom;
}

/* Animated flying vehicles (small dots) */
.flying-vehicles {
    position: absolute;
    width: 100%;
    height: 60%;
    top: 20%;
}

.vehicle {
    position: absolute;
    width: 4px;
    height: 2px;
    background: #ff71ce;
    box-shadow: 0 0 10px #ff71ce;
    animation: fly 15s infinite linear;
}

.vehicle:nth-child(1) {
    top: 20%;
    animation-duration: 12s;
    animation-delay: 0s;
}

.vehicle:nth-child(2) {
    top: 40%;
    background: #01cdfe;
    box-shadow: 0 0 10px #01cdfe;
    animation-duration: 18s;
    animation-delay: 5s;
}

.vehicle:nth-child(3) {
    top: 60%;
    background: #05ffa1;
    box-shadow: 0 0 10px #05ffa1;
    animation-duration: 14s;
    animation-delay: 10s;
}

/* Animations */
@keyframes windowFlicker {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.5; }
    25%, 75% { opacity: 0.2; }
}

@keyframes neonPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

@keyframes twinkle {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

@keyframes fogDrift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes fly {
    0% {
        left: -10px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 110%;
        opacity: 0;
    }
}

/* Rain effect */
.rain {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(transparent, rgba(255, 255, 255, 0.1) 50%, transparent);
    background-size: 2px 100px;
    animation: rain 0.3s infinite linear;
    opacity: 0.1;
}

@keyframes rain {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

/* Scanlines for extra retro effect */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0.05) 1px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0) 3px
    );
    pointer-events: none;
    z-index: 100;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .city-skyline {
        height: 50%;
    }

    .retro-grid {
        height: 25%;
    }

    .neon-sign {
        width: 30px;
        height: 15px;
    }
}