/* Military Effects Pack */

.cioe-pack-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 12;
	overflow: visible;
}

.cioe-mil-bullet-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	max-width: 100%;
	vertical-align: top;
	overflow: hidden;
}

.cioe-mil-bullet-base {
	display: block;
	vertical-align: top;
	position: relative;
	z-index: 1;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.cioe-mil-bullet-wrap.cioe-mil-bullet-shock {
	transform-origin: center center;
	animation: cioeMilBulletShock 0.32s ease-out;
}

.cioe-mil-bullet-layer {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-sizing: border-box;
	pointer-events: none;
}

.cioe-core-fx-wrap .cioe-mil-bullet-wrap,
figure .cioe-mil-bullet-wrap,
.cioe-media .cioe-mil-bullet-wrap {
	max-width: 100%;
}

.cioe-mil-bullet-rim {
	position: absolute;
	transform: translate(-50%, -50%);
	object-fit: contain;
	object-position: center center;
	pointer-events: none;
	z-index: 4;
	opacity: 1;
	height: auto;
}

img.cioe-mil-bullet-shock {
	transform-origin: center center;
	animation: none;
}

@keyframes cioeMilBulletShock {
	0% { transform: scale(1); }
	38% { transform: scale(0.966); }
	100% { transform: scale(1); }
}

.cioe-mil-flag-layer {
	z-index: 18;
	overflow: visible;
}

.cioe-mil-flag-canvas {
	display: block;
	pointer-events: none;
}

.cioe-mil-flag-layer.is-webgl {
	animation: none;
	filter: none;
	transform: none;
	overflow: visible;
}

/* Let flag waves leave the image frame (core .cioe-media is overflow:hidden by default). */
.cioe-mil-flag-active,
.cioe-mil-flag-active.cioe-media,
.cioe-mil-flag-active.cioe-core-fx-wrap,
.cioe-root.cioe-mil-flag-active,
.cioe-root.cioe-mil-flag-active .cioe-media,
.cioe-root.cioe-mil-flag-active .cioe-media > figure,
.cioe-root.cioe-mil-flag-active .cioe-media > .wp-block-image,
.cioe-core-fx-wrap.cioe-mil-flag-active,
.cioe-core-fx-wrap.cioe-mil-flag-active figure,
.cioe-pack-preview-active.cioe-mil-flag-active,
.cioe-pack-preview-active.cioe-mil-flag-active .cioe-media,
.cioe-pack-preview-active.cioe-mil-flag-active figure {
	overflow: visible !important;
}

.cioe-mil-flag-surface {
	transform-origin: 0% 50%;
	animation: cioeMilFlagWave var(--cioe-mil-flag-speed, 4.8s) ease-in-out infinite;
	will-change: transform, filter;
}

.cioe-mil-flag-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	pointer-events: none;
	animation: cioeMilFlagImgDrift calc(var(--cioe-mil-flag-speed, 4.8s) * 1.15) ease-in-out infinite;
}

@keyframes cioeMilFlagWave {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(0deg) skewX(0deg);
	}
	25% {
		transform: translate3d(calc(2px * var(--cioe-mil-flag-intensity, 1)), 0, 0) rotate(calc(0.25deg * var(--cioe-mil-flag-intensity, 1))) skewX(calc(0.8deg * var(--cioe-mil-flag-intensity, 1)));
	}
	50% {
		transform: translate3d(calc(5px * var(--cioe-mil-flag-intensity, 1)), 0, 0) rotate(0deg) skewX(0deg);
	}
	75% {
		transform: translate3d(calc(2px * var(--cioe-mil-flag-intensity, 1)), 0, 0) rotate(calc(-0.2deg * var(--cioe-mil-flag-intensity, 1))) skewX(calc(-0.55deg * var(--cioe-mil-flag-intensity, 1)));
	}
}

@keyframes cioeMilFlagImgDrift {
	0%, 100% {
		object-position: left center;
	}
	50% {
		object-position: calc(1.2% * var(--cioe-mil-flag-intensity, 1)) center;
	}
}

img.cioe-mil-flag-hidden {
	visibility: hidden;
}

img.cioe-mil-night-vision {
	--cioe-mil-nv-intensity: 1;
	--cioe-mil-nv-r: 39%;
	position: relative;
	z-index: 1;
	filter:
		sepia(1)
		hue-rotate(68deg)
		saturate(calc(2.2 + (1.6 * var(--cioe-mil-nv-intensity))))
		brightness(calc(0.85 + (0.12 * var(--cioe-mil-nv-intensity))))
		contrast(calc(1.15 + (0.18 * var(--cioe-mil-nv-intensity))));
	-webkit-clip-path: circle(var(--cioe-mil-nv-r) at 50% 50%);
	clip-path: circle(var(--cioe-mil-nv-r) at 50% 50%);
}

.cioe-mil-nv-layer {
	--cioe-mil-nv-intensity: 1;
	--cioe-mil-nv-r: 39%;
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	z-index: 50 !important;
	overflow: hidden;
	margin: 0 !important;
}

.cioe-mil-nv-host {
	background-color: rgb(0, 28, 8);
}

.cioe-mil-nv-shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(0, 28, 8, calc(0.78 + (0.14 * var(--cioe-mil-nv-intensity))));
	-webkit-mask: radial-gradient(
		circle var(--cioe-mil-nv-r) at 50% 50%,
		transparent 0,
		transparent calc(100% - 1.5px),
		#000 calc(100% - 1.5px)
	);
	mask: radial-gradient(
		circle var(--cioe-mil-nv-r) at 50% 50%,
		transparent 0,
		transparent calc(100% - 1.5px),
		#000 calc(100% - 1.5px)
	);
}

.cioe-mil-nv-scanlines {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-clip-path: circle(var(--cioe-mil-nv-r) at 50% 50%);
	clip-path: circle(var(--cioe-mil-nv-r) at 50% 50%);
	background:
		repeating-linear-gradient(
			0deg,
			rgba(0, 0, 0, calc(0.1 + (0.06 * var(--cioe-mil-nv-intensity)))) 0 1px,
			transparent 1px 4px
		),
		radial-gradient(
			circle at 50% 50%,
			rgba(40, 255, 110, calc(0.12 + (0.1 * var(--cioe-mil-nv-intensity)))) 0%,
			transparent 72%
		);
	mix-blend-mode: soft-light;
	opacity: calc(0.55 + (0.25 * var(--cioe-mil-nv-intensity)));
}

/* Legacy wrap from 1.3.6 — keep layout safe if still present. */
.cioe-mil-nv-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	max-width: 100%;
	vertical-align: top;
}

.cioe-mil-nv-shade-layer {
	display: none !important;
}

.cioe-mil-radar-layer {
	--cioe-mil-radar-intensity: 1;
	position: absolute !important;
	display: block !important;
	inset: 0 !important;
	background:
		radial-gradient(circle at center, rgba(0, 255, 90, calc(0.18 * var(--cioe-mil-radar-intensity))) 0, transparent 65%),
		repeating-radial-gradient(circle at center, rgba(0, 255, 90, calc(0.4 * var(--cioe-mil-radar-intensity))) 0 1px, transparent 1px 18px),
		linear-gradient(rgba(0, 28, 0, calc(0.62 * var(--cioe-mil-radar-intensity))), rgba(0, 28, 0, calc(0.62 * var(--cioe-mil-radar-intensity))));
	mix-blend-mode: normal !important;
	opacity: calc(0.72 + (0.22 * var(--cioe-mil-radar-intensity)));
	z-index: 50 !important;
	pointer-events: none !important;
	margin: 0 !important;
}

/* Editor: keep overlays above the image, never in document flow. */
.cioe-core-fx-wrap.cioe-pack-preview-active figure,
.cioe-core-fx-wrap.cioe-pack-preview-active .wp-block-image {
	position: relative !important;
	overflow: hidden;
}
.cioe-core-fx-wrap.cioe-pack-preview-active figure img,
.cioe-core-fx-wrap.cioe-pack-preview-active .wp-block-image img {
	position: relative;
	z-index: 1;
}
.cioe-core-fx-wrap.cioe-pack-preview-active .cioe-mil-radar-layer,
.cioe-core-fx-wrap.cioe-pack-preview-active .cioe-mil-nv-layer {
	position: absolute !important;
	inset: 0 !important;
	z-index: 50 !important;
}

.cioe-mil-radar-sweep {
	position: absolute;
	inset: -10%;
	background: conic-gradient(
		from 0deg,
		rgba(0, 255, 90, calc(0.45 * var(--cioe-mil-radar-intensity))) 0deg,
		transparent 42deg,
		transparent 360deg
	);
	animation: cioeMilRadarSpin var(--cioe-mil-radar-speed, 3s) linear infinite;
	transform-origin: center center;
}

@keyframes cioeMilRadarSpin {
	to { transform: rotate(360deg); }
}

.cioe-mil-radar-grid {
	position: absolute;
	inset: 8%;
	border: 2px solid rgba(0, 255, 90, calc(0.45 * var(--cioe-mil-radar-intensity)));
	border-radius: 50%;
	box-shadow: 0 0 0 999px rgba(0, 20, 0, calc(0.35 * var(--cioe-mil-radar-intensity))) inset;
}

.cioe-mil-explosion-layer {
	--cioe-mil-explode-size: 100%;
	--cioe-mil-explode-intensity: 1;
	pointer-events: none;
	z-index: 23;
	overflow: visible;
}

.cioe-mil-explosion-blast {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--cioe-mil-explode-size, 100%);
	height: var(--cioe-mil-explode-size, 100%);
	transform: translate(-50%, -50%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	opacity: 1;
	filter: none;
	mix-blend-mode: normal;
	-webkit-clip-path: circle(0% at 50% 50%);
	clip-path: circle(0% at 50% 50%);
}

.cioe-mil-explosion-blast.is-running {
	animation: cioeMilExplodeWipe calc(1.42s + (0.08s * var(--cioe-mil-explode-intensity))) ease-out forwards;
}

.cioe-mil-explosion-blast.is-gone {
	opacity: 0 !important;
	animation: none;
	visibility: hidden;
}

@keyframes cioeMilExplodeWipe {
	0% {
		-webkit-clip-path: circle(0% at 50% 50%);
		clip-path: circle(0% at 50% 50%);
		opacity: 1;
	}
	55% {
		-webkit-clip-path: circle(70% at 50% 50%);
		clip-path: circle(70% at 50% 50%);
		opacity: 1;
	}
	100% {
		-webkit-clip-path: circle(78% at 50% 50%);
		clip-path: circle(78% at 50% 50%);
		opacity: 0;
	}
}

img.cioe-mil-exploding {
	transform-origin: center center;
	animation: cioeMilExplodeImage calc(1.36s + (0.08s * var(--cioe-mil-explode-intensity))) ease-out forwards;
}

img.cioe-mil-exploded {
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none;
}

@keyframes cioeMilExplodeImage {
	0% {
		opacity: 1;
		transform: translate(0, 0) rotate(0deg);
		filter: brightness(1);
	}
	12% { transform: translate(-2px, 1px) rotate(-0.45deg); }
	24% {
		opacity: 1;
		transform: translate(3px, -2px) rotate(0.5deg);
		filter: brightness(calc(1.35 + (0.2 * var(--cioe-mil-explode-intensity))));
	}
	40% {
		opacity: 0.45;
		transform: translate(-2px, 1px) rotate(-0.3deg);
		filter: brightness(calc(1.55 + (0.25 * var(--cioe-mil-explode-intensity))));
	}
	58% {
		opacity: 0.12;
		transform: translate(1px, -1px) rotate(0.15deg);
	}
	100% {
		opacity: 0;
		transform: translate(0, 0) rotate(0deg);
		filter: brightness(calc(1.7 + (0.3 * var(--cioe-mil-explode-intensity))));
	}
}

/* Editor preview: hold a mid-blast frame without vanishing the image. */
.cioe-pack-preview-active img.cioe-mil-exploding.is-preview,
.cioe-mil-explosion-layer.is-preview ~ img.cioe-mil-exploding.is-preview,
img.cioe-mil-exploding.is-preview {
	animation: none;
	opacity: 1;
	visibility: visible;
	filter: brightness(1.08) saturate(1.05);
	transform: none;
}

.cioe-pack-preview-active .cioe-mil-explosion-layer.is-preview .cioe-mil-explosion-blast,
.cioe-mil-explosion-layer.is-preview .cioe-mil-explosion-blast {
	animation: cioeMilExplodePreviewPulse 2.2s ease-in-out infinite alternate;
	-webkit-clip-path: circle(55% at 50% 50%);
	clip-path: circle(55% at 50% 50%);
	opacity: 1;
	visibility: visible;
}

@keyframes cioeMilExplodePreviewPulse {
	from {
		-webkit-clip-path: circle(42% at 50% 50%);
		clip-path: circle(42% at 50% 50%);
		opacity: 0.88;
	}
	to {
		-webkit-clip-path: circle(62% at 50% 50%);
		clip-path: circle(62% at 50% 50%);
		opacity: 1;
	}
}

.cioe-mil-bino-layer {
	display: block;
	pointer-events: none;
	--cioe-bino-x: 50%;
	--cioe-bino-y: 50%;
	--cioe-bino-frame-w: 220px;
	--cioe-bino-frame-h: 122px;
	--cioe-bino-intensity: 1;
	--cioe-bino-mask: none;
	z-index: 25;
	overflow: hidden;
}

/* Soft darkened surround — optics sit on top as the only window. */
.cioe-mil-bino-vignette {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	z-index: 1;
}

/* One moving box: glass mask + outline are both children (cannot drift). */
.cioe-mil-bino-optics {
	position: absolute;
	left: var(--cioe-bino-x);
	top: var(--cioe-bino-y);
	width: var(--cioe-bino-frame-w);
	height: var(--cioe-bino-frame-h);
	transform: translate(-50%, -50%);
	z-index: 2;
	pointer-events: none;
	transition: width 0.12s ease-out, height 0.12s ease-out;
}

.cioe-mil-bino-mag {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	filter:
		sepia(1)
		hue-rotate(68deg)
		saturate(calc(2.2 + (1.6 * var(--cioe-bino-intensity))))
		brightness(calc(0.85 + (0.12 * var(--cioe-bino-intensity))))
		contrast(calc(1.15 + (0.18 * var(--cioe-bino-intensity))));
	-webkit-mask-image: var(--cioe-bino-mask);
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: var(--cioe-bino-mask);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: center;
}

.cioe-mil-bino-frame {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	pointer-events: none;
}

.cioe-mil-scope-layer {
	display: block;
	pointer-events: none;
	--cioe-scope-r: 120px;
	--cioe-scope-x: 50%;
	--cioe-scope-y: 50%;
	z-index: 24;
}

.cioe-mil-scope-vignette {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	/* Same radius as mag + ring — no grey annulus / double edge. */
	-webkit-mask: radial-gradient(
		circle var(--cioe-scope-r) at var(--cioe-scope-x) var(--cioe-scope-y),
		transparent 0,
		transparent 100%,
		#000 100%
	);
	mask: radial-gradient(
		circle var(--cioe-scope-r) at var(--cioe-scope-x) var(--cioe-scope-y),
		transparent 0,
		transparent 100%,
		#000 100%
	);
}

.cioe-mil-scope-mag {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center center;
	filter: contrast(1.15) saturate(1.1);
	-webkit-clip-path: circle(var(--cioe-scope-r) at var(--cioe-scope-x) var(--cioe-scope-y));
	clip-path: circle(var(--cioe-scope-r) at var(--cioe-scope-x) var(--cioe-scope-y));
}

.cioe-mil-scope-ring {
	position: absolute;
	left: var(--cioe-scope-x);
	top: var(--cioe-scope-y);
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: calc(var(--cioe-scope-r) * 2);
	height: calc(var(--cioe-scope-r) * 2);
	border-radius: 50%;
	border: 0;
	/* One metal stroke on the shared radius — no second box-border ring. */
	box-shadow:
		inset 0 0 22px rgba(0, 0, 0, 0.55),
		0 0 0 3px rgba(20, 20, 20, 0.92);
	overflow: visible;
	background: transparent;
}

.cioe-mil-scope-reticle {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(transparent calc(50% - 1px), rgba(0, 0, 0, 0.85) calc(50% - 1px), rgba(0, 0, 0, 0.85) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, 0.85) calc(50% - 1px), rgba(0, 0, 0, 0.85) calc(50% + 1px), transparent calc(50% + 1px));
}

.cioe-mil-scope-ticks {
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	background:
		repeating-conic-gradient(from -90deg, rgba(0, 0, 0, 0.75) 0 0.6deg, transparent 0.6deg 6deg);
	mask: radial-gradient(circle, transparent 58%, #000 59%);
	-webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
}

.cioe-mil-camo-layer-wrap {
	z-index: 20;
}

.cioe-mil-camo-layer {
	position: absolute;
	inset: 0;
	transition: opacity 0.45s ease;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.cioe-mil-camo-layer.is-visible {
	opacity: var(--cioe-mil-camo-opacity, 1);
}

.cioe-mil-camo-layer.is-hidden {
	opacity: 0;
}

/* Decode — cipher wall + Start Decode CTA (military pack only). */
@font-face {
	font-family: "CIOE Mil Stencil";
	src: url(fonts/StardosStencil-Regular.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "CIOE Mil Stencil";
	src: url(fonts/StardosStencil-Bold.ttf) format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.cioe-mil-decode-layer {
	display: block;
	pointer-events: none;
	z-index: 40;
	overflow: hidden;
	opacity: var(--cioe-decode-opacity, 1);
	background: #020812;
	transition: opacity 0.75s ease;
	/* Force cover even before image intrinsic size settles. */
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Hide the real photo while the cipher cover is active (page load → decode click). */
.cioe-mil-decode-covered img,
.cioe-media.cioe-mil-decode-covered img,
.cioe-root.cioe-mil-decode-covered img {
	opacity: 0 !important;
	visibility: hidden !important;
}

.cioe-mil-decode-covered .cioe-mil-decode-layer,
.cioe-media.cioe-mil-decode-covered .cioe-mil-decode-layer,
.cioe-root.cioe-mil-decode-covered .cioe-mil-decode-layer {
	opacity: var(--cioe-decode-opacity, 1) !important;
	visibility: visible !important;
}

.cioe-mil-decode-layer.is-fading {
	opacity: 0 !important;
}

.cioe-mil-decode-layer.is-glitching .cioe-mil-decode-canvas {
	animation: cioe-mil-decode-canvas-jitter 0.12s steps(2) infinite;
}

@keyframes cioe-mil-decode-canvas-jitter {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-2px, 1px); }
	50% { transform: translate(2px, -1px); }
	75% { transform: translate(-1px, 2px); }
	100% { transform: translate(0, 0); }
}

.cioe-mil-decode-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}

.cioe-mil-decode-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 72% 68% at 50% 50%,
		transparent 40%,
		rgba(0, 8, 20, 0.35) 75%,
		rgba(0, 4, 12, 0.72) 100%
	);
	z-index: 2;
	transition: opacity 0.75s ease;
}

.cioe-mil-decode-cta {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	margin: 0;
	padding: 0.35em 0.55em;
	border: 2px solid rgba(190, 230, 255, 0.85);
	background: rgba(2, 10, 22, 0.55);
	color: #e8f6ff;
	font-family: "CIOE Mil Stencil", "Arial Black", Impact, sans-serif;
	font-weight: 700;
	font-size: clamp(1.15rem, 4.2vw, 2.35rem);
	letter-spacing: 0.18em;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	text-shadow:
		0 0 10px rgba(80, 180, 255, 0.55),
		0 1px 0 rgba(0, 0, 0, 0.85);
	box-shadow: 0 0 24px rgba(40, 140, 220, 0.25);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease, color 0.2s ease, border-color 0.2s ease;
	pointer-events: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

.cioe-mil-decode-cta.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.cioe-mil-decode-cta.is-flashing {
	animation: cioe-mil-decode-cta-flash 0.5s ease;
}

.cioe-mil-decode-cta.is-decoding {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	color: #b8ffd0;
	border-color: rgba(120, 255, 180, 0.9);
	text-shadow:
		0 0 14px rgba(80, 255, 160, 0.65),
		0 1px 0 rgba(0, 0, 0, 0.85);
}

.cioe-mil-decode-cta.is-fading {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.75s ease, visibility 0.75s ease;
}

@keyframes cioe-mil-decode-cta-flash {
	0% { opacity: 1; filter: brightness(1); }
	15% { opacity: 0.15; filter: brightness(2.4); }
	30% { opacity: 1; filter: brightness(1.6); }
	45% { opacity: 0.25; filter: brightness(2.2); }
	60% { opacity: 1; filter: brightness(1.3); }
	80% { opacity: 0.4; filter: brightness(1.9); }
	100% { opacity: 1; filter: brightness(1); }
}