/**
 * Stratus Weather Pro — extra skins + background overlay.
 */

/* Photo backgrounds: dark overlay keeps text readable. */

.stratus-weather.sw--has-bg {
	--sw-fg: #ffffff;
	--sw-fg-soft: rgba(255, 255, 255, 0.8);
	--sw-surface: rgba(0, 0, 0, 0.25);
}

.stratus-weather.sw--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 18, 32, 0.35) 0%, rgba(10, 18, 32, 0.55) 100%);
	pointer-events: none;
}

.stratus-weather.sw--has-bg > * {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Skin: aurora — slowly shifting animated gradient
 * ------------------------------------------------------------------ */

.stratus-weather.sw--skin-aurora {
	--sw-fg: #ffffff;
	--sw-fg-soft: rgba(255, 255, 255, 0.78);
	--sw-surface: rgba(255, 255, 255, 0.14);
	--sw-shadow: 0 12px 34px rgba(46, 16, 101, 0.35);
	background: linear-gradient(130deg, #4338ca, #7c3aed, #0ea5e9, #7c3aed, #4338ca);
	background-size: 400% 400%;
	animation: sw-aurora 18s ease-in-out infinite;
}

.stratus-weather.sw--skin-aurora.sw--night {
	background: linear-gradient(130deg, #1e1b4b, #4c1d95, #0c4a6e, #4c1d95, #1e1b4b);
	background-size: 400% 400%;
}

@keyframes sw-aurora {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* ------------------------------------------------------------------ *
 * Skin: slate — dark elegance with a subtle accent line
 * ------------------------------------------------------------------ */

.stratus-weather.sw--skin-slate {
	--sw-bg: #0f172a;
	--sw-fg: #e2e8f0;
	--sw-fg-soft: #94a3b8;
	--sw-surface: #1e293b;
	--sw-border: #1e293b;
	--sw-shadow: 0 10px 30px rgba(2, 6, 23, 0.5);
	background: var(--sw-bg);
}

.stratus-weather.sw--skin-slate::after {
	content: "";
	position: absolute;
	top: 0;
	left: 1.4rem;
	right: 1.4rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, #38bdf8, #818cf8);
}

@media (prefers-reduced-motion: reduce) {
	.stratus-weather.sw--skin-aurora {
		animation: none;
	}
}