/* ─── HERO BACKGROUND EFFECTS ─── */

/* Radial glow orb */
.hero-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	width: 700px;
	height: 700px;
	background: radial-gradient(
		ellipse at center,
		rgba(245, 201, 122, 0.18) 0%,
		rgba(240, 180, 80, 0.06) 35%,
		transparent 70%
	);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	animation: pulse-glow 4s ease-in-out infinite alternate;
}
@keyframes pulse-glow {
	from {
		opacity: 0.7;
		transform: translate(-50%, -55%) scale(1);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -55%) scale(1.08);
	}
}

/* Floating ring decoration */
.hero-ring {
	position: absolute;
	top: 60%;
	left: 50%;
	width: 340px;
	height: 340px;
	border: 1px solid rgba(245, 201, 122, 0.1);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: rotate-ring 30s linear infinite;
	pointer-events: none;
	z-index: 1;
}
.hero-ring::after {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	width: 8px;
	height: 8px;
	background: var(--amber, #f5c97a);
	border-radius: 50%;
	transform: translateX(-50%);
}
.hero-ring-2 {
	position: absolute;
	top: 60%;
	left: 50%;
	width: 520px;
	height: 520px;
	border: 1px dashed rgba(245, 201, 122, 0.05);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: rotate-ring 60s linear infinite reverse;
	pointer-events: none;
	z-index: 1;
}
@keyframes rotate-ring {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Particle dots */
.particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

/* Ensure particles inside product panels stay behind the device */
.product-panel__media .particles {
	z-index: 0;
	opacity: 0.7;
}
.particle {
	position: absolute;
	width: 2px;
	height: 2px;
	background: var(--amber, #f5c97a);
	border-radius: 50%;
	opacity: 0;
	animation: float-particle linear infinite;
}
@keyframes float-particle {
	0% {
		opacity: 0;
		transform: translateY(0) scale(0);
	}
	10% {
		opacity: 0.6;
		transform: translateY(-10px) scale(1);
	}
	90% {
		opacity: 0.3;
	}
	100% {
		opacity: 0;
		transform: translateY(-200px) scale(0.5);
	}
}

/* ─── MARQUEE STRIP ─── */
.marquee-strip {
	overflow: hidden;
	border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
	border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
	padding: 14px 0;
	background: var(--bg2, #0d0d12);
	position: relative;
	z-index: 10;
}
.marquee-inner {
	display: flex;
	gap: 0;
	white-space: nowrap;
	animation: marquee 22s linear infinite;
	width: max-content;
}
.marquee-inner span {
	font-family: "DM Mono", monospace, sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-dim, #6b6870);
	padding: 0 40px;
}
.marquee-inner span.accent {
	color: var(--amber, #f5c97a);
}
@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 900px) {
	.hero-glow {
		width: 400px;
		height: 400px;
	}
	.hero-ring {
		width: 280px;
		height: 280px;
	}
	.hero-ring-2 {
		width: 420px;
		height: 420px;
	}
}