/* ============================================================
   RocketX — Background FX
   Glassmorphism orbs + geometric glass shards
   position: fixed so they persist across all sections
   ============================================================ */

.rx-bg-fx {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* 3D scene for the data panels (orbs are 2D and unaffected) */
	perspective: 1600px;
	perspective-origin: 50% 40%;
	/* NO overflow:hidden — it hard-clips gradient edges into rectangles */
}

/* ── Blurred gradient orbs (atmospheric colour blobs) ──────── */
/*
   Strategy: use a soft radial-gradient that fades to transparent —
   no filter:blur needed, so there's no overflow-clip rectangle artefact.
   The gradient IS the softness.
*/
.rx-bg-fx__orb {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}

/* Orb 1 — orange, top-left */
.rx-bg-fx__orb--1 {
	width: 700px;
	height: 600px;
	top: -120px;
	left: -180px;
	background: radial-gradient(ellipse at 45% 45%,
		rgba(220, 79, 44, 0.55) 0%,
		rgba(220, 79, 44, 0.25) 35%,
		rgba(220, 79, 44, 0.06) 60%,
		transparent 75%
	);
	animation: rx-orb-a 24s ease-in-out infinite;
}

/* Orb 2 — deep blue, bottom-right */
.rx-bg-fx__orb--2 {
	width: 840px;
	height: 700px;
	bottom: -200px;
	right: -220px;
	background: radial-gradient(ellipse at 55% 55%,
		rgba(50, 100, 230, 0.50) 0%,
		rgba(30, 75, 190, 0.22) 35%,
		rgba(20, 60, 160, 0.07) 60%,
		transparent 75%
	);
	animation: rx-orb-b 30s ease-in-out infinite;
}

/* Orb 3 — teal, mid-right */
.rx-bg-fx__orb--3 {
	width: 560px;
	height: 560px;
	top: 38%;
	right: -120px;
	background: radial-gradient(ellipse at center,
		rgba(18, 185, 200, 0.42) 0%,
		rgba(10, 165, 182, 0.15) 40%,
		rgba(5, 140, 160, 0.04) 62%,
		transparent 75%
	);
	animation: rx-orb-c 20s ease-in-out infinite;
}

/* Orb 4 — warm orange accent, upper-right */
.rx-bg-fx__orb--4 {
	width: 400px;
	height: 400px;
	top: 10%;
	right: 6%;
	background: radial-gradient(ellipse at center,
		rgba(255, 120, 40, 0.40) 0%,
		rgba(240, 100, 30, 0.14) 40%,
		transparent 68%
	);
	animation: rx-orb-a 18s ease-in-out infinite reverse;
	animation-delay: -6s;
}

/* Orb 5 — purple/indigo, lower-left */
.rx-bg-fx__orb--5 {
	width: 660px;
	height: 500px;
	bottom: 4%;
	left: -140px;
	background: radial-gradient(ellipse at 42% 48%,
		rgba(120, 50, 220, 0.44) 0%,
		rgba(90, 38, 180, 0.18) 38%,
		rgba(70, 28, 150, 0.05) 60%,
		transparent 75%
	);
	animation: rx-orb-b 26s ease-in-out infinite reverse;
	animation-delay: -10s;
}

/* Orb 6 — blue, mid-left */
.rx-bg-fx__orb--6 {
	width: 460px;
	height: 380px;
	top: 58%;
	left: 2%;
	background: radial-gradient(ellipse at center,
		rgba(60, 130, 255, 0.36) 0%,
		rgba(40, 110, 240, 0.12) 40%,
		transparent 68%
	);
	animation: rx-orb-c 22s ease-in-out infinite;
	animation-delay: -8s;
}

/* Orb drift keyframes */
@keyframes rx-orb-a {
	0%,  100% { transform: translate(0,     0)    scale(1);    }
	28%        { transform: translate(28px, -22px) scale(1.04); }
	62%        { transform: translate(-18px, 14px) scale(0.96); }
}
@keyframes rx-orb-b {
	0%,  100% { transform: translate(0,     0)    scale(1);    }
	38%        { transform: translate(-32px, 22px) scale(1.03); }
	68%        { transform: translate(24px, -16px) scale(0.97); }
}
@keyframes rx-orb-c {
	0%,  100% { transform: translate(0,    0)    scale(1);    }
	50%        { transform: translate(16px, 28px) scale(1.05); }
}

/* ── Glass shards (geometric glassmorphism panels) ──────────── */
/*
   These are intentionally rectangular — the glass-panel look.
   They need enough fill + border to be visible on the dark bg.
*/
/* ── 3D techy data panels (chart HUDs floating in a perspective scene) ── */
.rx-bg-fx__shard {
	position: absolute;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform-style: preserve-3d;
	will-change: transform;
}

/* Fine HUD grid texture, faded toward the edges */
.rx-bg-fx__shard::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
	mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
}

/* Inner chart visualisation — inherits panel colour via currentColor */
.rx-bg-fx__viz {
	position: absolute;
	inset: 16px;
	opacity: 0.6;
	overflow: visible;
}
.rx-bg-fx__viz polyline,
.rx-bg-fx__viz line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.rx-bg-fx__viz rect,
.rx-bg-fx__viz circle { fill: currentColor; stroke: none; }
.rx-bg-fx__viz .rx-bg-fx__node-line { stroke-width: 1; opacity: 0.5; }

/* Panel 1 — wide, upper-left, orange — uptrend line */
.rx-bg-fx__shard--1 {
	width: 280px; height: 150px; top: 15%; left: 5%;
	color: var(--rx-orange-300);
	background: linear-gradient(135deg, rgba(220, 79, 44, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(240, 133, 102, 0.28);
	transform: rotateX(16deg) rotateY(-22deg) rotateZ(-6deg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 50px rgba(220, 79, 44, 0.12), 0 32px 60px -30px rgba(0, 0, 0, 0.55);
	animation: rx-shard-a 21s ease-in-out infinite;
}

/* Panel 2 — tall, right, violet — candlesticks */
.rx-bg-fx__shard--2 {
	width: 175px; height: 250px; top: 40%; right: 5%;
	color: #9a8bff;
	background: linear-gradient(135deg, rgba(109, 93, 246, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(140, 120, 255, 0.26);
	transform: rotateX(12deg) rotateY(24deg) rotateZ(7deg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 50px rgba(109, 93, 246, 0.12), 0 32px 60px -30px rgba(0, 0, 0, 0.55);
	animation: rx-shard-b 25s ease-in-out infinite;
}

/* Panel 3 — wide, lower-right, cyan — volume bars */
.rx-bg-fx__shard--3 {
	width: 300px; height: 120px; bottom: 18%; right: 10%;
	color: #4fd2e6;
	background: linear-gradient(135deg, rgba(43, 183, 240, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(80, 200, 240, 0.22);
	transform: rotateX(22deg) rotateY(16deg) rotateZ(-5deg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 50px rgba(43, 183, 240, 0.10), 0 32px 60px -30px rgba(0, 0, 0, 0.50);
	animation: rx-shard-a 19s ease-in-out infinite reverse;
}

/* Panel 4 — square, lower-left, purple — node network */
.rx-bg-fx__shard--4 {
	width: 200px; height: 175px; bottom: 28%; left: 7%;
	color: #b58bff;
	background: linear-gradient(135deg, rgba(120, 50, 220, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(150, 90, 240, 0.24);
	transform: rotateX(-16deg) rotateY(20deg) rotateZ(-9deg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 46px rgba(120, 50, 220, 0.10), 0 32px 60px -30px rgba(0, 0, 0, 0.50);
	animation: rx-shard-b 23s ease-in-out infinite reverse;
	animation-delay: -7s;
}

/* Panel 5 — thin, top-right, warm — grid only */
.rx-bg-fx__shard--5 {
	width: 230px; height: 96px; top: 7%; right: 16%;
	color: rgba(255, 170, 90, 0.9);
	background: linear-gradient(135deg, rgba(255, 140, 60, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(255, 150, 70, 0.18);
	transform: rotateX(20deg) rotateY(-18deg) rotateZ(14deg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 24px 50px -30px rgba(0, 0, 0, 0.50);
	animation: rx-shard-a 17s ease-in-out infinite;
	animation-delay: -4s;
}

/* Panel 6 — mid-left, green — secondary line */
.rx-bg-fx__shard--6 {
	width: 240px; height: 130px; top: 52%; left: 6%;
	color: #3FD17A;
	background: linear-gradient(135deg, rgba(63, 209, 122, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(80, 220, 140, 0.22);
	transform: rotateX(18deg) rotateY(-20deg) rotateZ(5deg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 46px rgba(63, 209, 122, 0.10), 0 32px 60px -30px rgba(0, 0, 0, 0.50);
	animation: rx-shard-b 22s ease-in-out infinite;
}

/* ── Live "action": a scanline sweep + flowing chart lines ── */
.rx-bg-fx__shard::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07), transparent);
	animation: rx-scan 7s linear infinite;
}
.rx-bg-fx__shard--2::after { animation-delay: -2.5s; }
.rx-bg-fx__shard--3::after { animation-delay: -4s; }
.rx-bg-fx__shard--4::after { animation-delay: -1.2s; }
.rx-bg-fx__shard--5::after { animation-delay: -5s; }
.rx-bg-fx__shard--6::after { animation-delay: -3s; }

@keyframes rx-scan {
	0%   { transform: translateY(-70%); opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translateY(240%); opacity: 0; }
}

/* Flowing data line on the line-chart panels */
.rx-bg-fx__shard--1 .rx-bg-fx__viz polyline,
.rx-bg-fx__shard--6 .rx-bg-fx__viz polyline {
	stroke-dasharray: 5 7;
	animation: rx-flow 2.6s linear infinite;
}
@keyframes rx-flow { to { stroke-dashoffset: -48; } }

/* Shard float keyframes */
@keyframes rx-shard-a {
	0%,  100% { translate: 0px   0px;  }
	35%        { translate: 10px -16px; }
	65%        { translate: -8px  12px; }
}
@keyframes rx-shard-b {
	0%,  100% { translate: 0px    0px;  }
	40%        { translate: -12px 18px; }
	72%        { translate: 14px -10px; }
}

/* ── Light streaks ──────────────────────────────────────────── */
.rx-bg-fx__streak {
	position: absolute;
	pointer-events: none;
}

.rx-bg-fx__streak--1 {
	width: 2px;
	height: 450px;
	top: 5%;
	left: 28%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(255, 255, 255, 0.38) 10%,
		rgba(220, 79, 44, 0.54) 20%,
		rgba(255, 255, 255, 0.22) 42%,
		rgba(220, 79, 44, 0.12) 70%,
		transparent 100%
	);
	border-radius: 2px;
	transform: rotate(-30deg);
	animation: rx-streak-travel-1 17s linear infinite;
}

.rx-bg-fx__streak--2 {
	width: 2px;
	height: 330px;
	bottom: 25%;
	right: 30%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(80, 140, 255, 0.48) 14%,
		rgba(255, 255, 255, 0.26) 38%,
		rgba(80, 140, 255, 0.10) 68%,
		transparent 100%
	);
	border-radius: 2px;
	transform: rotate(20deg);
	animation: rx-streak-travel-2 21s linear infinite;
	animation-delay: -9s;
}

.rx-bg-fx__streak--3 {
	width: 2px;
	height: 390px;
	top: 55%;
	left: 12%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(255, 255, 255, 0.34) 10%,
		rgba(120, 220, 200, 0.50) 20%,
		rgba(255, 255, 255, 0.20) 44%,
		rgba(120, 220, 200, 0.10) 70%,
		transparent 100%
	);
	border-radius: 2px;
	transform: rotate(68deg);
	animation: rx-streak-travel-3 19s linear infinite;
	animation-delay: -4s;
}

.rx-bg-fx__streak--4 {
	width: 2px;
	height: 360px;
	top: 18%;
	right: 14%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(255, 200, 150, 0.40) 14%,
		rgba(255, 255, 255, 0.24) 38%,
		rgba(255, 200, 150, 0.10) 68%,
		transparent 100%
	);
	border-radius: 2px;
	transform: rotate(-72deg);
	animation: rx-streak-travel-4 23s linear infinite;
	animation-delay: -13s;
}

.rx-bg-fx__streak--5 {
	width: 2px;
	height: 320px;
	top: 34%;
	left: 62%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(255, 255, 255, 0.36) 12%,
		rgba(200, 120, 255, 0.50) 22%,
		rgba(255, 255, 255, 0.20) 46%,
		rgba(200, 120, 255, 0.10) 72%,
		transparent 100%
	);
	border-radius: 2px;
	transform: rotate(45deg);
	animation: rx-streak-travel-5 25s linear infinite;
	animation-delay: -17s;
}

.rx-bg-fx__streak--6 {
	width: 2px;
	height: 300px;
	bottom: 10%;
	left: 44%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(255, 255, 255, 0.34) 12%,
		rgba(90, 220, 140, 0.48) 22%,
		rgba(255, 255, 255, 0.18) 46%,
		rgba(90, 220, 140, 0.10) 72%,
		transparent 100%
	);
	border-radius: 2px;
	transform: rotate(-15deg);
	animation: rx-streak-travel-6 20s linear infinite;
	animation-delay: -6s;
}

/* Each streak slides along its OWN rotated axis (not an arbitrary diagonal),
   like a comet/rocket gliding lengthwise rather than drifting sideways
   across it. The translate vector is the streak's own down-axis direction
   — (sin θ, cos θ) for its rotate(θ) — scaled to a travel distance, split
   evenly before/after its CSS-anchored position (top/left above) so it
   passes straight through that point at the midpoint of the loop.
   Opacity: quick fade in (comet igniting) then a long fade-out tail while
   still travelling, matching how the background gradient already fades
   along the streak's own length — the two combine into one continuous
   trail effect. translate (not transform) composes with the fixed
   rotate() instead of overwriting it, and opacity is 0 at 0%/100% so the
   instant reset each loop always happens while invisible. */
@keyframes rx-streak-travel-1 {
	0%   { translate: -22.5vh -39vh; opacity: 0;    }
	8%   {                            opacity: 1;    }
	55%  {                            opacity: 0.55; }
	100% { translate: 22.5vh 39vh;    opacity: 0;    }
}

@keyframes rx-streak-travel-2 {
	0%   { translate: 12vh -33vh; opacity: 0;    }
	8%   {                        opacity: 1;    }
	55%  {                        opacity: 0.5;  }
	100% { translate: -12vh 33vh; opacity: 0;    }
}

/* rotate(68deg) → down-axis (sin 68°, cos 68°) ≈ (0.927, 0.375) */
@keyframes rx-streak-travel-3 {
	0%   { translate: -34vh -14vh; opacity: 0;    }
	8%   {                          opacity: 1;    }
	55%  {                          opacity: 0.6;  }
	100% { translate: 34vh 14vh;   opacity: 0;    }
}

/* rotate(-72deg) → down-axis (sin -72°, cos -72°) ≈ (-0.951, 0.309) */
@keyframes rx-streak-travel-4 {
	0%   { translate: 33vh -11vh; opacity: 0;    }
	8%   {                         opacity: 1;    }
	55%  {                         opacity: 0.55; }
	100% { translate: -33vh 11vh; opacity: 0;    }
}

/* rotate(45deg) → down-axis (sin 45°, cos 45°) ≈ (0.707, 0.707) */
@keyframes rx-streak-travel-5 {
	0%   { translate: -28vh -28vh; opacity: 0;    }
	8%   {                          opacity: 1;    }
	55%  {                          opacity: 0.55; }
	100% { translate: 28vh 28vh;   opacity: 0;    }
}

/* rotate(-15deg) → down-axis (sin -15°, cos -15°) ≈ (-0.259, 0.966) */
@keyframes rx-streak-travel-6 {
	0%   { translate: 9vh -34vh; opacity: 0;    }
	8%   {                        opacity: 1;    }
	55%  {                        opacity: 0.5;  }
	100% { translate: -9vh 34vh; opacity: 0;    }
}

/* ── Mobile: scale back for performance ─────────────────────── */
@media (max-width: 768px) {
	.rx-bg-fx__orb--3,
	.rx-bg-fx__orb--6 { display: none; }

	.rx-bg-fx__shard--2,
	.rx-bg-fx__shard--4 { display: none; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.rx-bg-fx__orb,
	.rx-bg-fx__shard,
	.rx-bg-fx__shard::after,
	.rx-bg-fx__viz polyline,
	.rx-bg-fx__streak { animation: none; }
}