/* Dynamic sky scenes behind the hero weather panel */

.weather-backdrop {
    position: fixed;
    inset: 0 0 auto 0;
    height: clamp(520px, 68vh, 820px);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Keep bright sky photos off the header — visible mainly around the hero card */
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        transparent 22%,
        rgba(0, 0, 0, 0.35) 32%,
        black 42%,
        black 78%,
        transparent 100%
    );
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        transparent 22%,
        rgba(0, 0, 0, 0.35) 32%,
        black 42%,
        black 78%,
        transparent 100%
    );
}

.weather-chrome-scrim {
    position: fixed;
    inset: 0 0 auto 0;
    height: min(560px, 72vh);
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(5, 10, 22, 0.97) 0%,
        rgba(5, 10, 22, 0.9) 28%,
        rgba(5, 10, 22, 0.55) 52%,
        transparent 100%
    );
}

body:not(.has-weather-scene) .weather-chrome-scrim {
    display: none;
}

.weather-backdrop__sky,
.weather-backdrop__clouds,
.weather-backdrop__vignette {
    position: absolute;
    inset: 0;
}

.weather-backdrop__sky {
    transition: background 1.2s ease, filter 1.2s ease;
}

.weather-backdrop__clouds {
    opacity: 0;
    transition: opacity 1s ease;
}

.weather-backdrop__vignette {
    background:
        linear-gradient(180deg, rgba(5, 10, 20, 0.55) 0%, transparent 22%),
        linear-gradient(0deg, var(--bg-deep) 0%, transparent 48%);
}

body.has-weather-scene .grid-overlay {
    opacity: 0.15;
}

body.has-weather-scene .glow-overlay {
    background: radial-gradient(ellipse at center, transparent 15%, rgba(0, 0, 0, 0.45) 100%);
}

/* Readable chrome panels over the sky */

body.has-weather-scene .app-banner {
    background: linear-gradient(135deg, rgba(4, 10, 24, 0.96), rgba(6, 16, 36, 0.94));
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.has-weather-scene .app-banner-desc {
    color: rgba(220, 232, 248, 0.88);
}

body.has-weather-scene .top-bar {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(5, 12, 28, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}

body.has-weather-scene .logo-section h1 {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

body.has-weather-scene .logo-section p,
body.has-weather-scene .time-display .date,
body.has-weather-scene .time-display .day {
    color: rgba(210, 225, 245, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

body.has-weather-scene .time-display .time {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

body.has-weather-scene .update-banner {
    background: rgba(4, 10, 24, 0.98);
    border-bottom-color: rgba(0, 212, 255, 0.45);
    color: #f4f8ff;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

body.has-weather-scene .app-intro {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(5, 12, 28, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(220, 232, 248, 0.92);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);
    max-width: none;
}

body.has-weather-scene .saved-locations-wrap {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(5, 12, 28, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

body.has-weather-scene .saved-empty {
    color: rgba(200, 215, 235, 0.9);
}

/* —— Day scenes —— */

.weather-backdrop[data-scene$="-day"] .weather-backdrop__sky {
    background:
        radial-gradient(ellipse 90% 55% at 72% 8%, rgba(255, 245, 200, 0.95) 0%, transparent 48%),
        radial-gradient(ellipse 120% 80% at 50% 100%, #7ec8e8 0%, transparent 55%),
        linear-gradient(180deg, #2f7fd4 0%, #5eb4e8 38%, #8fd4f5 72%, #b8e6ff 100%);
}

.weather-backdrop[data-scene="sunny-day"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(30, 100, 180, 0.15) 0%, rgba(100, 180, 230, 0.05) 100%),
        url("https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center top;
}

.weather-backdrop[data-scene="partly-cloudy-day"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(40, 110, 190, 0.12) 0%, rgba(120, 190, 235, 0.08) 100%),
        url("https://images.unsplash.com/photo-1592210454359-9043f067919b?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center 30%;
}

.weather-backdrop[data-scene="partly-cloudy-day"] .weather-backdrop__clouds {
    opacity: 1;
    background:
        radial-gradient(ellipse 42% 22% at 18% 28%, rgba(255, 255, 255, 0.92) 0%, transparent 70%),
        radial-gradient(ellipse 36% 18% at 42% 22%, rgba(255, 255, 255, 0.88) 0%, transparent 68%),
        radial-gradient(ellipse 48% 24% at 68% 34%, rgba(255, 255, 255, 0.9) 0%, transparent 72%),
        radial-gradient(ellipse 55% 28% at 88% 26%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
        radial-gradient(ellipse 38% 20% at 30% 48%, rgba(255, 255, 255, 0.75) 0%, transparent 68%),
        radial-gradient(ellipse 44% 22% at 58% 52%, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    animation: cloud-drift-slow 48s ease-in-out infinite alternate;
}

.weather-backdrop[data-scene="cloudy-day"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(60, 80, 100, 0.25) 0%, rgba(120, 140, 160, 0.15) 100%),
        url("https://images.unsplash.com/photo-1534088568595-a066f410bdf9?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center;
}

.weather-backdrop[data-scene="cloudy-day"] .weather-backdrop__clouds {
    opacity: 0.65;
    background:
        radial-gradient(ellipse 80% 40% at 30% 35%, rgba(235, 240, 248, 0.7) 0%, transparent 70%),
        radial-gradient(ellipse 70% 35% at 70% 40%, rgba(220, 228, 240, 0.65) 0%, transparent 68%);
}

.weather-backdrop[data-scene="fog-day"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(100, 110, 120, 0.35) 0%, rgba(180, 190, 200, 0.2) 100%),
        url("https://images.unsplash.com/photo-1485231127955-bc40aa8b789f?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center;
    filter: none;
}

.weather-backdrop[data-scene="fog-day"] .weather-backdrop__clouds {
    opacity: 0.85;
    background:
        radial-gradient(ellipse 100% 50% at 50% 60%, rgba(255, 255, 255, 0.55) 0%, transparent 70%),
        radial-gradient(ellipse 80% 40% at 20% 40%, rgba(255, 255, 255, 0.4) 0%, transparent 65%);
}

.weather-backdrop[data-scene="drizzle-day"] .weather-backdrop__sky,
.weather-backdrop[data-scene="rain-day"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(30, 45, 65, 0.45) 0%, rgba(70, 90, 110, 0.25) 100%),
        url("https://images.unsplash.com/photo-1428908728789-d2de25dbd4e2?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center;
}

.weather-backdrop[data-scene="heavy-rain-day"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(20, 30, 45, 0.55) 0%, rgba(50, 65, 80, 0.35) 100%),
        url("https://images.unsplash.com/photo-1519692933481-162789ed7ec5?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center;
}

.weather-backdrop[data-scene="thunder-day"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(15, 20, 35, 0.5) 0%, rgba(40, 50, 70, 0.35) 100%),
        url("https://images.unsplash.com/photo-1605727216801-e27ce1d0cc28?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center;
}

.weather-backdrop[data-scene="snow-day"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(140, 160, 180, 0.2) 0%, rgba(200, 215, 230, 0.1) 100%),
        url("https://images.unsplash.com/photo-1491002052546-bf38f186af56?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center;
}

.weather-backdrop[data-scene^="drizzle-"],
.weather-backdrop[data-scene^="rain-"],
.weather-backdrop[data-scene^="heavy-rain-"] {
    --rain-opacity: 0.35;
}

.weather-backdrop[data-scene^="heavy-rain-"],
.weather-backdrop[data-scene="thunder-day"] {
    --rain-opacity: 0.55;
}

.weather-backdrop[data-scene^="drizzle-"] .weather-backdrop__clouds,
.weather-backdrop[data-scene^="rain-"] .weather-backdrop__clouds,
.weather-backdrop[data-scene^="heavy-rain-"] .weather-backdrop__clouds,
.weather-backdrop[data-scene="thunder-day"] .weather-backdrop__clouds {
    opacity: var(--rain-opacity);
    background:
        repeating-linear-gradient(
            105deg,
            transparent 0 14px,
            rgba(200, 220, 255, 0.12) 14px 15px
        ),
        radial-gradient(ellipse 90% 45% at 40% 30%, rgba(180, 195, 215, 0.5) 0%, transparent 70%);
    animation: rain-fall 0.8s linear infinite;
}

/* —— Night scenes —— */

.weather-backdrop[data-scene$="-night"] .weather-backdrop__sky {
    background-image:
        linear-gradient(180deg, rgba(5, 10, 25, 0.75) 0%, rgba(10, 20, 45, 0.55) 50%, rgba(15, 30, 55, 0.4) 100%),
        url("https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center top;
}

.weather-backdrop[data-scene="sunny-night"] .weather-backdrop__sky,
.weather-backdrop[data-scene="partly-cloudy-night"] .weather-backdrop__sky {
    background:
        radial-gradient(ellipse 35% 25% at 80% 15%, rgba(240, 235, 210, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse 1.5px 1.5px at 15% 20%, #fff 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 35% 30%, rgba(255, 255, 255, 0.85) 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 72% 25%, rgba(255, 255, 255, 0.75) 0%, transparent 100%),
        linear-gradient(180deg, #030810 0%, #0a1428 50%, #122040 100%);
}

.weather-backdrop[data-scene="partly-cloudy-night"] .weather-backdrop__clouds,
.weather-backdrop[data-scene="cloudy-night"] .weather-backdrop__clouds {
    opacity: 0.45;
    background:
        radial-gradient(ellipse 50% 25% at 35% 35%, rgba(40, 50, 70, 0.85) 0%, transparent 70%),
        radial-gradient(ellipse 45% 22% at 70% 30%, rgba(35, 45, 65, 0.8) 0%, transparent 68%);
}

.weather-backdrop[data-scene="cloudy-night"] .weather-backdrop__sky {
    background: linear-gradient(180deg, #080c14 0%, #141c2c 55%, #1e2838 100%);
}

.weather-backdrop[data-scene="fog-night"] .weather-backdrop__sky {
    background: linear-gradient(180deg, #1a2030 0%, #2a3448 60%, #3a4458 100%);
}

.weather-backdrop[data-scene="fog-night"] .weather-backdrop__clouds {
    opacity: 0.6;
    background: radial-gradient(ellipse 100% 50% at 50% 55%, rgba(80, 90, 110, 0.5) 0%, transparent 70%);
}

.weather-backdrop[data-scene="drizzle-night"] .weather-backdrop__sky,
.weather-backdrop[data-scene="rain-night"] .weather-backdrop__sky,
.weather-backdrop[data-scene="heavy-rain-night"] .weather-backdrop__sky {
    background: linear-gradient(180deg, #060a12 0%, #101820 55%, #1a2430 100%);
}

.weather-backdrop[data-scene="thunder-night"] .weather-backdrop__sky {
    background:
        radial-gradient(ellipse 35% 20% at 60% 30%, rgba(100, 80, 180, 0.4) 0%, transparent 55%),
        linear-gradient(180deg, #040608 0%, #0c1018 60%, #141c28 100%);
}

.weather-backdrop[data-scene="snow-night"] .weather-backdrop__sky {
    background: linear-gradient(180deg, #0c1420 0%, #1a2838 55%, #283848 100%);
}

/* Hero card on top of the sky */

.weather-card-hero {
    background: rgba(5, 12, 28, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 48px rgba(0, 0, 0, 0.38);
}

body.has-weather-scene .weather-card-hero .card-title {
    color: rgba(255, 255, 255, 0.75);
}

body.has-weather-scene .weather-card-hero .location,
body.has-weather-scene .weather-card-hero .temp-main,
body.has-weather-scene .weather-card-hero .condition {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

body.has-weather-scene .weather-card-hero .location i {
    color: rgba(255, 255, 255, 0.85);
}

body.has-weather-scene .weather-card-hero .condition {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
}

body.has-weather-scene .weather-card-hero .detail-item {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 8px 14px;
}

body.has-weather-scene .weather-card-hero .current-details {
    gap: 8px;
}

body.has-weather-scene .weather-card-hero .detail-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
}

body.has-weather-scene .weather-card-hero .detail-value {
    color: #fff;
    font-weight: 600;
}

body.has-weather-scene .weather-card-hero .detail-item i {
    color: rgba(255, 255, 255, 0.8);
}

body.has-weather-scene .weather-card-hero .sun-block {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.12);
}

body.has-weather-scene .weather-card-hero .live-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.has-weather-scene .weather-card-hero .unit-toggle {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

@keyframes cloud-drift-slow {
    from { transform: translateX(-2%) scale(1); }
    to { transform: translateX(3%) scale(1.02); }
}

@keyframes rain-fall {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 24px, 0 0; }
}

@media (max-width: 768px) {
    .weather-backdrop {
        height: clamp(380px, 52vh, 580px);
        -webkit-mask-image: linear-gradient(
            180deg,
            transparent 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.35) 40%,
            black 52%,
            black 82%,
            transparent 100%
        );
        mask-image: linear-gradient(
            180deg,
            transparent 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.35) 40%,
            black 52%,
            black 82%,
            transparent 100%
        );
    }

    .weather-chrome-scrim {
        height: min(440px, 60vh);
    }

    /* Match original edge-to-edge mobile header (don't card-wrap the top bar) */
    body.has-weather-scene .top-bar {
        margin: 0;
        padding: max(10px, env(safe-area-inset-top)) 12px 12px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }

    body.has-weather-scene .saved-locations-wrap {
        margin: 0;
        padding: 0 12px 10px;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
    }

    body.has-weather-scene .app-banner {
        margin: 10px 12px 0;
    }

    body.has-weather-scene .weather-card-hero .condition {
        font-size: 17px;
        margin-bottom: 14px;
    }

    body.has-weather-scene .weather-card-hero .detail-item {
        border-radius: 10px;
        padding: 10px 8px;
    }
}