.morelia-sky {
	--morelia-sky-height: 220px;
	--morelia-sky-cloud-opacity: 0.35;
	--morelia-sky-rain-opacity: 0;
	background: #7fb7d9;
	border-radius: 8px;
	color: #fff;
	isolation: isolate;
	min-height: var(--morelia-sky-height);
	overflow: hidden;
	position: relative;
}

.morelia-sky--inside-smile {
	margin: 0.25rem 0 0.75rem;
}

.morelia-sky__canvas,
.morelia-sky__gradient,
.morelia-sky__stars,
.morelia-sky__glow,
.morelia-sky__clouds,
.morelia-sky__rain,
.morelia-sky__lightning {
	inset: 0;
	position: absolute;
}

.morelia-sky__canvas {
	z-index: 0;
}

.morelia-sky__gradient {
	background: linear-gradient(180deg, #6fb7ea 0%, #b9e3f5 58%, #f8d59a 100%);
}

.morelia-sky--neutral .morelia-sky__gradient {
	background: linear-gradient(180deg, #7f9db5 0%, #bdcad0 58%, #ece9dc 100%);
}

.morelia-sky--clear_day .morelia-sky__gradient {
	background: linear-gradient(180deg, #62aee9 0%, #a9dcf4 62%, #e8f6ff 100%);
}

.morelia-sky--partly_cloudy_day .morelia-sky__gradient {
	background: linear-gradient(180deg, #74afe0 0%, #bddced 68%, #f3f1df 100%);
}

.morelia-sky--cloudy_day .morelia-sky__gradient,
.morelia-sky--overcast_bright .morelia-sky__gradient {
	background: linear-gradient(180deg, #9eb0bc 0%, #c9d3d8 58%, #eef0ea 100%);
}

.morelia-sky--rainy_day .morelia-sky__gradient {
	background: linear-gradient(180deg, #6f8798 0%, #9eaeb5 55%, #d6d7cf 100%);
}

.morelia-sky--storm_day .morelia-sky__gradient {
	background: linear-gradient(180deg, #3d4b5a 0%, #6c7885 62%, #a8a99f 100%);
}

.morelia-sky--dawn .morelia-sky__gradient {
	background: linear-gradient(180deg, #435b8f 0%, #d89598 58%, #f7d9a2 100%);
}

.morelia-sky--golden_hour .morelia-sky__gradient {
	background: linear-gradient(180deg, #6ea5d7 0%, #e6a96e 62%, #f7d29a 100%);
}

.morelia-sky--sunset .morelia-sky__gradient {
	background: linear-gradient(180deg, #344778 0%, #cc6f6b 54%, #f0a45e 100%);
}

.morelia-sky--blue_hour .morelia-sky__gradient {
	background: linear-gradient(180deg, #172c54 0%, #3d6894 62%, #8da1b4 100%);
}

.morelia-sky--clear_night .morelia-sky__gradient {
	background: linear-gradient(180deg, #081326 0%, #132b4a 58%, #243a56 100%);
}

.morelia-sky--cloudy_night .morelia-sky__gradient,
.morelia-sky--rainy_night .morelia-sky__gradient {
	background: linear-gradient(180deg, #111827 0%, #263445 56%, #46515c 100%);
}

.morelia-sky--storm_night .morelia-sky__gradient {
	background: linear-gradient(180deg, #060914 0%, #1d2433 55%, #3d4654 100%);
}

.morelia-sky--mist .morelia-sky__gradient {
	background: linear-gradient(180deg, #99aeba 0%, #c8d2d3 58%, #eeeee4 100%);
}

.morelia-sky__clouds {
	background:
		radial-gradient(ellipse at 18% 42%, rgba(255, 255, 255, 0.72) 0 12%, transparent 27%),
		radial-gradient(ellipse at 38% 34%, rgba(255, 255, 255, 0.58) 0 10%, transparent 25%),
		radial-gradient(ellipse at 68% 46%, rgba(255, 255, 255, 0.55) 0 13%, transparent 30%),
		radial-gradient(ellipse at 84% 32%, rgba(255, 255, 255, 0.45) 0 8%, transparent 24%);
	opacity: var(--morelia-sky-cloud-opacity);
	transform: translate3d(var(--morelia-sky-drift, 0), 0, 0);
}

.morelia-sky__rain {
	background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.0) 0 36%, rgba(255, 255, 255, 0.42) 37% 39%, rgba(255, 255, 255, 0.0) 40% 100%);
	background-size: 14px 28px;
	opacity: var(--morelia-sky-rain-opacity);
}

.morelia-sky__stars {
	background:
		radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
		radial-gradient(circle at 28% 38%, rgba(255, 255, 255, 0.65) 0 1px, transparent 2px),
		radial-gradient(circle at 49% 18%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
		radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px),
		radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px);
	opacity: 0.72;
}

.morelia-sky__glow {
	background: radial-gradient(circle at 72% 70%, rgba(255, 196, 111, 0.62), transparent 34%);
	mix-blend-mode: screen;
}

.morelia-sky__lightning {
	background: rgba(255, 255, 255, 0.0);
}

.morelia-sky__content {
	bottom: 1rem;
	left: 1rem;
	max-width: min(34rem, calc(100% - 2rem));
	position: absolute;
	right: 1rem;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.34);
	z-index: 2;
}

.morelia-sky__label {
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 0;
}

.morelia-sky__meta {
	font-size: 0.86rem;
	line-height: 1.35;
	margin: 0.25rem 0 0;
	opacity: 0.9;
}

.morelia-sky--intensity-subtle .morelia-sky__clouds,
.morelia-sky--intensity-subtle .morelia-sky__rain,
.morelia-sky--intensity-subtle .morelia-sky__stars {
	opacity: calc(var(--morelia-sky-cloud-opacity) * 0.72);
}

.morelia-sky--intensity-cinematic .morelia-sky__content {
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.48);
}

.morelia-sky--animated .morelia-sky__clouds {
	animation: morelia-sky-clouds 34s linear infinite alternate;
}

.morelia-sky--animated .morelia-sky__rain {
	animation: morelia-sky-rain 0.85s linear infinite;
}

.morelia-sky--animated .morelia-sky__stars {
	animation: morelia-sky-stars 4.2s ease-in-out infinite alternate;
}

.morelia-sky--animated .morelia-sky__lightning.is-lit {
	background: rgba(255, 255, 255, 0.22);
}

@keyframes morelia-sky-clouds {
	from {
		transform: translate3d(-1.5%, 0, 0);
	}

	to {
		transform: translate3d(2.5%, 0, 0);
	}
}

@keyframes morelia-sky-rain {
	from {
		background-position: 0 0;
	}

	to {
		background-position: -18px 36px;
	}
}

@keyframes morelia-sky-stars {
	from {
		opacity: 0.48;
	}

	to {
		opacity: 0.82;
	}
}

@media (prefers-reduced-motion: reduce) {
	.morelia-sky--animated .morelia-sky__clouds,
	.morelia-sky--animated .morelia-sky__rain,
	.morelia-sky--animated .morelia-sky__stars {
		animation: none;
	}
}