/**
 * Accent palettes. The landing tokens keep their historical --bn-red names;
 * each palette re-points them so every component follows the active accent.
 *
 * green  — approved Body Nova brand palette (from the original green logo)
 * blue   — electric blue option (iMessage blue, client reference photo)
 * olive  — Delta Protocol™ military accent (designer handoff)
 * red    — original RECOMP-X demo palette (defaults in main.css)
 */

.bn-landing--green {
	--bn-red: #14c41a;
	--bn-red-hot: #3dff45;
	--bn-red-rgb: 20, 196, 26;
	--bn-red-hot-rgb: 61, 255, 69;
	--bn-accent-ink: #031b04;
	--bn-flash-tint: 210, 255, 214;
	--bn-chrome-red: linear-gradient(180deg, #6dff72 0%, #3dff45 36%, #0f9a14 48.5%, #066a09 51%, #14c41a 62%, #52ff58 80%, #0a7a10 100%);
}

.bn-landing--blue {
	--bn-red: #0a84ff;
	--bn-red-hot: #45a3ff;
	--bn-red-rgb: 10, 132, 255;
	--bn-red-hot-rgb: 69, 163, 255;
	--bn-accent-ink: #00122b;
	--bn-flash-tint: 205, 228, 255;
	--bn-chrome-red: linear-gradient(180deg, #8cc6ff 0%, #45a3ff 36%, #0a5fd1 48.5%, #003c96 51%, #0a84ff 62%, #5fb0ff 80%, #0048b8 100%);
}

.bn-landing--olive {
	--bn-red: #8a9a3c;
	--bn-red-hot: #b5c95a;
	--bn-red-rgb: 138, 154, 60;
	--bn-red-hot-rgb: 181, 201, 90;
	--bn-accent-ink: #12160a;
	--bn-flash-tint: 236, 244, 205;
	--bn-chrome-red: linear-gradient(180deg, #dbe79a 0%, #b5c95a 36%, #66732a 48.5%, #3f4719 51%, #8a9a3c 62%, #c3d46d 80%, #4d5720 100%);
}

/* Hero "X" glint follows the accent. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.bn-landing--green .bn-hero__mask .bn-c--x,
	.bn-landing--blue .bn-hero__mask .bn-c--x,
	.bn-landing--olive .bn-hero__mask .bn-c--x {
		background-image: linear-gradient(100deg, transparent 38%, rgba(var(--bn-flash-tint), 0.9) 50%, transparent 62%), var(--bn-chrome-red);
	}
}

/* Reticle scan gradient is drawn in SVG; CSS beats its presentation attributes. */
.bn-reticle__core stop {
	stop-color: var(--bn-red);
}

.bn-reticle__scan rect + rect {
	fill: var(--bn-red-hot);
}

/* ---------- Box focus-flash (scroll effect) ----------
 * Boxes start slightly out of focus; as each one scrolls into view it snaps
 * sharp while a light sweep and an accent edge-glow flash across it.
 * Markup is injected by main.js (.bn-flash__fx); motion-reduced users see static boxes.
 */

@media (prefers-reduced-motion: no-preference) {
	.bn-flash-ready [data-bn-flash] {
		filter: blur(7px) brightness(0.55) saturate(0.6);
		transition: filter 0.9s var(--bn-ease);
	}

	.bn-flash-ready [data-bn-flash].is-flash {
		filter: none;
	}

	.bn-flash__fx {
		position: absolute;
		inset: 0;
		z-index: 3;
		overflow: hidden;
		pointer-events: none;
		opacity: 0;
		border-radius: inherit;
	}

	.bn-flash__fx::before {
		content: "";
		position: absolute;
		top: -20%;
		bottom: -20%;
		left: 0;
		width: 55%;
		background: linear-gradient(100deg, transparent 0%, rgba(var(--bn-flash-tint, 255, 255, 255), 0) 20%, rgba(var(--bn-flash-tint, 255, 255, 255), 0.34) 48%, rgba(var(--bn-red-hot-rgb), 0.28) 54%, transparent 80%);
		mix-blend-mode: screen;
		transform: translateX(-120%) skewX(-14deg);
	}

	.bn-flash__fx::after {
		content: "";
		position: absolute;
		inset: 0;
		box-shadow: inset 0 0 0 1px rgba(var(--bn-red-hot-rgb), 0.9), inset 0 0 42px rgba(var(--bn-red-rgb), 0.35);
	}

	.is-flash > .bn-flash__fx {
		animation: bn-flash-fade 1.5s var(--bn-ease) var(--bn-flash-delay, 0s) both;
	}

	.is-flash > .bn-flash__fx::before {
		animation: bn-flash-sweep 1.1s cubic-bezier(0.65, 0, 0.35, 1) var(--bn-flash-delay, 0s) both;
	}
}

@keyframes bn-flash-fade {
	0% {
		opacity: 0;
	}

	14% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes bn-flash-sweep {
	to {
		transform: translateX(260%) skewX(-14deg);
	}
}