@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

body {
    font-family: 'Inter', system_ui, sans-serif;
    min-height: 100vh;
    color: white;
    background-size: 400% 400%;
    animation: gradientMove 25s ease infinite;
    transition: background 2s ease;
}

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

.bg-normal { background: linear-gradient(135deg, #1e40af, #3b82f6, #0ea5e9, #22d3ee); }
.bg-hot { background: linear-gradient(135deg, #c2410c, #f59e0b, #eab308, #f97316); }
.bg-cold { background: linear-gradient(135deg, #1e3a8a, #2563eb, #60a5fa, #bae6fd); }
.bg-night { background: linear-gradient(135deg, #0f172a, #1e2937, #334155, #475569); }

.glass {
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
}
.glass-light { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); }

.nav-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item.active {
    background: rgba(255,255,255,0.2);
    border-radius: 9999px;
    color: white;
}

#w-icon {
    font-size: 7.5rem;
    animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

.bottom-nav {
    box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.3);
}

.hourly-card { scroll-snap-align: center; }

.moon-phase {
    font-size: 6rem;
    line-height: 1;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
}