/* ============================================================================
 * xbm-hero-fx.css — generic hero atmosphere stack (v1.8.9+)
 *
 * Shared CSS for the layered hero atmosphere used across the homepage and
 * vertical landing pages. Any hero `<section>` tagged with class .xbfx-hero
 * (and the inner atmosphere markup) renders the full stack: color grade
 * overlay, depth grid, light rays, canvas particle field, radar reticle,
 * vignette, scroll cue, sheen on primary CTAs, and an enriched reveal system.
 *
 * Each layer is parallaxed independently by the JS engine in
 * assets/js/xbm-hero-fx.js — which reads data-xbfx-depth (number) and
 * optional data-xbfx-tilt (number) from any element below the .xbfx-hero
 * wrapper.
 *
 * Selectors are scoped via .xbfx-hero so this CSS never bleeds into pages
 * that don't opt in. The hero's own background photo (whatever it is) stays
 * exactly as it was — the atmosphere just layers on top.
 * ============================================================================ */

/* Hero wrapper — adds perspective so 3D tilts on inner layers render. */
.xbfx-hero { position: relative; overflow: hidden; perspective: 1200px; }

/* L1 · Color grade — sits between the photo and the rest of the stack. */
.xbfx-hero .xbfx-grade {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(8,8,10,0.42), rgba(8,8,10,0.30) 38%, rgba(8,8,10,0.80)),
		radial-gradient(1200px 700px at 50% 34%, rgba(255,74,28,0.18), transparent 60%);
}

/* L2 · Depth grid — fine line grid that parallaxes with the pointer. */
.xbfx-hero .xbfx-grid {
	position: absolute; inset: -10%; z-index: 2; pointer-events: none; will-change: transform;
	background:
		linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0/100% 80px,
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0/120px 100%;
	mask-image: radial-gradient(ellipse 80% 55% at 50% 46%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 46%, #000 30%, transparent 100%);
	opacity: 0.6;
}

/* L3 · Diagonal light rays — slowly drifts. */
.xbfx-hero .xbfx-rays {
	position: absolute; inset: -20%; z-index: 2; pointer-events: none;
	background: repeating-linear-gradient(66deg, transparent 0 60px, rgba(255,210,170,0.05) 60px 64px, transparent 64px 150px);
	mask-image: radial-gradient(ellipse 60% 70% at 78% 8%, #000, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 78% 8%, #000, transparent 72%);
	animation: xbfx-rays 18s ease-in-out infinite alternate;
}
@keyframes xbfx-rays { from { transform: translateX(0); } to { transform: translateX(-3%); } }

/* L4 · Canvas particle field — drawn by JS. */
.xbfx-hero .xbfx-canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* L5 · Radar reticle — parked top-right, sweeps. */
.xbfx-hero .xbfx-reticle {
	position: absolute; z-index: 3; right: 7%; top: 24%;
	width: clamp(120px, 13vw, 210px); aspect-ratio: 1 / 1;
	pointer-events: none; opacity: 0.55; will-change: transform;
}
.xbfx-hero .xbfx-reticle .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,74,28,0.35); }
.xbfx-hero .xbfx-reticle .ring.r2 { inset: 26%; border-color: rgba(255,255,255,0.20); }
.xbfx-hero .xbfx-reticle .tick { position: absolute; inset: 0; }
.xbfx-hero .xbfx-reticle .tick::before,
.xbfx-hero .xbfx-reticle .tick::after { content: ''; position: absolute; background: rgba(255,74,28,0.5); }
.xbfx-hero .xbfx-reticle .tick::before { left: 50%; top: -6px; width: 1px; height: 14px; }
.xbfx-hero .xbfx-reticle .tick::after  { top: 50%; left: -6px; height: 1px; width: 14px; }
.xbfx-hero .xbfx-reticle .sweep {
	position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(255,74,28,0.4), transparent 70deg 360deg);
	mask-image: radial-gradient(circle, #000 99%, transparent 100%);
	-webkit-mask-image: radial-gradient(circle, #000 99%, transparent 100%);
	animation: xbfx-spin 4.4s linear infinite;
}
@keyframes xbfx-spin { to { transform: rotate(360deg); } }

/* L6 · Edge vignette — sits above everything except hero copy. */
.xbfx-hero .xbfx-vig {
	position: absolute; inset: 0; z-index: 4; pointer-events: none;
	background: radial-gradient(ellipse 90% 72% at 50% 50%, transparent 32%, rgba(5,5,5,0.50) 100%);
}

/* Animated scroll cue. */
.xbfx-hero .xbfx-scrollcue {
	position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 5;
	font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em;
	text-transform: uppercase; color: rgba(255,255,255,0.42);
	display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.xbfx-hero .xbfx-scrollcue .ln {
	width: 1px; height: 30px;
	background: linear-gradient(180deg, #ff4a1c, transparent);
	animation: xbfx-cue 2s ease-in-out infinite;
}
@keyframes xbfx-cue {
	0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
	50%      { opacity: 1;   transform: scaleY(1); }
}

/* Sheen swipe across .xbfx-sheen elements (typically primary CTAs). */
.xbfx-sheen { position: relative; overflow: hidden; }
.xbfx-sheen::after {
	content: ''; position: absolute; top: 0; left: -120%;
	width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
	transform: skewX(-18deg);
	animation: xbfx-sheen 4.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes xbfx-sheen { 0%, 55% { left: -120%; } 78%, 100% { left: 160%; } }

/* Ensure hero copy / inner content sits above all atmosphere layers. */
.xbfx-hero .xbfx-content,
.xbfx-hero > .wrap,
.xbfx-hero > .xbfx-inner { position: relative; z-index: 5; }

/* Mobile: hide the heavier decorative layers (reticle + rays). */
@media (max-width: 768px) {
	.xbfx-hero .xbfx-reticle,
	.xbfx-hero .xbfx-rays { display: none; }
}

/* Respect prefers-reduced-motion — kill all animations + parallax intent. */
@media (prefers-reduced-motion: reduce) {
	.xbfx-hero .xbfx-rays,
	.xbfx-hero .xbfx-reticle .sweep,
	.xbfx-hero .xbfx-scrollcue .ln,
	.xbfx-sheen::after { animation: none !important; }
	.xbfx-hero [data-xbfx-depth],
	.xbfx-hero [data-xbfx-tilt] { transform: none !important; }
}