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

:root { --bg:#07111f; --surface:rgba(8,25,42,.82); --line:rgba(182,220,247,.16); --text:#f7fbff; --muted:#a9bed0; --accent:#4dd5ff; --accent-2:#8b7cff; --accent-rgb:77,213,255; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--text); font-family:Inter,system-ui,sans-serif; background:linear-gradient(rgba(3,11,24,.46),rgba(3,11,24,.62)),url("assets/weather-atmosphere.png") center/cover fixed,#07111f; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.025) 50%,transparent 58%); pointer-events:none; }
.app-shell,footer { position:relative; z-index:1; }
.weather-scene { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.sun-orb { position:absolute; top:7%; right:10%; width:84px; height:84px; border-radius:50%; background:#ffe38b; box-shadow:0 0 36px 15px rgba(255,213,96,.5),0 0 100px 32px rgba(255,185,74,.2); animation:sun-pulse 3.8s ease-in-out infinite; }
.sun-glow { position:absolute; top:4%; right:7%; width:145px; height:145px; border:1px solid rgba(255,229,147,.34); border-radius:50%; animation:sun-spin 20s linear infinite; }
.rain-drop { position:absolute; top:-12%; left:calc((var(--i) * 3.4%) + 1%); width:2px; height:62px; border-radius:99px; background:linear-gradient(transparent,rgba(134,205,255,.85)); opacity:.68; transform:rotate(12deg); animation:rain-fall calc(1.05s + (var(--i) % 4) * .18s) linear infinite; animation-delay:calc(var(--i) * -.14s); }
.lightning { position:absolute; top:4%; right:16%; width:3px; height:120px; background:#e9f7ff; box-shadow:0 0 28px 9px #8fd4ff; clip-path:polygon(44% 0,100% 0,57% 40%,92% 40%,0 100%,31% 53%,0 53%); opacity:0; animation:lightning-flash 5s step-end infinite; }
.snowflake { position:absolute; top:-10%; left:calc((var(--i) * 4%) + 1%); color:#f4fbff; font-size:calc(11px + (var(--i) % 4) * 4px); opacity:.8; text-shadow:0 0 10px #c9efff; animation:snow-fall calc(5s + (var(--i) % 5) * .8s) linear infinite; animation-delay:calc(var(--i) * -.32s); }
.fog-band { position:absolute; left:-20%; width:140%; height:105px; border-radius:50%; background:linear-gradient(90deg,transparent,rgba(197,221,239,.13),transparent); filter:blur(14px); animation:fog-drift 14s ease-in-out infinite alternate; }.fog-band--one { top:18%; }.fog-band--two { top:52%; animation-delay:-6s; }.fog-band--three { top:76%; animation-delay:-10s; }
.spring-leaf { position:absolute; top:-8%; left:calc((var(--i) * 7.5%) + 1%); color:rgba(155,255,194,.62); font-size:calc(12px + (var(--i) % 3) * 4px); transform:rotate(45deg); animation:leaf-drift calc(8s + (var(--i) % 4) * 1.2s) linear infinite; animation-delay:calc(var(--i) * -.5s); }
body[data-weather="clear"] { --accent:#ffc44d; --accent-2:#ff7e9e; --accent-rgb:255,196,77; }
body[data-weather="rain"],body[data-weather="drizzle"],body[data-weather="thunderstorm"] { --accent:#6bacff; --accent-2:#a78bfa; --accent-rgb:107,172,255; }
body[data-weather="snow"] { --accent:#c7f2ff; --accent-2:#b9c7ff; --accent-rgb:199,242,255; }
.app-shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:42px 0 30px; }
.site-header { text-align:center; animation:rise .7s both; }
.site-header h1 { margin:6px 0; font-size:clamp(2rem,5vw,3.5rem); letter-spacing:-.065em; }
.site-header>p:last-child { margin:0; color:var(--muted); font-size:.95rem; }
.header-kicker,.overline { margin:0; color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.header-kicker { display:flex; justify-content:center; align-items:center; gap:8px; }
.header-kicker span,.live-indicator i { width:7px; height:7px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px var(--accent); }
.dashboard { display:flex; justify-content:center; margin:32px auto 20px; }
.weather-card,.map-card { background:var(--surface); border:1px solid var(--line); box-shadow:0 26px 70px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.07); backdrop-filter:blur(18px); }
.weather-card { width:min(660px,100%); padding:clamp(20px,4vw,34px); border-radius:25px; animation:rise .8s .12s both; }
.card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:23px; }
.card-heading h2,.map-card h2 { margin:4px 0 0; font-size:clamp(1.45rem,3vw,2rem); letter-spacing:-.045em; }
.live-indicator { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; color:#a9f2d4; font-size:.7rem; font-weight:700; background:rgba(65,211,151,.1); border:1px solid rgba(65,211,151,.22); border-radius:999px; }
.live-indicator i { background:#5be1a8; box-shadow:0 0 10px #5be1a8; }
.search { display:flex; gap:10px; }
input,button { min-height:48px; border-radius:13px; font:inherit; }
input { min-width:0; flex:1; padding:0 15px; color:var(--text); background:rgba(156,205,236,.09); border:1px solid var(--line); outline:none; transition:.2s; }
input::placeholder { color:#8fa6b9; } input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15); }
button { border:0; padding:0 19px; color:#061524; font-weight:800; cursor:pointer; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 9px 20px rgba(var(--accent-rgb),.24); transition:transform .2s,filter .2s,opacity .2s; }
button:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-2px); } button:focus-visible { outline:3px solid white; outline-offset:3px; } button:disabled { cursor:wait; opacity:.65; }
.secondary { width:100%; margin-top:10px; color:var(--text); background:rgba(156,205,236,.09); border:1px solid var(--line); box-shadow:none; }
.status { min-height:20px; margin:12px 0 0; color:var(--muted); font-size:.82rem; text-align:center; }
.weather-result,.forecast { max-height:0; margin-top:0; overflow:hidden; opacity:0; transition:max-height .55s ease,margin .35s ease,opacity .35s ease; }
.weather-result.is-visible { max-height:300px; margin-top:14px; opacity:1; } .forecast.is-visible { max-height:220px; margin-top:12px; opacity:1; }
.current-weather { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px; text-align:left; background:radial-gradient(circle at 95% 10%,rgba(var(--accent-rgb),.18),transparent 40%),rgba(133,187,223,.07); border:1px solid rgba(var(--accent-rgb),.18); border-radius:18px; }
.eyebrow { color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.current-weather h3 { margin:5px 0 0; font-size:1.25rem; text-transform:capitalize; }.temperature-block { display:flex; align-items:center; }.current-icon { width:62px; height:62px; }.temperature { margin:0; font-size:clamp(2.5rem,8vw,4rem); font-weight:700; letter-spacing:-.08em; }.temperature span { color:var(--muted); font-size:.38em; letter-spacing:0; vertical-align:top; }
.details { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:14px; }.details div { padding:8px 7px; color:var(--muted); font-size:.68rem; background:rgba(160,207,238,.06); border-radius:10px; }.details strong { display:block; margin-top:3px; color:var(--text); font-size:.82rem; }
.forecast { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }.day { padding:10px 5px; text-align:center; background:rgba(151,198,231,.07); border:1px solid rgba(175,217,244,.1); border-radius:13px; animation:rise .45s var(--delay) both; }.day p { margin:0; }.day img { width:42px; height:42px; }.day-name,.day-condition { color:var(--muted); font-size:.7rem; }.day-temp { font-weight:800; }
.map-card { margin-top:14px; overflow:hidden; border-radius:21px; animation:rise .8s .22s both; }.map-card__header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; }.map-card h2 { font-size:1.15rem; }.map-card__header>span { max-width:46%; overflow:hidden; color:var(--accent); font-size:.75rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; } #map { height:300px; background:#0b1c2c; }.leaflet-tile-pane { filter:saturate(.7) brightness(.72) contrast(1.16) hue-rotate(150deg); }.leaflet-bar { border:1px solid var(--line)!important; }.leaflet-control-zoom a { color:var(--text)!important; background:#0b1d2f!important; border-color:var(--line)!important; }.leaflet-popup-content-wrapper,.leaflet-popup-tip { color:var(--text); background:#0b1d2f; }
.error { margin:0; padding:13px; color:#ffd9d9; background:rgba(255,95,95,.12); border:1px solid rgba(255,158,158,.22); border-radius:12px; }.spinner { display:none; width:17px; height:17px; border:2px solid rgba(5,19,31,.3); border-top-color:#05131f; border-radius:50%; animation:spin .65s linear infinite; }.is-loading .button-label { display:none; }.is-loading .spinner { display:block; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }footer { padding:0 16px 24px; color:#89a1b4; font-size:.7rem; text-align:center; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes spin { to { transform:rotate(360deg); } }
@keyframes sun-pulse { 50% { transform:scale(1.11); filter:brightness(1.14); } } @keyframes sun-spin { to { transform:rotate(360deg); } }
@keyframes rain-fall { to { transform:translate3d(-65px,120vh,0) rotate(12deg); } } @keyframes snow-fall { to { transform:translate3d(55px,120vh,0) rotate(160deg); } }
@keyframes lightning-flash { 0%,91%,95%,100% { opacity:0; } 92%,94% { opacity:1; } } @keyframes fog-drift { from { transform:translateX(-8%); } to { transform:translateX(12%); } } @keyframes leaf-drift { to { transform:translate3d(85px,120vh,0) rotate(315deg); } }
@media (max-width:560px) { .app-shell { width:min(100% - 22px,1120px); padding-top:28px; }.search { flex-direction:column; }.weather-card { padding:20px 16px; }.current-weather { align-items:flex-start; }.current-icon { width:48px; height:48px; }.details { grid-template-columns:1fr; }.forecast { grid-template-columns:repeat(5,76px); overflow-x:auto; padding-bottom:3px; }.map-card__header { padding:15px; } #map { height:260px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }