@font-face {
	font-family: 'icomoon';
	src: url('../fonts/meteocons/icomoon.eot?26rom9');
	src: url('../fonts/meteocons/icomoon.eot?26rom9#iefix') format('embedded-opentype'), url('../fonts/meteocons/icomoon.ttf?26rom9') format('truetype'), url('../fonts/meteocons/icomoon.woff?26rom9') format('woff'), url('../fonts/meteocons/icomoon.svg?26rom9#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon--radioactive:before {
	content: "\e905";
}

.icon--sun:before {
	content: "\e900";
}

.icon--drizzle:before {
	content: "\e902";
}

.icon--rainy:before {
	content: "\e903";
}

.icon--storm:before {
	content: "\e906";
}

.slideshow {
	position: relative;
	height: 100vh;
	width: 100vw;
	background: url(../img/city.jpg) no-repeat center top;
	background-size: cover;
	overflow: hidden;
}

.slideshow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 35vh 0 0 0;
	pointer-events: none;
	line-height: 1;
	font-family: "Roboto", sans-serif;
}

.slide--current {
	pointer-events: auto;
}

.slideshow__nav {
	text-align: center;
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	position: absolute;
	bottom: 18vh;
}

.nav-item {
	display: block;
	padding: 1em;
	color: rgba(255, 255, 255, 0.72);
	text-shadow: 0 2px 10px rgba(4, 9, 13, 0.72);
	-webkit-transition: color 0.3s, text-shadow 0.3s;
	transition: color 0.3s, text-shadow 0.3s;
}

.nav-item:hover,
.nav-item:focus {
	color: #fff;
}

.nav-item--current {
	color: #f4c96b;
	text-shadow: 0 2px 10px rgba(4, 9, 13, 0.78), 0 0 18px rgba(244, 201, 107, 0.32);
}

.nav-item .icon {
	font-size: 2em;
}

.nav-item span {
	display: block;
	margin: 0.25em 0 0 0;
	font-weight: 700;
}


/* Content */

.slide__element {
	opacity: 0;
	color: #fff;
	text-shadow: 0 2px 12px rgba(4, 9, 13, 0.78), 0 0 2px rgba(0, 0, 0, 0.72);
	-webkit-transform: translate3d(0, 50px, 0);
	transform: translate3d(0, 50px, 0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.slide--current .slide__element {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.slide__element--temp {
	font-size: 8em;
	font-weight: 700;
	margin: 0 0 0.1em;
}

.slide__element--temp small {
	font-size: 0.25em;
}

.slide__element--info {
	font-size: 2em;
}

.slide__element--date {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 1em;
}

.slide__element--condition {
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-top: -0.4em;
}

@media screen and (max-height: 39em) {
	.slideshow {
		font-size: 75%;
	}
	.slide {
		padding-top: 35vh;
	}
	.slideshow__nav {
		bottom: 1.5em;
	}
}


/* Gray Rain local background selector */
.background-switcher {
	position: absolute;
	left: 1.5rem;
	top: 50%;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transform: translateY(-50%);
	padding: 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(17, 25, 30, 0.46);
	box-shadow: 0 12px 36px rgba(7, 12, 16, 0.18);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.background-switcher__label {
	padding: 0.1rem 0.45rem 0.35rem;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.background-option {
	min-width: 5.2rem;
	padding: 0.62rem 0.72rem;
	border: 1px solid transparent;
	background: rgba(8, 14, 18, 0.42);
	color: rgba(255, 255, 255, 0.72);
	font: 700 0.78rem/1.1 "Roboto", sans-serif;
	letter-spacing: 0.08em;
	text-align: left;
	cursor: pointer;
	transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.background-option span {
	display: inline-block;
	width: 1.65rem;
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.62rem;
}

.background-option:hover,
.background-option:focus-visible {
	border-color: rgba(255, 255, 255, 0.52);
	color: #fff;
	outline: none;
	transform: translateX(2px);
}

.background-option--current {
	border-color: rgba(244, 201, 107, 0.88);
	background: rgba(244, 201, 107, 0.14);
	color: #f4c96b;
}

.background-option--current span {
	color: rgba(244, 201, 107, 0.72);
}

@media screen and (max-width: 680px) {
	.background-switcher {
		left: 50%;
		top: 1rem;
		flex-direction: row;
		transform: translateX(-50%);
		padding: 0.45rem;
	}
	.background-switcher__label { display: none; }
	.background-option { min-width: auto; padding: 0.55rem 0.62rem; }
	.background-option span { width: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
	.background-option { transition: none; }
}

/* China city forecast selector */
.city-picker-trigger {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	z-index: 30;
	min-width: 8.8rem;
	padding: 0.72rem 2.35rem 0.7rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(13, 22, 29, 0.48);
	box-shadow: 0 12px 36px rgba(7, 12, 16, 0.2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	font-family: "Roboto", sans-serif;
	text-align: left;
	cursor: pointer;
}

.city-picker-trigger::after {
	content: "⌄";
	position: absolute;
	right: 0.85rem;
	top: 50%;
	font-size: 1.1rem;
	transform: translateY(-56%);
}

.city-picker-trigger:hover,
.city-picker-trigger:focus-visible {
	border-color: #fff;
	background: rgba(13, 22, 29, 0.62);
	outline: none;
}

.city-picker-trigger__eyebrow,
.city-picker-trigger__status {
	display: block;
	color: rgba(255, 255, 255, 0.58);
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.city-picker-trigger strong {
	display: block;
	margin: 0.16rem 0;
	font-size: 1rem;
	letter-spacing: 0.08em;
}

.city-picker-trigger__status {
	max-width: 9.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	letter-spacing: 0.06em;
}

.weather-icon-image {
	display: block;
	width: 2em;
	height: 2em;
	margin: 0 auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.72;
}

.nav-item:hover .weather-icon-image,
.nav-item:focus .weather-icon-image {
	filter: brightness(0) invert(1);
	opacity: 1;
}

.nav-item--current .weather-icon-image {
	filter: brightness(0) saturate(100%) invert(85%) sepia(44%) saturate(746%) hue-rotate(349deg) brightness(100%) contrast(93%);
	opacity: 1;
}

.city-picker[hidden] { display: none !important; }

.city-picker {
	position: absolute;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	font-family: "Roboto", sans-serif;
}

.city-picker__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(4, 9, 13, 0.58);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: default;
}

.city-picker__panel {
	position: relative;
	z-index: 1;
	width: min(42rem, 94vw);
	max-height: min(40rem, 86vh);
	display: flex;
	flex-direction: column;
	padding: 1.35rem;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background: rgba(15, 24, 31, 0.92);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
	color: #eef7f8;
}

.city-picker__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.city-picker__header span {
	color: #8bd3c7;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.city-picker__header h2 {
	margin: 0.25rem 0 0;
	font-size: 1.45rem;
}

.city-picker__close {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
	font-size: 1.45rem;
	line-height: 1;
	cursor: pointer;
}

.city-picker__search {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.8rem;
	margin-top: 1.15rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.2);
}

.city-picker__search span {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13em;
}

.city-picker__search input {
	min-width: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font: 500 0.92rem/1.4 "Roboto", sans-serif;
	outline: none;
}

.city-picker__search input::placeholder { color: rgba(255, 255, 255, 0.38); }

.city-picker__hint {
	margin: 0.72rem 0;
	color: rgba(255, 255, 255, 0.56);
	font-size: 0.7rem;
}

.city-picker__results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.45rem;
	overflow-y: auto;
	padding-right: 0.25rem;
}

.city-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.55rem;
	min-height: 3rem;
	padding: 0.62rem 0.72rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.045);
	color: rgba(255, 255, 255, 0.82);
	font: 700 0.82rem/1.1 "Roboto", sans-serif;
	text-align: left;
	cursor: pointer;
}

.city-result small {
	color: rgba(255, 255, 255, 0.38);
	font-size: 0.56rem;
	font-weight: 500;
	text-transform: uppercase;
}

.city-result:hover,
.city-result:focus-visible,
.city-result[aria-selected="true"] {
	border-color: #8bd3c7;
	background: rgba(139, 211, 199, 0.13);
	color: #fff;
	outline: none;
}

.city-picker__empty {
	grid-column: 1 / -1;
	padding: 2rem 1rem;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.58);
	text-align: center;
}

.city-picker__source {
	margin: 0.85rem 0 0;
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.62rem;
	text-align: right;
}

.city-picker__source a { color: #8bd3c7; }

@media screen and (max-width: 680px) {
	.city-picker-trigger { top: 4.6rem; right: 0.75rem; min-width: 7.6rem; }
	.city-picker__panel { padding: 1rem; }
	.city-picker__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slide__element--condition { font-size: 0.74em; }
}

@media (prefers-reduced-motion: reduce) {
	.city-picker-trigger,
	.city-result,
	.ui-visibility-toggle { transition: none; }
}

/* Hover-only UI visibility control */
.ui-visibility-control {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 40;
	width: min(22rem, 70vw);
	min-height: 5.8rem;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 1rem;
	transform: translateX(-50%);
}
.ui-visibility-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.82rem 1.25rem;
	border: 1px solid rgba(255,255,255,0.4);
	background: rgba(11,20,27,0.72);
	box-shadow: 0 12px 30px rgba(4,10,14,0.22);
	color: #fff;
	font: 700 0.72rem/1 "Roboto", sans-serif;
	letter-spacing: 0.15em;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-0.45rem);
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}
.ui-visibility-control:hover .ui-visibility-toggle,
.ui-visibility-toggle:focus-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.ui-visibility-toggle:hover,
.ui-visibility-toggle:focus-visible { background: rgba(20,34,42,0.92); outline: none; }
.ui-visibility-toggle__signal { width: 0.5rem; height: 0.5rem; background: #f4c96b; box-shadow: 0 0 0 0.25rem rgba(244,201,107,0.12); }
body[data-ui-hidden="true"] .city-picker-trigger,
body[data-ui-hidden="true"] .weather-telemetry,
body[data-ui-hidden="true"] .background-switcher,
body[data-ui-hidden="true"] .weather-sync {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
body[data-ui-hidden="true"] .ui-visibility-toggle__signal { background: #8bd3c7; }
@media screen and (max-width: 680px) {
	.ui-visibility-control { top: 0; width: min(18rem, 82vw); min-height: 5rem; padding-top: 0.65rem; }
	.ui-visibility-toggle { padding: 0.72rem 1rem; font-size: 0.66rem; }
}

/* Live weather signal panel */
.weather-telemetry {
	position: absolute;
	top: 6.6rem;
	right: 1.5rem;
	z-index: 24;
	width: min(16.5rem, calc(100vw - 3rem));
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(11, 20, 27, 0.52);
	box-shadow: 0 14px 38px rgba(4, 10, 14, 0.2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	font-family: "Roboto", sans-serif;
}
.weather-telemetry header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.weather-telemetry header span { color: #8bd3c7; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.18em; }
.weather-telemetry header strong { color: rgba(255,255,255,0.55); font-size: 0.52rem; letter-spacing: 0.11em; }
.weather-telemetry__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin-top: 0.65rem; }
.weather-telemetry__metrics div { min-width: 0; padding-top: 0.48rem; border-top: 1px solid rgba(255,255,255,0.16); }
.weather-telemetry__metrics small, .weather-telemetry__metrics b { display: block; }
.weather-telemetry__metrics small { color: rgba(255,255,255,0.5); font-size: 0.52rem; letter-spacing: 0.06em; }
.weather-telemetry__metrics b { margin-top: 0.18rem; font-size: 0.72rem; white-space: nowrap; }
.weather-telemetry__nowcast { margin: 0.62rem 0 0; color: rgba(255,255,255,0.75); font-size: 0.62rem; line-height: 1.4; }
.weather-telemetry__alert { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.55rem; margin-top: 0.62rem; padding-top: 0.62rem; border-top: 1px solid rgba(255,255,255,0.18); }
.weather-telemetry__alert[hidden] { display: none; }
.weather-telemetry__alert span { padding: 0.22rem 0.34rem; border: 1px solid currentColor; color: #f4c96b; font-size: 0.48rem; font-weight: 700; letter-spacing: 0.1em; }
.weather-telemetry__alert strong { font-size: 0.62rem; line-height: 1.35; }
.weather-telemetry__alert[data-alert-color="red"] span { color: #ff7b72; }
.weather-telemetry__alert[data-alert-color="orange"] span { color: #ffab70; }
.weather-telemetry__alert[data-alert-color="blue"] span { color: #76b7ff; }
@media screen and (max-width: 680px) {
	.weather-telemetry { top: 9.8rem; right: 0.75rem; width: 12.4rem; padding: 0.65rem; }
	.weather-telemetry__metrics { gap: 0.3rem; }
	.weather-telemetry__metrics b { font-size: 0.64rem; }
}

/* Gray Rain owned loading state: upstream demo placeholders never flash. */
.weather-sync {
	position: absolute;
	left: 50%;
	top: 52%;
	z-index: 18;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: "Roboto", sans-serif;
	text-align: center;
	text-shadow: 0 2px 12px rgba(4, 9, 13, 0.78);
	transition: opacity 180ms ease, visibility 180ms ease;
}
.weather-sync__signal {
	width: 0.55rem;
	height: 0.55rem;
	margin-bottom: 0.35rem;
	background: #f4c96b;
	box-shadow: 0 0 0 0 rgba(244, 201, 107, 0.45);
	animation: weather-sync-pulse 1.4s ease-out infinite;
}
.weather-sync strong { font-size: 1rem; letter-spacing: 0.18em; }
.weather-sync small { color: rgba(255, 255, 255, 0.72); font-size: 0.68rem; letter-spacing: 0.1em; }
body:not([data-weather-fetch="ready"]) .slide,
body:not([data-weather-fetch="ready"]) .slideshow__nav {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
body[data-weather-fetch="ready"] .weather-sync {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
body[data-weather-fetch="ready"] .slideshow__nav { opacity: 1; visibility: visible; }
@keyframes weather-sync-pulse {
	70% { box-shadow: 0 0 0 0.75rem rgba(244, 201, 107, 0); }
	100% { box-shadow: 0 0 0 0 rgba(244, 201, 107, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.weather-sync__signal { animation: none; }
}


/* Weather atmosphere modes: fog, wind and snow */
.weather-atmosphere {
	--fog-opacity: 0.48;
	--wind-duration: 5.5s;
	--wind-drift-y: 0px;
	--snow-opacity: 0.72;
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 480ms ease;
}

body[data-weather-mode="fog"] .weather-atmosphere,
body[data-weather-mode="wind"] .weather-atmosphere,
body[data-weather-mode="snow"] .weather-atmosphere { opacity: 1; }

.slide { z-index: 10; }
.slideshow__nav { z-index: 12; }

.weather-fog {
	position: absolute;
	left: -24%;
	width: 148%;
	height: 54%;
	opacity: 0;
	filter: blur(26px);
	will-change: transform, opacity;
}
.weather-fog--far {
	top: 3%;
	background: radial-gradient(ellipse at 25% 50%, rgba(225,235,238,.68), transparent 52%), radial-gradient(ellipse at 75% 40%, rgba(205,220,225,.58), transparent 56%);
}
.weather-fog--middle {
	top: 28%;
	background: radial-gradient(ellipse at 20% 50%, rgba(235,241,242,.78), transparent 50%), radial-gradient(ellipse at 68% 55%, rgba(215,226,229,.68), transparent 58%);
}
.weather-fog--near {
	top: 58%;
	background: linear-gradient(90deg, rgba(230,238,239,.3), rgba(245,248,248,.76) 45%, rgba(208,220,224,.38));
	filter: blur(34px);
}
body[data-weather-mode="fog"] .weather-fog--far {
	opacity: calc(var(--fog-opacity) * .68);
	animation: fog-drift-far 24s ease-in-out infinite alternate;
}
body[data-weather-mode="fog"] .weather-fog--middle {
	opacity: calc(var(--fog-opacity) * .9);
	animation: fog-drift-middle 18s ease-in-out -6s infinite alternate;
}
body[data-weather-mode="fog"] .weather-fog--near {
	opacity: var(--fog-opacity);
	animation: fog-drift-near 13s ease-in-out -3s infinite alternate;
}

.weather-wind-field {
	position: absolute;
	inset: -12%;
	opacity: 0;
	background: repeating-linear-gradient(168deg, transparent 0 42px, rgba(225,239,240,.13) 44px 46px, transparent 48px 78px);
	filter: blur(1px);
	transform: translateX(-8%);
}
body[data-weather-mode="wind"] .weather-wind-field {
	opacity: .72;
	animation: wind-field var(--wind-duration) linear infinite;
}

.weather-particles { position: absolute; inset: 0; }
.weather-particles i { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.weather-particles--snow i {
	left: var(--x);
	top: -9vh;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: rgba(248,252,255,.94);
	box-shadow: 0 0 calc(var(--size) * 1.5) rgba(225,240,255,.42);
}
body[data-weather-mode="snow"] .weather-particles--snow i {
	opacity: var(--snow-opacity);
	animation: snow-fall var(--duration) linear var(--delay) infinite;
}
.weather-particles--wind i {
	left: -10vw;
	top: var(--y);
	width: var(--size);
	height: calc(var(--size) * .48);
	border-radius: 78% 16% 72% 24%;
	background: linear-gradient(135deg, rgba(161,135,75,.88), rgba(82,94,64,.72));
	box-shadow: 0 0 8px rgba(35,45,38,.2);
	transform: rotate(var(--rotation));
}
body[data-weather-mode="wind"] .weather-particles--wind i {
	opacity: .78;
	animation: wind-debris var(--duration) linear var(--delay) infinite;
}

@keyframes fog-drift-far { from { transform: translate3d(-4%, -1%, 0) scale(1.04); } to { transform: translate3d(8%, 3%, 0) scale(1.12); } }
@keyframes fog-drift-middle { from { transform: translate3d(7%, 1%, 0) scale(1.08); } to { transform: translate3d(-8%, -2%, 0) scale(1.16); } }
@keyframes fog-drift-near { from { transform: translate3d(-10%, 2%, 0) scale(1.14); } to { transform: translate3d(9%, -2%, 0) scale(1.22); } }
@keyframes wind-field { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(12%, var(--wind-drift-y), 0); } }
@keyframes wind-debris {
	0% { transform: translate3d(0, 0, 0) rotate(var(--rotation)); opacity: 0; }
	8% { opacity: .78; }
	78% { opacity: .62; }
	100% { transform: translate3d(124vw, var(--wind-drift-y), 0) rotate(calc(var(--rotation) + 620deg)); opacity: 0; }
}
@keyframes snow-fall {
	0% { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; }
	8% { opacity: var(--snow-opacity); }
	48% { transform: translate3d(var(--sway), 52vh, 0) rotate(150deg); }
	100% { transform: translate3d(var(--sway-end), 116vh, 0) rotate(330deg); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
	.weather-fog,
	.weather-wind-field,
	.weather-particles i { animation: none !important; }
	body[data-weather-mode="fog"] .weather-fog { transform: none; }
	body[data-weather-mode="wind"] .weather-particles--wind i:nth-child(-n+6),
	body[data-weather-mode="snow"] .weather-particles--snow i:nth-child(-n+18) { opacity: .45; }
}


/* Procedural weather atmosphere canvas v2 */
.weather-atmosphere-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 520ms ease, filter 520ms ease;
	will-change: opacity, filter;
}
body[data-weather-mode="fog"] .weather-atmosphere-canvas,
body[data-weather-mode="wind"] .weather-atmosphere-canvas,
body[data-weather-mode="snow"] .weather-atmosphere-canvas { opacity: 1; }
body[data-weather-mode="fog"] .weather-atmosphere-canvas {
	filter: blur(13px) saturate(.88);
	mix-blend-mode: screen;
}
body[data-weather-mode="wind"] .weather-atmosphere-canvas {
	filter: blur(.6px);
	mix-blend-mode: screen;
}
body[data-weather-mode="snow"] .weather-atmosphere-canvas {
	filter: none;
	mix-blend-mode: screen;
}
body[data-weather-atmosphere="canvas-ready"] .weather-fog,
body[data-weather-atmosphere="canvas-ready"] .weather-wind-field,
body[data-weather-atmosphere="canvas-ready"] .weather-particles { display: none; }

/* Subtle glass pressure movement and fog condensation */
body[data-weather-mode="wind"] #container {
	transform-origin: 50% 52%;
	animation: wind-glass-pressure 7.2s cubic-bezier(.42,0,.2,1) infinite;
}
@keyframes wind-glass-pressure {
	0%, 100% { transform: scale(1.016) translate3d(0, 0, 0); }
	31% { transform: scale(1.019) translate3d(-2px, .5px, 0); }
	36% { transform: scale(1.021) translate3d(3px, -1px, 0); }
	42% { transform: scale(1.018) translate3d(-1px, .4px, 0); }
	71% { transform: scale(1.02) translate3d(2px, -.5px, 0); }
}
@media (prefers-reduced-motion: reduce) {
	body[data-weather-mode="wind"] #container { animation: none; transform: scale(1.016); }
}