/* ===== CITY PAGES - BLUE SKY WITH CLOUD ANIMATION BACKGROUND ===== */

.city-sky-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom,
        #87CEEB 0%,
        #B0E0E6 50%,
        #E0F6FF 100%);
    z-index: -2;
    overflow: hidden;
}

/* Cloud layer 1 - far background (slowest) */
.sky-clouds-layer-1 {
    position: absolute;
    top: 10%;
    left: 0;
    width: 200%;
    height: 30%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cdefs%3E%3ClinearGradient id='cloud-grad1' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.5'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M80 70 C100 50 130 50 150 70 C170 50 200 50 220 70 C240 50 270 50 290 70 C310 50 340 50 360 70 C380 50 410 50 430 70 C450 50 480 50 500 70 C520 50 550 50 570 70 C590 50 620 50 640 70 C660 50 690 50 710 70 C730 50 760 50 780 70 C800 50 830 50 850 70 C870 50 900 50 920 70 C940 50 970 50 990 70 C1010 50 1040 50 1060 70 C1080 50 1110 50 1130 70' fill='none' stroke='url(%23cloud-grad1)' stroke-width='35' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 900px 100%;
    animation: drift-clouds-1 120s ease-in-out infinite;
}

/* Cloud layer 2 - mid background (medium speed) */
.sky-clouds-layer-2 {
    position: absolute;
    top: 30%;
    left: 0;
    width: 200%;
    height: 28%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cdefs%3E%3ClinearGradient id='cloud-grad2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M60 60 C90 30 130 30 160 60 C190 30 230 30 260 60 C290 30 330 30 360 60 C390 30 430 30 460 60 C490 30 530 30 560 60 C590 30 630 30 660 60 C690 30 730 30 760 60 C790 30 830 30 860 60 C890 30 930 30 960 60 C990 30 1030 30 1060 60 C1090 30 1130 30 1160 60' fill='none' stroke='url(%23cloud-grad2)' stroke-width='40' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1100px 100%;
    animation: drift-clouds-2 90s ease-in-out infinite reverse;
}

/* Cloud layer 3 - foreground (fastest) */
.sky-clouds-layer-3 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 200%;
    height: 32%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cdefs%3E%3ClinearGradient id='cloud-grad3' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.75'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 80 C60 45 100 45 140 80 C180 45 220 45 260 80 C300 45 340 45 380 80 C420 45 460 45 500 80 C540 45 580 45 620 80 C660 45 700 45 740 80 C780 45 820 45 860 80 C900 45 940 45 980 80 C1020 45 1060 45 1100 80 C1140 45 1180 45 1220 80' fill='none' stroke='url(%23cloud-grad3)' stroke-width='45' stroke-linecap='round' opacity='0.65'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1300px 100%;
    animation: drift-clouds-3 70s ease-in-out infinite;
}

/* Sun glow effect (optional, subtle) */
.sky-sun-glow {
    position: absolute;
    top: -5%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 200, 100, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* Animations */
@keyframes drift-clouds-1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes drift-clouds-2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

@keyframes drift-clouds-3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Ensure main content is above sky */
main {
    position: relative;
    z-index: 1;
}

/* Content area with subtle city color overlay */
.city-page-content {
    position: relative;
    z-index: 1;
}

/* Subtle city color accent lines */
.city-accent-line {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--city-color, #2966df), transparent);
    opacity: 0.2;
    margin: 3rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sky-clouds-layer-1 {
        top: 5%;
        height: 35%;
        animation: drift-clouds-1 50s linear infinite;
    }

    .sky-clouds-layer-2 {
        top: 35%;
        height: 25%;
        animation: drift-clouds-2 40s linear infinite reverse;
    }

    .sky-clouds-layer-3 {
        top: 55%;
        height: 25%;
        animation: drift-clouds-3 30s linear infinite;
    }

    .sky-sun-glow {
        width: 300px;
        height: 300px;
        right: 5%;
        top: -10%;
    }
}

@media (max-width: 480px) {
    .sky-clouds-layer-1 {
        animation: drift-clouds-1 40s linear infinite;
    }

    .sky-clouds-layer-2 {
        animation: drift-clouds-2 35s linear infinite reverse;
    }

    .sky-clouds-layer-3 {
        animation: drift-clouds-3 25s linear infinite;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sky-clouds-layer-1,
    .sky-clouds-layer-2,
    .sky-clouds-layer-3 {
        animation: none !important;
    }
}