/* =========================================================
   WHERE EMBERS REMAIN – GLUT / FUNKEN
   ========================================================= */

.storm-header-image {
	position: relative;
	overflow: hidden;
}

.embers-sparks {
	position: absolute;
	inset: 0;
	z-index: 5;

	overflow: hidden;
	pointer-events: none;
}


/* =========================================================
   GRUNDFUNKE
   ========================================================= */

.embers-sparks span {
	position: absolute;
	bottom: -8px;

	width: 2px;
	height: 2px;

	border-radius: 50%;

	background: #ff9a5c;

	box-shadow:
		0 0 3px rgba(255,154,92,.9),
		0 0 6px rgba(255,106,55,.65);

	opacity: 0;

	animation:
		ember-rise 5.5s linear infinite,
		ember-flicker .8s ease-in-out infinite;
}


/* =========================================================
   UNTERSCHIEDLICHE GRÖSSEN
   ========================================================= */

/* winzig */

.embers-sparks span:nth-child(3n) {
	width: 1px;
	height: 1px;
}


/* etwas heller */

.embers-sparks span:nth-child(4n) {
	width: 3px;
	height: 3px;

	box-shadow:
		0 0 3px #ffc078,
		0 0 7px rgba(255,120,55,.8);
}


/* schneller kleiner Glutstrich */

.embers-sparks span:nth-child(5n) {
	width: 1px;
	height: 4px;

	border-radius: 50%;

	animation-duration:
		3.8s,
		.55s;
}


/* =========================================================
   POSITION + GESCHWINDIGKEIT
   ========================================================= */

.embers-sparks span:nth-child(1) {
	left: 5%;
	animation-delay: 0s;
}

.embers-sparks span:nth-child(2) {
	left: 12%;
	animation-delay: 1.1s;
	animation-duration: 4.7s, .8s;
}

.embers-sparks span:nth-child(3) {
	left: 18%;
	animation-delay: 2.8s;
}

.embers-sparks span:nth-child(4) {
	left: 25%;
	animation-delay: .4s;
	animation-duration: 4.2s, .7s;
}

.embers-sparks span:nth-child(5) {
	left: 32%;
	animation-delay: 3.3s;
}

.embers-sparks span:nth-child(6) {
	left: 39%;
	animation-delay: 1.8s;
	animation-duration: 6s, .9s;
}

.embers-sparks span:nth-child(7) {
	left: 46%;
	animation-delay: .8s;
}

.embers-sparks span:nth-child(8) {
	left: 53%;
	animation-delay: 4.1s;
	animation-duration: 4.5s, .6s;
}

.embers-sparks span:nth-child(9) {
	left: 60%;
	animation-delay: 2.2s;
}

.embers-sparks span:nth-child(10) {
	left: 67%;
	animation-delay: .2s;
	animation-duration: 3.9s, .7s;
}

.embers-sparks span:nth-child(11) {
	left: 74%;
	animation-delay: 3.6s;
}

.embers-sparks span:nth-child(12) {
	left: 81%;
	animation-delay: 1.4s;
	animation-duration: 5.8s, .8s;
}

.embers-sparks span:nth-child(13) {
	left: 87%;
	animation-delay: 2.6s;
}

.embers-sparks span:nth-child(14) {
	left: 92%;
	animation-delay: .7s;
	animation-duration: 4.1s, .6s;
}

.embers-sparks span:nth-child(15) {
	left: 96%;
	animation-delay: 4.5s;
}


/* =========================================================
   AUFSTEIGEN
   ========================================================= */

@keyframes ember-rise {

	0% {
		transform: translate3d(0, 10px, 0) scale(.5);
		opacity: 0;
	}

	8% {
		opacity: .9;
	}

	25% {
		transform: translate3d(-6px, -65px, 0) scale(1);
		opacity: .9;
	}

	50% {
		transform: translate3d(8px, -135px, 0) scale(.8);
		opacity: .75;
	}

	75% {
		transform: translate3d(-4px, -205px, 0) scale(.55);
		opacity: .45;
	}

	100% {
		transform: translate3d(12px, -285px, 0) scale(.2);
		opacity: 0;
	}

}


/* =========================================================
   FLACKERN
   ========================================================= */

@keyframes ember-flicker {

	0%,
	100% {
		filter: brightness(.9);
	}

	30% {
		filter: brightness(1.5);
	}

	55% {
		filter: brightness(1.05);
	}

	75% {
		filter: brightness(1.7);
	}

}