/**
 * Hero embers + overlay — ported verbatim from
 * D:\FT Bliss\Website\fort_bliss_landing_page.html
 *
 * Add the CSS class `hero-embers` to a Bricks Section to activate.
 * Values below are copied 1:1 from the source; nothing is re-tuned.
 */

.hero-embers {
	position: relative;
	overflow: hidden;
}

/* source: .hero-overlay */
.hero-embers__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 80% 60% at 50% 80%, rgba(180, 80, 10, 0.4) 0%, transparent 70%),
		linear-gradient(180deg, rgba(5, 3, 2, 0.6) 0%, rgba(5, 3, 2, 0.9) 70%, rgba(5, 3, 2, 1) 100%);
}

/* source: the sibling `bg-black/40` overlay */
.hero-embers__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.4);
}

/* source: .embers-container */
.hero-embers__container {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

/* source: .ember */
.hero-embers__ember {
	position: absolute;
	width: 3px;
	height: 3px;
	background: #ff8c20;
	border-radius: 50%;
	box-shadow: 0 0 8px 2px rgba(255, 140, 30, 0.8);
	animation: emberRise linear infinite;
	opacity: 0;
}

/* source: @keyframes emberRise */
@keyframes emberRise {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	80% {
		opacity: 0.6;
	}
	100% {
		transform: translateY(-400px) translateX(40px);
		opacity: 0;
	}
}

/**
 * Source markup puts hero content at z-20, above the overlays at z-0 and the
 * embers at z-1. Bricks' own children need the same lift or the scrim covers them.
 */
.hero-embers > *:not(.hero-embers__overlay):not(.hero-embers__scrim):not(.hero-embers__container) {
	position: relative;
	z-index: 20;
}