/*
 * Armeria 3S — weapons-bg.css
 * Decorative weapon silhouettes that take turns as the page scrolls (Customizer › Armeria 3S ›
 * Weapons background). Loaded only where the background is in use (inc/weapons-bg.php).
 *
 * Markup (inc/weapons-bg.php, cloned by weapons-bg.js into every .a3s-weapons-bg element):
 *   <div class="a3s-wbg [a3s-wbg--fixed] a3s-wbg--pos-center" aria-hidden="true" style="--a3s-wbg-n:5; …">
 *     <span class="a3s-wbg__item is-first" data-kind="long" style="--i:0; --a3s-wbg-img:url(…)"></span> …
 *   </div>
 * Each silhouette is a CSS mask painted with currentColor: it takes the text colour of the section
 * (dark on light sections, light on dark ones) unless a colour is chosen in the Customizer.
 *
 * Motion: one shared crossfade + 3 % horizontal drift, driven by the scroll position
 * (animation-timeline: scroll() for the page layer, view() of the host for sections).
 * Browsers without scroll-driven animations get the same curve from weapons-bg.js.
 * prefers-reduced-motion: first silhouette only, static.
 */

/* Host: any element with the class (Elementor container/section, block, shortcode wrapper). */
.a3s-weapons-bg {
	position: relative;
	isolation: isolate;
	view-timeline: --a3s-wbg block;
}

/* Optional dark panel (Elementor: add "a3s-wbg-dark" next to "a3s-weapons-bg"). */
.a3s-wbg-dark {
	--a3s-color-heading: #fff;
	--a3s-color-text: #f3f2f0;
	background-color: var(--a3s-color-secondary);
	color: #f3f2f0;
}

/* Beats the kit's generic heading colour, loses to a colour set on the widget. */
.a3s-wbg-dark .a3s-section-title .elementor-heading-title {
	color: var(--a3s-color-heading);
}

.a3s-wbg-host.a3s-wbg-dark {
	padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 48px);
}

.a3s-wbg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	color: var(--a3s-wbg-color, currentColor);
	opacity: var(--a3s-wbg-o, .07);
	pointer-events: none;
	contain: strict;
}

.a3s-wbg--fixed {
	position: fixed;
}

/* Box sized by width AND height; handguns (data-kind="hand") at ~46 % of a long gun's width so the
   five read as one family at real relative scale instead of a giant pistol filling the frame. */
.a3s-wbg__item {
	--a3s-wbg-w: var(--a3s-wbg-size, 70%);
	position: absolute;
	top: 0;
	bottom: 0;
	margin-block: auto;
	height: min(76%, 62vh);
	left: calc((100% - var(--a3s-wbg-w)) / 2);
	width: var(--a3s-wbg-w);
	background-color: currentColor;
	opacity: 0;
	-webkit-mask: var(--a3s-wbg-img) center / contain no-repeat;
	mask: var(--a3s-wbg-img) center / contain no-repeat;
	will-change: opacity, transform;
}

.a3s-wbg__item[data-kind="hand"] {
	--a3s-wbg-w: calc(var(--a3s-wbg-size, 70%) * .46);
}

.a3s-wbg--pos-left .a3s-wbg__item {
	left: 4%;
}

.a3s-wbg--pos-right .a3s-wbg__item {
	left: calc(96% - var(--a3s-wbg-w));
}

.a3s-wbg__item.is-first {
	opacity: 1;
}

@media (max-width: 767.98px) {
	.a3s-wbg__item,
	.a3s-wbg--pos-left .a3s-wbg__item,
	.a3s-wbg--pos-right .a3s-wbg__item {
		--a3s-wbg-w: 88%;
		left: 6%;
	}

	.a3s-wbg__item[data-kind="hand"],
	.a3s-wbg--pos-left .a3s-wbg__item[data-kind="hand"],
	.a3s-wbg--pos-right .a3s-wbg__item[data-kind="hand"] {
		--a3s-wbg-w: 48%;
		left: 26%;
	}
}

@supports (animation-timeline: scroll()) {
	.a3s-wbg__item {
		animation: a3s-wbg-swap linear both;
		animation-timeline: scroll(root block);
		animation-range:
			max(0%, calc((var(--i) - .15) * 100% / var(--a3s-wbg-n)))
			min(100%, calc((var(--i) + 1.15) * 100% / var(--a3s-wbg-n)));
	}

	.a3s-wbg:not(.a3s-wbg--fixed) .a3s-wbg__item {
		animation-timeline: --a3s-wbg;
	}

	.a3s-wbg__item.is-first {
		animation-name: a3s-wbg-first;
	}

	.a3s-wbg__item.is-last {
		animation-name: a3s-wbg-last;
	}

	.a3s-wbg__item.is-first.is-last {
		animation: none;
		opacity: 1;
	}
}

@keyframes a3s-wbg-swap {
	0% {
		opacity: 0;
		transform: translate3d(-3%, 0, 0);
	}

	30%,
	70% {
		opacity: 1;
		transform: none;
	}

	100% {
		opacity: 0;
		transform: translate3d(3%, 0, 0);
	}
}

@keyframes a3s-wbg-first {
	0%,
	70% {
		opacity: 1;
		transform: none;
	}

	100% {
		opacity: 0;
		transform: translate3d(3%, 0, 0);
	}
}

@keyframes a3s-wbg-last {
	0% {
		opacity: 0;
		transform: translate3d(-3%, 0, 0);
	}

	30%,
	100% {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a3s-wbg__item {
		animation: none !important;
		opacity: 0 !important;
		transform: none !important;
	}

	.a3s-wbg__item.is-first {
		opacity: 1 !important;
	}
}

@media print {
	.a3s-wbg {
		display: none;
	}
}