/* Navigation Styles */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #000000;
    border-bottom: 1px solid rgba(139, 10, 26, 0.3);
    overflow: hidden;
}

/* ===== DYNAMIC CITYSCAPE ANIMATION SYSTEM ===== */

/* Base layer styling */
.city-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    contain: layout style paint;
    background: transparent;
}

/* ===== CITY SILHOUETTE ===== */
.city-buildings {
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url('../city.png') repeat-x bottom left;
    background-size: auto 100%;
    animation: cityscapeScroll 120s linear infinite;
}

/* City scroll animation */
@keyframes cityscapeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== MOON ===== */
.city-moon {
    z-index: 0;
}

.city-moon::before {
    content: '';
    position: absolute;
    top: 12%;
    right: 15%;
    width: 35px;
    height: 35px;
    background: radial-gradient(circle at 35% 35%,
        #fffef0 0%,
        #f5f0d0 40%,
        #e8e0b0 60%,
        #d4c890 100%);
    border-radius: 50%;
    box-shadow:
        0 0 20px 8px rgba(255, 250, 220, 0.4),
        0 0 40px 15px rgba(255, 250, 220, 0.2),
        0 0 80px 30px rgba(255, 250, 220, 0.1);
    animation: moonGlow 8s ease-in-out infinite alternate;
}

/* Moonlight effect across the sky */
.city-moon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 80% 60% at 85% 20%,
        rgba(255, 250, 230, 0.08) 0%,
        rgba(255, 250, 230, 0.03) 40%,
        transparent 70%);
    pointer-events: none;
}

@keyframes moonGlow {
    0% { box-shadow: 0 0 20px 8px rgba(255, 250, 220, 0.4), 0 0 40px 15px rgba(255, 250, 220, 0.2), 0 0 80px 30px rgba(255, 250, 220, 0.1); }
    100% { box-shadow: 0 0 25px 10px rgba(255, 250, 220, 0.5), 0 0 50px 20px rgba(255, 250, 220, 0.25), 0 0 100px 40px rgba(255, 250, 220, 0.12); }
}

/* ===== STARS ===== */
.city-stars {
    z-index: 0;
}

.city-stars::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:
        radial-gradient(1px 1px at 5% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 12% 8%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 20% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 28% 12%, rgba(255, 255, 255, 0.85) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 30%, rgba(255, 255, 255, 0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 42% 18%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 8%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 58% 22%, rgba(255, 255, 255, 0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 35%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 72% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 28%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 15%, rgba(255, 255, 255, 0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 95% 32%, rgba(255, 255, 255, 0.65) 0%, transparent 100%);
    animation: starsTwinkle 4s ease-in-out infinite alternate;
}

/* Shooting star */
.city-stars::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 1) 100%);
    border-radius: 2px;
    opacity: 0;
    animation: shootingStar 15s linear infinite;
}

@keyframes starsTwinkle {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes shootingStar {
    0%, 90% { opacity: 0; transform: translate(0, 0); }
    92% { opacity: 1; transform: translate(0, 0); }
    100% { opacity: 0; transform: translate(100px, 40px); }
}

/* ===== WINDOW LIGHTS ===== */
/* Three-layer depth system: Foreground (black) = brightest, Mid (dark grey) = medium, Back (light grey) = dimmest */
.city-windows {
    z-index: 2;
}

/* FOREGROUND WINDOWS - Black buildings (brightest, warm yellow-white) */
/* Grid pattern: windows aligned in rows and columns like real buildings */
/* NO lights in top 20% of pointed/spire buildings */
.city-windows::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-image:
        /* ========== FAR LEFT RECTANGULAR BUILDINGS (0-50px) ========== */
        /* Building 1: x:8-22px - flat top, grid pattern */
        /* Row 1 (top) */
        radial-gradient(2px 2px at 10px 52%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 52%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 10px 62%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 62%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 10px 72%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 72%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        /* Row 4 (bottom) */
        radial-gradient(2px 2px at 10px 82%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 82%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),

        /* Building 2: x:32-48px - flat top */
        /* Row 1 */
        radial-gradient(2px 2px at 35px 55%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 43px 55%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 35px 65%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 43px 65%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 35px 75%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 43px 75%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),

        /* ========== LEFT CLUSTER BUILDINGS (50-105px) ========== */
        /* Building: x:55-72px - rectangular, grid */
        /* Row 1 */
        radial-gradient(2px 2px at 58px 56%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 66px 56%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 58px 66%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 66px 66%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 58px 76%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 66px 76%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),

        /* Building: x:78-95px */
        /* Row 1 */
        radial-gradient(2px 2px at 82px 58%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 90px 58%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 82px 68%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 90px 68%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 82px 78%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 90px 78%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),

        /* ========== EMPIRE STATE BUILDING (105-175px) - POINTED SPIRE ========== */
        /* NO LIGHTS in top 20% (spire area: 0-35%) */
        /* Windows start at 40% - body of building only */
        /* Upper body Row 1 (40%) - narrower section */
        radial-gradient(2px 2px at 128px 42%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 136px 42%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 144px 42%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        /* Row 2 (50%) - wider */
        radial-gradient(2px 2px at 122px 50%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 130px 50%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 138px 50%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 146px 50%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 154px 50%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        /* Row 3 (58%) */
        radial-gradient(2px 2px at 120px 58%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 128px 58%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 136px 58%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 144px 58%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 152px 58%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 160px 58%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        /* Row 4 (66%) */
        radial-gradient(2px 2px at 118px 66%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 126px 66%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 134px 66%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 142px 66%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 150px 66%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 158px 66%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 5 (74%) - base wider */
        radial-gradient(2px 2px at 116px 74%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 124px 74%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 132px 74%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 140px 74%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 148px 74%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 156px 74%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 164px 74%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        /* Row 6 (82%) - base */
        radial-gradient(2px 2px at 120px 82%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 130px 82%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 140px 82%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 150px 82%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 160px 82%, rgba(255, 240, 180, 1) 0%, transparent 100%),

        /* ========== MID-LEFT RECTANGULAR BUILDINGS (175-280px) ========== */
        /* Building: x:182-200px - flat top */
        /* Row 1 */
        radial-gradient(2px 2px at 185px 60%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 193px 60%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 185px 70%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 193px 70%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 185px 80%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 193px 80%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),

        /* Building: x:210-235px */
        /* Row 1 */
        radial-gradient(2px 2px at 215px 56%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 223px 56%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 231px 56%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 215px 66%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 223px 66%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 231px 66%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 215px 76%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 223px 76%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 231px 76%, rgba(255, 250, 200, 1) 0%, transparent 100%),

        /* Building: x:248-270px */
        /* Row 1 */
        radial-gradient(2px 2px at 252px 58%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 262px 58%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 252px 68%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 262px 68%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 252px 78%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 262px 78%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),

        /* ========== CENTER RECTANGULAR BUILDINGS (280-400px) ========== */
        /* Building: x:288-310px */
        /* Row 1 */
        radial-gradient(2px 2px at 292px 55%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 302px 55%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 292px 65%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 302px 65%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 292px 75%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 302px 75%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),

        /* Building: x:322-350px */
        /* Row 1 */
        radial-gradient(2px 2px at 328px 52%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 338px 52%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 348px 52%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 328px 62%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 338px 62%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 348px 62%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 328px 72%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 338px 72%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 348px 72%, rgba(255, 235, 170, 1) 0%, transparent 100%),

        /* Building: x:365-390px */
        /* Row 1 */
        radial-gradient(2px 2px at 370px 56%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 380px 56%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 370px 66%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 380px 66%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 370px 76%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 380px 76%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),

        /* ========== ANGULAR SECTION (400-480px) ========== */
        /* Building: x:408-435px - flat top */
        /* Row 1 */
        radial-gradient(2px 2px at 412px 58%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 422px 58%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 432px 58%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 412px 68%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 422px 68%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 432px 68%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 412px 78%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 422px 78%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 432px 78%, rgba(255, 250, 200, 1) 0%, transparent 100%),

        /* Building: x:450-472px */
        /* Row 1 */
        radial-gradient(2px 2px at 455px 60%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 465px 60%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 455px 70%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 465px 70%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 455px 80%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 465px 80%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),

        /* ========== RIGHT SPIRES (480-550px) - POINTED TOPS ========== */
        /* NO LIGHTS in top 20% of spires */
        /* Tall spire building: x:492-518px - lights start at 50% */
        /* Row 1 (50%) */
        radial-gradient(2px 2px at 496px 52%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 506px 52%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 516px 52%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        /* Row 2 (60%) */
        radial-gradient(2px 2px at 496px 62%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 506px 62%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 516px 62%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        /* Row 3 (70%) */
        radial-gradient(2px 2px at 496px 72%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 506px 72%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 516px 72%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        /* Row 4 (80%) */
        radial-gradient(2px 2px at 498px 82%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 510px 82%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),

        /* Secondary spire: x:528-545px - lights start at 55% */
        /* Row 1 (55%) */
        radial-gradient(2px 2px at 532px 57%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 542px 57%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 2 (67%) */
        radial-gradient(2px 2px at 532px 67%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 542px 67%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        /* Row 3 (77%) */
        radial-gradient(2px 2px at 532px 77%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 542px 77%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),

        /* ========== FAR RIGHT BUILDINGS (550-640px) ========== */
        /* Building: x:558-580px - flat top */
        /* Row 1 */
        radial-gradient(2px 2px at 562px 55%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 572px 55%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 562px 65%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 572px 65%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 562px 75%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 572px 75%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),

        /* Curved building: x:595-618px */
        /* Row 1 */
        radial-gradient(2px 2px at 600px 54%, rgba(255, 240, 180, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 610px 54%, rgba(255, 245, 190, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 600px 64%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 610px 64%, rgba(255, 235, 170, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 600px 74%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 610px 74%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),

        /* End building: x:625-638px */
        /* Row 1 */
        radial-gradient(2px 2px at 628px 58%, rgba(255, 235, 170, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 636px 58%, rgba(255, 250, 200, 0.95) 0%, transparent 100%),
        /* Row 2 */
        radial-gradient(2px 2px at 628px 68%, rgba(255, 245, 190, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 636px 68%, rgba(255, 240, 180, 0.95) 0%, transparent 100%),
        /* Row 3 */
        radial-gradient(2px 2px at 628px 78%, rgba(255, 250, 200, 1) 0%, transparent 100%),
        radial-gradient(2px 2px at 636px 78%, rgba(255, 235, 170, 0.95) 0%, transparent 100%);
    background-size: 640px 100%;
    animation: windowsScroll 120s linear infinite, windowFlicker 4s ease-in-out infinite alternate;
}

/* BACKGROUND WINDOWS - Grey buildings (dimmer, cooler tones for depth) */
/* Grid pattern maintained, positioned in gaps between foreground buildings */
.city-windows::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-image:
        /* ========== MEDIUM GREY LAYER - Visible between foreground ========== */
        /* Building in gap x:25-30px - grid pattern */
        radial-gradient(1.5px 1.5px at 26px 62%, rgba(215, 205, 175, 0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 26px 72%, rgba(220, 210, 180, 0.5) 0%, transparent 100%),

        /* Building in gap x:48-52px */
        radial-gradient(1.5px 1.5px at 50px 58%, rgba(220, 210, 180, 0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50px 68%, rgba(215, 205, 175, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50px 78%, rgba(225, 215, 185, 0.55) 0%, transparent 100%),

        /* Gap near x:100-108px */
        radial-gradient(1.5px 1.5px at 102px 60%, rgba(215, 205, 175, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 102px 70%, rgba(220, 210, 180, 0.55) 0%, transparent 100%),

        /* Behind Empire State - minimal, just in wide gaps */
        radial-gradient(1.5px 1.5px at 172px 62%, rgba(220, 210, 180, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 172px 72%, rgba(215, 205, 175, 0.55) 0%, transparent 100%),

        /* Gap x:200-208px */
        radial-gradient(1.5px 1.5px at 204px 58%, rgba(225, 215, 185, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 204px 68%, rgba(220, 210, 180, 0.55) 0%, transparent 100%),

        /* Gap x:238-246px */
        radial-gradient(1.5px 1.5px at 242px 56%, rgba(215, 205, 175, 0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 242px 66%, rgba(220, 210, 180, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 242px 76%, rgba(225, 215, 185, 0.55) 0%, transparent 100%),

        /* Gap x:275-285px */
        radial-gradient(1.5px 1.5px at 280px 54%, rgba(220, 210, 180, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 280px 64%, rgba(215, 205, 175, 0.55) 0%, transparent 100%),

        /* Gap x:312-320px */
        radial-gradient(1.5px 1.5px at 316px 56%, rgba(225, 215, 185, 0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 316px 66%, rgba(220, 210, 180, 0.5) 0%, transparent 100%),

        /* Gap x:355-362px */
        radial-gradient(1.5px 1.5px at 358px 58%, rgba(215, 205, 175, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 358px 68%, rgba(220, 210, 180, 0.55) 0%, transparent 100%),

        /* Gap x:392-405px */
        radial-gradient(1.5px 1.5px at 398px 56%, rgba(220, 210, 180, 0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 398px 66%, rgba(215, 205, 175, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 398px 76%, rgba(225, 215, 185, 0.55) 0%, transparent 100%),

        /* Gap x:438-448px */
        radial-gradient(1.5px 1.5px at 444px 60%, rgba(215, 205, 175, 0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 444px 70%, rgba(220, 210, 180, 0.5) 0%, transparent 100%),

        /* Gap x:475-490px */
        radial-gradient(1.5px 1.5px at 482px 58%, rgba(220, 210, 180, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 482px 68%, rgba(225, 215, 185, 0.55) 0%, transparent 100%),

        /* Gap x:520-528px */
        radial-gradient(1.5px 1.5px at 524px 60%, rgba(215, 205, 175, 0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 524px 70%, rgba(220, 210, 180, 0.5) 0%, transparent 100%),

        /* Gap x:548-556px */
        radial-gradient(1.5px 1.5px at 552px 56%, rgba(220, 210, 180, 0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 552px 66%, rgba(215, 205, 175, 0.5) 0%, transparent 100%),

        /* Gap x:582-595px */
        radial-gradient(1.5px 1.5px at 588px 58%, rgba(225, 215, 185, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 588px 68%, rgba(220, 210, 180, 0.55) 0%, transparent 100%),

        /* ========== LIGHT GREY FAR BACKGROUND - Very dim, blue tint ========== */
        /* Sparse windows in deep background - also grid aligned */
        radial-gradient(1.5px 1.5px at 75px 52%, rgba(180, 200, 230, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 75px 62%, rgba(175, 195, 225, 0.35) 0%, transparent 100%),

        radial-gradient(1.5px 1.5px at 180px 50%, rgba(170, 190, 220, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 180px 60%, rgba(180, 200, 230, 0.35) 0%, transparent 100%),

        radial-gradient(1.5px 1.5px at 320px 48%, rgba(175, 195, 225, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 320px 58%, rgba(170, 190, 220, 0.35) 0%, transparent 100%),

        radial-gradient(1.5px 1.5px at 440px 50%, rgba(180, 200, 230, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 440px 60%, rgba(175, 195, 225, 0.35) 0%, transparent 100%),

        radial-gradient(1.5px 1.5px at 590px 52%, rgba(170, 190, 220, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 590px 62%, rgba(180, 200, 230, 0.35) 0%, transparent 100%);
    background-size: 640px 100%;
    animation: windowsScroll 120s linear infinite;
    opacity: 0.9;
}

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

@keyframes windowFlicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* ===== AIRCRAFT ===== */
.city-aircraft {
    z-index: 4;
}

/* Plane 1 - flying right */
.city-aircraft::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -30px;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow:
        0 0 4px 2px rgba(255, 255, 255, 0.6),
        0 0 10px 4px rgba(255, 255, 255, 0.2),
        -6px 0 0 0 rgba(255, 50, 50, 0.7),
        6px 0 0 0 rgba(50, 255, 50, 0.7);
    animation: planeFly 60s linear infinite, planeStrobe 1s ease-in-out infinite;
}

/* Plane 2 - flying left */
.city-aircraft::after {
    content: '';
    position: absolute;
    top: 30%;
    right: -25px;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow:
        0 0 3px 1px rgba(255, 255, 255, 0.5),
        0 0 8px 3px rgba(255, 255, 255, 0.15),
        -4px 0 0 0 rgba(255, 50, 50, 0.5),
        4px 0 0 0 rgba(50, 255, 50, 0.5);
    animation: planeFlyReverse 90s linear infinite, planeStrobe 1.3s ease-in-out infinite;
    animation-delay: 20s, 0.5s;
}

@keyframes planeFly {
    0% { transform: translate(0, 0); }
    100% { transform: translate(calc(100vw + 60px), 15px); }
}

@keyframes planeFlyReverse {
    0% { transform: translate(0, 0); }
    100% { transform: translate(calc(-100vw - 50px), 10px); }
}

@keyframes planeStrobe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ===== CARS ===== */
.city-cars {
    z-index: 4;
}

/* Car headlights going right */
.city-cars::before {
    content: '';
    position: absolute;
    bottom: 8%;
    left: -80px;
    width: 4px;
    height: 3px;
    background: rgba(255, 255, 200, 1);
    border-radius: 50%;
    box-shadow:
        12px 0 0 0 rgba(255, 255, 200, 1),
        0 0 8px 3px rgba(255, 255, 180, 0.6),
        12px 0 8px 3px rgba(255, 255, 180, 0.6),
        25px 0 12px 5px rgba(255, 255, 180, 0.2);
    animation: carDriveRight 20s linear infinite;
}

/* Car taillights going left */
.city-cars::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -60px;
    width: 3px;
    height: 2px;
    background: rgba(255, 50, 50, 1);
    border-radius: 50%;
    box-shadow:
        10px 0 0 0 rgba(255, 50, 50, 1),
        0 0 6px 2px rgba(255, 30, 30, 0.5),
        10px 0 6px 2px rgba(255, 30, 30, 0.5);
    animation: carDriveLeft 28s linear infinite;
    animation-delay: 5s;
}

@keyframes carDriveRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 160px)); }
}

@keyframes carDriveLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100vw - 120px)); }
}

/* Layer: Billboards with logos */
.city-billboards {
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    background: transparent;
    animation: billboardsScroll 120s linear infinite;
    will-change: transform;
}

.billboard {
    position: absolute;
    bottom: 35%;
    width: 70px;
    height: 45px;
    transform-origin: center bottom;
}

/* Billboard frame - metallic look */
.billboard-frame {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(180deg,
        rgba(80, 85, 100, 1) 0%,
        rgba(50, 55, 70, 1) 20%,
        rgba(40, 45, 60, 1) 80%,
        rgba(30, 35, 50, 1) 100%);
    border: 1px solid rgba(100, 110, 130, 0.5);
    border-radius: 3px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Billboard support pole */
.billboard::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 25px;
    background: linear-gradient(90deg,
        rgba(40, 45, 60, 1) 0%,
        rgba(60, 65, 80, 1) 50%,
        rgba(40, 45, 60, 1) 100%);
    border-radius: 1px;
}

.billboard-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(10, 12, 20, 0.95);
    border-radius: 2px;
    z-index: 1;
    padding: 4px;
    box-sizing: border-box;
}

/* Billboard backlight glow */
.billboard-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(ellipse at center,
        rgba(139, 10, 26, 0.4) 0%,
        rgba(139, 10, 26, 0.2) 40%,
        transparent 70%);
    z-index: -1;
    animation: billboardGlow 3s ease-in-out infinite alternate;
}

/* Position billboards - 4 per 800px segment for seamless 800px scroll loop */
/* First segment: 0-800px */
.billboard-1 {
    left: 100px;
    bottom: 42%;
}

.billboard-2 {
    left: 300px;
    bottom: 38%;
    width: 60px;
    height: 40px;
}

.billboard-3 {
    left: 500px;
    bottom: 45%;
    width: 75px;
    height: 48px;
}

.billboard-4 {
    left: 700px;
    bottom: 40%;
    width: 65px;
    height: 42px;
}

/* Second segment: 800-1600px (repeat of first) */
.billboard-5 {
    left: 900px;
    bottom: 42%;
    width: 70px;
    height: 45px;
}

.billboard-6 {
    left: 1100px;
    bottom: 38%;
    width: 60px;
    height: 40px;
}

.billboard-7 {
    left: 1300px;
    bottom: 45%;
    width: 75px;
    height: 48px;
}

.billboard-8 {
    left: 1500px;
    bottom: 40%;
    width: 65px;
    height: 42px;
}

/* Third segment: 1600-2400px (repeat pattern continues) */
.billboard-9 {
    left: 1700px;
    bottom: 42%;
    width: 70px;
    height: 45px;
}

.billboard-10 {
    left: 1900px;
    bottom: 38%;
    width: 60px;
    height: 40px;
}

.billboard-11 {
    left: 2100px;
    bottom: 45%;
    width: 75px;
    height: 48px;
}

.billboard-12 {
    left: 2300px;
    bottom: 40%;
    width: 65px;
    height: 42px;
}

/* Fourth segment: 2400-3200px (ensures full coverage) */
.billboard-13 {
    left: 2500px;
    bottom: 42%;
    width: 70px;
    height: 45px;
}

.billboard-14 {
    left: 2700px;
    bottom: 38%;
    width: 60px;
    height: 40px;
}

.billboard-15 {
    left: 2900px;
    bottom: 45%;
    width: 75px;
    height: 48px;
}

.billboard-16 {
    left: 3100px;
    bottom: 40%;
    width: 65px;
    height: 42px;
}

/* Billboard glow animation */
@keyframes billboardGlow {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Billboard scroll - matches buildings scroll for seamless loop */
@keyframes billboardsScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-800px); }
}

/* Responsive billboards - scale down for smaller screens */
@media (max-width: 768px) {
    .billboard {
        width: 50px;
        height: 32px;
    }

    /* 768px: 160px spacing for seamless loop */
    .billboard-1 { left: 80px; width: 50px; height: 32px; }
    .billboard-2 { left: 240px; width: 45px; height: 30px; }
    .billboard-3 { left: 400px; width: 55px; height: 35px; }
    .billboard-4 { left: 560px; width: 48px; height: 30px; }
    .billboard-5 { left: 720px; width: 50px; height: 32px; }
    .billboard-6 { left: 880px; width: 45px; height: 30px; }
    .billboard-7 { left: 1040px; width: 55px; height: 35px; }
    .billboard-8 { left: 1200px; width: 48px; height: 30px; }
    .billboard-9 { left: 1360px; width: 50px; height: 32px; }
    .billboard-10 { left: 1520px; width: 45px; height: 30px; }
    .billboard-11 { left: 1680px; width: 55px; height: 35px; }
    .billboard-12 { left: 1840px; width: 48px; height: 30px; }
    .billboard-13 { left: 2000px; width: 50px; height: 32px; }
    .billboard-14 { left: 2160px; width: 45px; height: 30px; }
    .billboard-15 { left: 2320px; width: 55px; height: 35px; }
    .billboard-16 { left: 2480px; width: 48px; height: 30px; }

    .billboard-frame {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
    }

    .billboard::after {
        width: 4px;
        height: 18px;
        bottom: -18px;
    }

    .billboard-img {
        padding: 3px;
    }

    .billboard-glow {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
    }
}

@media (max-width: 480px) {
    .billboard {
        width: 40px;
        height: 26px;
    }

    /* 480px: 150px spacing for seamless loop */
    .billboard-1 { left: 75px; width: 40px; height: 26px; }
    .billboard-2 { left: 225px; width: 35px; height: 24px; }
    .billboard-3 { left: 375px; width: 42px; height: 28px; }
    .billboard-4 { left: 525px; width: 38px; height: 25px; }
    .billboard-5 { left: 675px; width: 40px; height: 27px; }
    .billboard-6 { left: 825px; width: 36px; height: 24px; }
    .billboard-7 { left: 975px; width: 39px; height: 26px; }
    .billboard-8 { left: 1125px; width: 40px; height: 26px; }
    .billboard-9 { left: 1275px; width: 40px; height: 26px; }
    .billboard-10 { left: 1425px; width: 35px; height: 24px; }
    .billboard-11 { left: 1575px; width: 42px; height: 28px; }
    .billboard-12 { left: 1725px; width: 38px; height: 25px; }
    .billboard-13 { left: 1875px; width: 40px; height: 27px; }
    .billboard-14 { left: 2025px; width: 36px; height: 24px; }
    .billboard-15 { left: 2175px; width: 39px; height: 26px; }
    .billboard-16 { left: 2325px; width: 40px; height: 26px; }

    .billboard-frame {
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
    }

    .billboard::after {
        width: 3px;
        height: 14px;
        bottom: -14px;
    }

    .billboard-img {
        padding: 2px;
    }

    .billboard-glow {
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
    }
}

/* Extra small screens - 300px and up */
@media (max-width: 360px) {
    .billboard {
        width: 32px;
        height: 20px;
    }

    /* 360px: 120px spacing for seamless loop */
    .billboard-1 { left: 60px; width: 32px; height: 20px; bottom: 40%; }
    .billboard-2 { left: 180px; width: 28px; height: 18px; bottom: 36%; }
    .billboard-3 { left: 300px; width: 34px; height: 22px; bottom: 42%; }
    .billboard-4 { left: 420px; width: 30px; height: 19px; bottom: 38%; }
    .billboard-5 { left: 540px; width: 32px; height: 21px; bottom: 41%; }
    .billboard-6 { left: 660px; width: 29px; height: 18px; bottom: 36%; }
    .billboard-7 { left: 780px; width: 31px; height: 20px; bottom: 42%; }
    .billboard-8 { left: 900px; width: 32px; height: 20px; bottom: 37%; }
    .billboard-9 { left: 1020px; width: 32px; height: 20px; bottom: 40%; }
    .billboard-10 { left: 1140px; width: 28px; height: 18px; bottom: 36%; }
    .billboard-11 { left: 1260px; width: 34px; height: 22px; bottom: 42%; }
    .billboard-12 { left: 1380px; width: 30px; height: 19px; bottom: 38%; }
    .billboard-13 { left: 1500px; width: 32px; height: 21px; bottom: 41%; }
    .billboard-14 { left: 1620px; width: 29px; height: 18px; bottom: 36%; }
    .billboard-15 { left: 1740px; width: 31px; height: 20px; bottom: 42%; }
    .billboard-16 { left: 1860px; width: 32px; height: 20px; bottom: 37%; }

    .billboard-frame {
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 2px;
    }

    .billboard::after {
        width: 2px;
        height: 10px;
        bottom: -10px;
    }

    .billboard-img {
        padding: 1px;
    }

    .billboard-glow {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        opacity: 0.7;
    }
}
.nav-container {
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    position: relative;
    z-index: 10;
}

.nav-logo-wrapper {
    align-self: stretch;
    padding: 10px 0;
    box-sizing: border-box;
    flex-shrink: 1;
    min-width: 0;
    max-width: 80px;
}

.nav-logo {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

.nav-brand {
    display: flex;
    align-items: center;
}

.nav-brand a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.nav-brand a:hover {
    color: #FF0000;
    text-shadow: 0 0 10px rgba(139, 10, 26, 0.5);
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 8px 16px;
    border-radius: 8px;
}

.nav-link:hover {
    color: #FF0000;
    background: rgba(139, 10, 26, 0.1);
    transform: translateY(-1px);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, #FF0000, #FF2222);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 1px;
}

.nav-link:hover::after {
    width: 80%;
}

.nav-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.search-btn, .cart-btn {
    background: rgba(40, 25, 30, 0.95);
    border: 1px solid rgba(139, 10, 26, 0.3);
    border-radius: 12px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    color: #ffffff;
    position: relative;
}

.search-btn:hover, .cart-btn:hover {
    background: rgba(139, 10, 26, 0.2);
    border-color: rgba(139, 10, 26, 0.6);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 25px rgba(139, 10, 26, 0.4);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(45deg, #ff4757, #ff3742);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid rgba(26, 26, 46, 0.9);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
}

.cart-count.visible {
    display: flex;
}

/* Removed pulse animation for better performance */

/* Scroll Animation */
.navbar.scrolled {
    background: #000000;
    border-bottom: 1px solid rgba(139, 10, 26, 0.4);
}

/* Promo Banner inside navbar */
.nav-promo-banner {
    background: linear-gradient(135deg, rgba(139, 10, 26, 0.15) 0%, rgba(128, 0, 32, 0.1) 100%);
    border-top: 1px solid rgba(139, 10, 26, 0.2);
    padding: 8px 20px;
    position: relative;
    z-index: 10;
}

.promo-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.promo-image {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.promo-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.promo-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(45deg, #ff4757, #ff3742);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 5px;
    border-radius: 3px;
}

.promo-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
}

.promo-subtitle {
    color: #e8e8e8;
    font-size: 0.85rem;
}

.promo-btn {
    background: linear-gradient(45deg, #FF0000, #FF2222);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    white-space: nowrap;
    min-height: 36px;
}

.promo-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 10, 26, 0.4);
}

/* Responsive Navigation */
@media (max-width: 1024px) {
    .nav-container {
        height: 90px;
    }
}

@media (max-width: 768px) {
    .nav-container {
        height: 80px;
    }

    .nav-links {
        display: none;
    }

    .nav-logo-wrapper {
        padding: 8px 0;
    }
}

@media (max-width: 480px) {
    .nav-container {
        height: 80px;
        padding: 0 15px;
    }

    .nav-logo-wrapper {
        padding: 6px 0;
    }

    .search-btn, .cart-btn {
        width: 38px;
        height: 38px;
    }

    .nav-promo-banner {
        padding: 6px 10px;
    }

    .promo-content {
        gap: 8px;
    }

    .promo-image {
        width: 30px;
        height: 30px;
    }

    .promo-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .promo-title {
        font-size: 0.85rem;
    }

    .promo-subtitle {
        font-size: 0.75rem;
        display: none;
    }

    .promo-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
        min-height: 32px;
    }
}

/* ===== REDUCED MOTION - Accessibility & Performance ===== */
@media (prefers-reduced-motion: reduce) {
    .city-buildings,
    .city-moon::before,
    .city-stars::before,
    .city-stars::after,
    .city-windows::before,
    .city-aircraft::before,
    .city-aircraft::after,
    .city-cars::before,
    .city-cars::after,
    .city-billboards,
    .billboard-glow {
        animation: none !important;
    }
}