/* ═══════════════════════════════════════════════════════════ Animated sky header band — CSS only, condition-driven data-sky on : day-clear | day-cloudy | day-rainy | day-storm | night-clear | night-cloudy | night-rainy | night-storm | snowy ═══════════════════════════════════════════════════════════ */ /* Hero shell: animation layers + title overlay stacked */ .sky-hero { position: relative; min-height: 168px; margin: 12px 22px 10px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); isolation: isolate; box-shadow: var(--shadow-sm); } .sky-visual { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .sky-gradient { position: absolute; inset: 0; transition: background 0.8s var(--ease); } .sky-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.7s var(--ease); } .sky-glow { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent); z-index: 5; } html[data-theme='light'] .sky-glow { background: linear-gradient(to top, rgba(30, 20, 10, 0.2), transparent); } /* —— Gradients per sky —— */ html[data-sky='day-clear'] .sky-gradient { background: linear-gradient(160deg, #1e4d8c 0%, #38bdf8 45%, #7dd3fc 100%); } html[data-theme='light'][data-sky='day-clear'] .sky-gradient { background: linear-gradient(160deg, #38bdf8 0%, #7dd3fc 40%, #fde68a 100%); } html[data-sky='day-cloudy'] .sky-gradient { background: linear-gradient(160deg, #334155 0%, #64748b 50%, #94a3b8 100%); } html[data-theme='light'][data-sky='day-cloudy'] .sky-gradient { background: linear-gradient(160deg, #94a3b8 0%, #cbd5e1 50%, #e2e8f0 100%); } html[data-sky='day-rainy'] .sky-gradient { background: linear-gradient(160deg, #1e3a5f 0%, #3b82f6 55%, #60a5fa 100%); } html[data-theme='light'][data-sky='day-rainy'] .sky-gradient { background: linear-gradient(160deg, #64748b 0%, #60a5fa 50%, #93c5fd 100%); } html[data-sky='day-storm'] .sky-gradient { background: linear-gradient(160deg, #1e1b4b 0%, #4c1d95 45%, #6d28d9 100%); } html[data-theme='light'][data-sky='day-storm'] .sky-gradient { background: linear-gradient(160deg, #4c1d95 0%, #7c3aed 50%, #a78bfa 100%); } html[data-sky='night-clear'] .sky-gradient { background: linear-gradient(160deg, #020617 0%, #1e1b4b 50%, #312e81 100%); } html[data-theme='light'][data-sky='night-clear'] .sky-gradient { background: linear-gradient(160deg, #1e1b4b 0%, #4338ca 55%, #818cf8 100%); } html[data-sky='night-cloudy'] .sky-gradient { background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #334155 100%); } html[data-theme='light'][data-sky='night-cloudy'] .sky-gradient { background: linear-gradient(160deg, #334155 0%, #475569 50%, #64748b 100%); } html[data-sky='night-rainy'] .sky-gradient { background: linear-gradient(160deg, #0c1929 0%, #0e3a5f 50%, #1d4ed8 100%); } html[data-theme='light'][data-sky='night-rainy'] .sky-gradient { background: linear-gradient(160deg, #1e3a5f 0%, #2563eb 55%, #60a5fa 100%); } html[data-sky='night-storm'] .sky-gradient { background: linear-gradient(160deg, #0a0614 0%, #2e1065 50%, #5b21b6 100%); } html[data-theme='light'][data-sky='night-storm'] .sky-gradient { background: linear-gradient(160deg, #2e1065 0%, #6d28d9 50%, #a855f7 100%); } html[data-sky='snowy'] .sky-gradient { background: linear-gradient(160deg, #1e293b 0%, #475569 40%, #e2e8f0 100%); } html[data-theme='light'][data-sky='snowy'] .sky-gradient { background: linear-gradient(160deg, #94a3b8 0%, #e2e8f0 45%, #f8fafc 100%); } /* —— Clouds (CSS pseudo layers) —— */ .sky-layer.clouds { background: radial-gradient(ellipse 80px 28px at 20% 55%, rgba(255, 255, 255, 0.35), transparent), radial-gradient(ellipse 100px 32px at 45% 40%, rgba(255, 255, 255, 0.28), transparent), radial-gradient(ellipse 90px 30px at 70% 60%, rgba(255, 255, 255, 0.32), transparent), radial-gradient(ellipse 70px 24px at 85% 45%, rgba(255, 255, 255, 0.22), transparent); animation: drift 40s linear infinite; } html[data-sky='day-cloudy'] .clouds, html[data-sky='day-rainy'] .clouds, html[data-sky='day-storm'] .clouds, html[data-sky='night-cloudy'] .clouds, html[data-sky='night-rainy'] .clouds, html[data-sky='night-storm'] .clouds, html[data-sky='snowy'] .clouds { opacity: 1; } html[data-sky='day-clear'] .clouds { opacity: 0.25; animation-duration: 60s; } html[data-sky='night-clear'] .clouds { opacity: 0.1; } html[data-sky='night-cloudy'] .clouds, html[data-sky='night-rainy'] .clouds, html[data-sky='night-storm'] .clouds { background: radial-gradient(ellipse 80px 28px at 20% 55%, rgba(148, 163, 184, 0.35), transparent), radial-gradient(ellipse 100px 32px at 45% 40%, rgba(100, 116, 139, 0.4), transparent), radial-gradient(ellipse 90px 30px at 70% 60%, rgba(148, 163, 184, 0.3), transparent); } @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-40px); } } /* —— Rain —— */ .sky-layer.rain { background-image: repeating-linear-gradient( -20deg, transparent, transparent 8px, rgba(186, 230, 253, 0.0) 8px, rgba(186, 230, 253, 0.35) 9px, transparent 10px, transparent 18px ); background-size: 24px 40px; animation: rain-fall 0.55s linear infinite; } html[data-sky='day-rainy'] .rain, html[data-sky='night-rainy'] .rain, html[data-sky='day-storm'] .rain, html[data-sky='night-storm'] .rain { opacity: 0.7; } html[data-sky='day-storm'] .rain, html[data-sky='night-storm'] .rain { opacity: 0.85; animation-duration: 0.4s; } @keyframes rain-fall { from { background-position: 0 0; } to { background-position: 12px 40px; } } /* —— Snow —— */ .sky-layer.snow { background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 30% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 50% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 40%, #fff, transparent), radial-gradient(2px 2px at 20% 90%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 10%, #fff, transparent), radial-gradient(2px 2px at 80% 55%, #fff, transparent); background-size: 120px 120px; animation: snow-fall 8s linear infinite; } html[data-sky='snowy'] .snow { opacity: 0.9; } @keyframes snow-fall { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 20px 120px, -15px 120px, 10px 120px, -25px 120px, 5px 120px, -10px 120px, 15px 120px, -5px 120px; } } /* —— Stars (night clear) —— */ .sky-layer.stars { background-image: radial-gradient(1.5px 1.5px at 15% 25%, #fff, transparent), radial-gradient(1px 1px at 35% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 35%, #fff, transparent), radial-gradient(1px 1px at 75% 20%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 45%, #fff, transparent), radial-gradient(1px 1px at 25% 55%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 65%, #fff, transparent), radial-gradient(1px 1px at 45% 75%, #fff, transparent); animation: twinkle 4s ease-in-out infinite alternate; } html[data-sky='night-clear'] .stars { opacity: 0.85; } html[data-sky='night-cloudy'] .stars { opacity: 0.2; } @keyframes twinkle { from { opacity: 0.55; } to { opacity: 0.95; } } /* —— Lightning (storm) —— */ .sky-layer.lightning { background: transparent; } html[data-sky='day-storm'] .lightning, html[data-sky='night-storm'] .lightning { opacity: 1; animation: flash 7s ease-in-out infinite; } @keyframes flash { 0%, 88%, 100% { background: transparent; } 90% { background: rgba(255, 255, 255, 0.35); } 91% { background: transparent; } 92.5% { background: rgba(233, 213, 255, 0.45); } 94% { background: transparent; } } /* Soft sun/moon orb hint on clear skies */ html[data-sky='day-clear'] .sky-gradient::after, html[data-sky='night-clear'] .sky-gradient::after { content: ''; position: absolute; width: 48px; height: 48px; border-radius: 50%; top: 28%; right: 14%; background: radial-gradient(circle at 35% 35%, #fff9c4, #fbbf24 50%, transparent 70%); box-shadow: 0 0 40px rgba(251, 191, 36, 0.45); opacity: 0.9; } html[data-sky='night-clear'] .sky-gradient::after { background: radial-gradient(circle at 35% 35%, #f8fafc, #e2e8f0 45%, transparent 70%); box-shadow: 0 0 28px rgba(226, 232, 240, 0.35); width: 36px; height: 36px; } @media (max-width: 860px) { .sky-hero { margin: 10px 14px 8px; min-height: 152px; } } @media (prefers-reduced-motion: reduce) { .sky-layer { animation: none !important; } }