/*!
 * BOLTNAX Electric Header — electric effect layers
 * Layer 1 = ticker translation (infinite-ticker.js, transform on .bnx-ticker__track only)
 * Layer 2 = text illumination (classes on .bnx-topbar / items — never touches transform)
 * Layer 3 = full-bar lightning (canvas engine, or the CSS fallback below)
 * @version 1.1.0
 */

.bnx-header {
	--bnx-css-fx: 1;
}

/* ------------------------------------------------------------------ *
 * Layer 3 container
 * ------------------------------------------------------------------ */
.bnx-fx {
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.bnx-fx__canvas {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.bnx-header.bnx-engine-canvas .bnx-fx__canvas {
	opacity: 1;
}

/* Static premium edge light — visible in every engine, including reduced motion. */
.bnx-fx__line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(var(--bnx-blue-rgb), 0) 0%,
		rgba(var(--bnx-blue-rgb), 0.55) 20%,
		rgba(var(--bnx-white-rgb), 0.65) 50%,
		rgba(var(--bnx-blue-rgb), 0.55) 80%,
		rgba(var(--bnx-blue-rgb), 0) 100%);
	opacity: 0.55;
}

.bnx-header.bnx-fx-bar-off .bnx-fx {
	display: none;
}

/* ------------------------------------------------------------------ *
 * CSS fallback lightning (no JS yet, JS failed, or canvas unsupported)
 * Compositor-only properties (transform / opacity).
 * ------------------------------------------------------------------ */
.bnx-fx__css {
	position: absolute;
	top: 0;
	bottom: 0;
	display: none;
	will-change: transform, opacity;
}

.bnx-header.bnx-fx-bar-on:not(.bnx-engine-canvas):not(.bnx-engine-reduced) .bnx-fx__css {
	display: block;
}

.bnx-fx__sweep {
	left: -30%;
	width: 30%;
	background: linear-gradient(90deg,
		rgba(var(--bnx-blue-rgb), 0) 0%,
		rgba(var(--bnx-blue-rgb), 0.16) 40%,
		rgba(var(--bnx-white-rgb), 0.32) 50%,
		rgba(var(--bnx-blue-rgb), 0.16) 60%,
		rgba(var(--bnx-blue-rgb), 0) 100%);
	animation: bnx-sweep calc(5.5s / var(--bnx-fx-speed)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.bnx-fx__flash {
	left: 0;
	right: 0;
	background:
		radial-gradient(60% 140% at 30% 50%, rgba(var(--bnx-blue-rgb), 0.35), rgba(var(--bnx-blue-rgb), 0) 70%),
		radial-gradient(30% 120% at 72% 40%, rgba(var(--bnx-white-rgb), 0.25), rgba(var(--bnx-white-rgb), 0) 70%),
		radial-gradient(12% 90% at 55% 60%, rgba(var(--bnx-yellow-rgb), 0.22), rgba(var(--bnx-yellow-rgb), 0) 70%);
	opacity: 0;
	animation: bnx-flash calc(7.3s / var(--bnx-fx-speed)) linear infinite;
}

@keyframes bnx-sweep {
	0% { transform: translate3d(0, 0, 0); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translate3d(433%, 0, 0); opacity: 0; }
}

/* Irregular flicker pattern: two clustered strikes and one single strike per cycle. */
@keyframes bnx-flash {
	0%, 11%, 13.5%, 15%, 17.5%, 52%, 54%, 79%, 81.5%, 83%, 100% { opacity: 0; }
	12% { opacity: calc(0.9 * var(--bnx-glow)); }
	16% { opacity: calc(0.6 * var(--bnx-glow)); }
	53% { opacity: calc(0.75 * var(--bnx-glow)); }
	80% { opacity: var(--bnx-glow); }
	82% { opacity: calc(0.45 * var(--bnx-glow)); }
}

/* ------------------------------------------------------------------ *
 * Layer 2 — text illumination
 * Driven by CSS variables written by the shared lightning clock:
 *   --bnx-flash (0..1) on .bnx-topbar, --bnx-spark (0..1) on one message.
 * Selectors only use classes present in the server HTML, so "remove unused CSS"
 * optimisers cannot strip them.
 * ------------------------------------------------------------------ */
.bnx-header.bnx-fx-text-on .bnx-ticker__text {
	text-shadow:
		0 0 1px rgba(var(--bnx-white-rgb), calc(var(--bnx-flash, 0) * 0.95)),
		0 0 calc(5px + 4px * var(--bnx-flash, 0)) rgba(var(--bnx-blue-rgb), calc(0.24 + var(--bnx-flash, 0) * var(--bnx-glow) * 0.76)),
		0 0 calc(2px + 12px * var(--bnx-flash, 0)) rgba(var(--bnx-blue-rgb), calc(var(--bnx-flash, 0) * var(--bnx-glow) * 0.45)),
		0 0 7px rgba(var(--bnx-yellow-rgb), calc(var(--bnx-spark, 0) * var(--bnx-glow) * 0.9));
}

.bnx-header.bnx-fx-text-on .bnx-ticker__bolt {
	filter: brightness(calc(1 + var(--bnx-flash, 0) * 0.7 + var(--bnx-spark, 0) * 0.5));
}

/* Text glow fallback before/without JS (CSS keyframes animate the same variable-free shadow). */
@keyframes bnx-text-pulse {
	0%, 10%, 14%, 100% { text-shadow: 0 0 6px rgba(var(--bnx-blue-rgb), 0.24); }
	11.5% { text-shadow: 0 0 1px rgba(var(--bnx-white-rgb), 0.9), 0 0 8px rgba(var(--bnx-blue-rgb), var(--bnx-glow)); }
}

.bnx-header.bnx-fx-text-on:not(.bnx-js) .bnx-ticker__text {
	animation: bnx-text-pulse calc(7.3s / var(--bnx-fx-speed)) linear infinite;
}

/* CSS fallback bolts (shown until/unless the canvas engine runs; JS hides them inline). */
.bnx-fx__bolts {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.bnx-header.bnx-fx-bar-off .bnx-fx__bolts {
	display: none;
}

.bnx-fxb {
	fill: none;
	stroke: var(--bnx-white);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	filter: drop-shadow(0 0 2px rgba(var(--bnx-blue-rgb), 0.95)) drop-shadow(0 0 5px rgba(var(--bnx-blue-rgb), 0.6));
}

.bnx-fxb--1 { animation: bnx-fxb calc(4.7s / var(--bnx-fx-speed)) linear 0.6s infinite; }
.bnx-fxb--2 { animation: bnx-fxb calc(6.1s / var(--bnx-fx-speed)) linear 2.2s infinite; }
.bnx-fxb--3 { animation: bnx-fxb-y calc(7.9s / var(--bnx-fx-speed)) linear 3.9s infinite; }

@keyframes bnx-fxb {
	0%, 3.9%, 7.5%, 100% { opacity: 0; }
	1% { opacity: var(--bnx-glow); }
	2.5% { opacity: 0.25; }
	4.5% { opacity: calc(var(--bnx-glow) * 0.9); }
}

@keyframes bnx-fxb-y {
	0%, 3.9%, 7.5%, 100% { opacity: 0; stroke: var(--bnx-white); }
	1% { opacity: var(--bnx-glow); stroke: var(--bnx-yellow); }
	2.5% { opacity: 0.3; }
	4.5% { opacity: calc(var(--bnx-glow) * 0.85); stroke: var(--bnx-white); }
}

/* ------------------------------------------------------------------ *
 * Logo lightning
 * ------------------------------------------------------------------ */
.bnx-logo__arc {
	position: absolute;
	top: -8px;
	left: -9px;
	width: calc(100% + 18px);
	height: calc(100% + 16px);
	overflow: visible;
	pointer-events: none;
}

.bnx-arc {
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 24 200;
	stroke-dashoffset: 24;
	opacity: 0;
}

.bnx-arc--a { stroke: var(--bnx-blue); }
.bnx-arc--b { stroke: var(--bnx-white); stroke-width: 1.2; }

.bnx-logo__bolt {
	position: absolute;
	top: -7px;
	right: -13px;
	width: 11px;
	height: 15px;
	fill: var(--bnx-yellow);
	opacity: 0.92;
	transform-origin: 50% 60%;
}

.bnx-header.bnx-fx-logo-off .bnx-logo__arc,
.bnx-header.bnx-fx-logo-off .bnx-logo__charge {
	display: none;
}

/* Official logo: energy overlay traced exactly on the logo's own bolt. */
.bnx-logo__charge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.bnx-charge {
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.bnx-charge--glow {
	fill: none;
	stroke: var(--bnx-blue);
	stroke-width: 3;
	opacity: 0;
	filter: drop-shadow(0 0 4px rgba(var(--bnx-blue-rgb), 0.9));
}

.bnx-charge--core {
	fill: var(--bnx-white);
	stroke: none;
	opacity: 0;
	mix-blend-mode: normal;
}

/* Idle energy: a soft periodic shimmer on the logo bolt (compositor-only). */
@keyframes bnx-charge-idle {
	0%, 82%, 100% { opacity: 0; }
	88% { opacity: 0.32; }
	91% { opacity: 0.08; }
	94% { opacity: 0.24; }
}

.bnx-header.bnx-fx-logo-on .bnx-charge--core {
	animation: bnx-charge-idle 4.2s ease-in-out infinite;
}

@keyframes bnx-arc-run {
	0% { stroke-dashoffset: 24; opacity: 0; }
	8% { opacity: 1; }
	80% { opacity: 1; }
	100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes bnx-logo-glow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(var(--bnx-blue-rgb), 0)); }
	18% { filter: drop-shadow(0 0 5px rgba(var(--bnx-blue-rgb), 0.75)); }
	30% { filter: drop-shadow(0 0 2px rgba(var(--bnx-white-rgb), 0.6)); }
	45% { filter: drop-shadow(0 0 4px rgba(var(--bnx-blue-rgb), 0.55)); }
}

@keyframes bnx-bolt-zap {
	0%, 100% { transform: scale(1); fill: var(--bnx-yellow); }
	15% { transform: scale(1.18); fill: var(--bnx-white); }
	35% { transform: scale(1.05); fill: var(--bnx-yellow); }
}

@keyframes bnx-bolt-idle {
	0%, 100% { opacity: 0.92; }
	50% { opacity: 0.7; }
}

.bnx-header.bnx-fx-logo-on .bnx-logo__bolt {
	animation: bnx-bolt-idle 3.2s ease-in-out infinite;
}

.bnx-header.bnx-fx-logo-on .bnx-logo.is-zap .bnx-arc--a {
	animation: bnx-arc-run calc(0.75s / var(--bnx-fx-speed)) cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.bnx-header.bnx-fx-logo-on .bnx-logo.is-zap .bnx-arc--b {
	animation: bnx-arc-run calc(0.75s / var(--bnx-fx-speed)) cubic-bezier(0.2, 0.7, 0.3, 1) 0.08s both;
}

.bnx-header.bnx-fx-logo-on .bnx-logo.is-zap .bnx-logo__img,
.bnx-header.bnx-fx-logo-on .bnx-logo.is-zap .bnx-logo__text {
	animation: bnx-logo-glow calc(0.8s / var(--bnx-fx-speed)) ease-out both;
}

.bnx-header.bnx-fx-logo-on .bnx-logo.is-zap .bnx-logo__bolt {
	animation: bnx-bolt-zap calc(0.6s / var(--bnx-fx-speed)) ease-out both;
}

/* Logo fallback cycle without the JS clock. */
@keyframes bnx-arc-cycle {
	0%, 84% { stroke-dashoffset: 24; opacity: 0; }
	86% { opacity: 1; }
	96% { opacity: 1; }
	100% { stroke-dashoffset: -100; opacity: 0; }
}

.bnx-header.bnx-fx-logo-on:not(.bnx-js) .bnx-arc--a,
.bnx-header.bnx-fx-logo-on.bnx-engine-css .bnx-logo:not(.is-zap) .bnx-arc--a {
	animation: bnx-arc-cycle 6.5s linear infinite;
}

.bnx-header.bnx-fx-logo-on:not(.bnx-js) .bnx-arc--b,
.bnx-header.bnx-fx-logo-on.bnx-engine-css .bnx-logo:not(.is-zap) .bnx-arc--b {
	animation: bnx-arc-cycle 6.5s linear 0.1s infinite;
}

/* ------------------------------------------------------------------ *
 * CTA electric sheen (subtle, hover only)
 * ------------------------------------------------------------------ */
.bnx-header .bnx-cta::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg) translate3d(0, 0, 0);
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) {
	.bnx-header .bnx-cta:hover::before {
		opacity: 1;
		transform: skewX(-18deg) translate3d(420%, 0, 0);
		transition: transform 0.7s ease, opacity 0.2s ease;
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion: an accessible, defined alternative.
 * - Ticker: JS switches to fade-rotation (or static) mode.
 * - Lightning: no flashes or moving bolts; a calm static glow remains.
 * ------------------------------------------------------------------ */
.bnx-header.bnx-engine-reduced .bnx-fx__canvas,
.bnx-header.bnx-engine-reduced .bnx-fx__bolts,
.bnx-header.bnx-engine-reduced .bnx-fx__css {
	display: none !important;
}

.bnx-header.bnx-engine-reduced .bnx-topbar {
	background-image: radial-gradient(70% 160% at 50% 120%, rgba(var(--bnx-blue-rgb), 0.18), rgba(var(--bnx-blue-rgb), 0) 70%);
}

@media (prefers-reduced-motion: reduce) {
	.bnx-header.bnx-motion-respect .bnx-fx__css,
	.bnx-header.bnx-motion-respect .bnx-fxb,
	.bnx-header.bnx-motion-respect .bnx-ticker__text,
	.bnx-header.bnx-motion-respect .bnx-arc,
	.bnx-header.bnx-motion-respect .bnx-charge,
	.bnx-header.bnx-motion-respect .bnx-logo__bolt,
	.bnx-header.bnx-motion-respect .bnx-logo__img,
	.bnx-header.bnx-motion-respect .bnx-logo__text {
		animation: none !important;
	}

	.bnx-header.bnx-motion-respect:not(.bnx-js) .bnx-ticker__track {
		animation: none !important;
	}

	.bnx-header.bnx-motion-respect .bnx-fx__css,
	.bnx-header.bnx-motion-respect .bnx-fx__bolts {
		display: none !important;
	}
}