/*
 * CYBERSMART-owned Tactical compass instrument.
 * Visual contract copied from the live /de/tactical/ implementation on
 * 2026-08-17. The frame applies the approved compact area-hero scale.
 */

/* stylelint-disable rule-empty-line-before -- Prettier removes leading blank lines inside at-rules. */

.cs-brand-instrument-frame {
	--cs-instrument-scale: 0.6;
	--cs-instrument-logo-diameter: 167.7px;

	position: relative;
	width: 14.625rem;
	max-width: 100%;
	aspect-ratio: 1;
	justify-self: start;
	margin-inline-start: calc(-7.25rem + 15px);
	inset-block-start: 0;
}

.cs-brand-instrument-frame .cst-instrument {
	--cst-bearing-radius: 165px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: grid;
	width: 390px;
	aspect-ratio: 1;
	place-items: center;
	isolation: isolate;
	transform: scale(var(--cs-instrument-scale));
	transform-origin: top left;
}

@media (max-width: 64rem) {
	.cs-brand-instrument-frame {
		margin-inline-start: -2.5rem;
		inset-block-start: 0;
	}
}

@media (max-width: 48rem) {
	.cs-brand-instrument-frame {
		--cs-instrument-scale: 0.410256;

		width: 10rem;
		height: 1.5rem;
		aspect-ratio: auto;
		justify-self: start;
		margin-inline-start: 0;
		inset-block-start: 20px;
		inset-inline-start: -5px;
		overflow: visible;
	}

	.cs-brand-instrument-frame .cst-instrument {
		top: 50%;
		transform: scale(var(--cs-instrument-scale)) translateY(-45%);
	}
}

@media (max-width: 35rem) {
	.cs-brand-instrument-frame {
		--cs-instrument-scale: 0.164103;

		width: 4rem;
	}

	.cs-brand-instrument-frame .cst-instrument {
		transform: scale(var(--cs-instrument-scale)) translateY(-45%);
	}
}

.cs-brand-instrument-frame .cst-instrument::before {
	position: absolute;
	z-index: -2;
	inset: 2%;
	border-radius: 50%;
	background: repeating-conic-gradient(
		from -0.25deg,
		rgb(218 226 231 / 23%) 0 0.48deg,
		rgb(0 0 0 / 40%) 0.45deg 0.9deg,
		transparent 0.9deg 5deg
	);
	content: "";
	filter: drop-shadow(-1px -1px 0 rgb(255 255 255 / 12%))
		drop-shadow(1px 1px 0 rgb(0 0 0 / 96%))
		drop-shadow(0 0 12px rgb(195 207 214 / 5.5%));
	mask-image: radial-gradient(
		circle,
		transparent 0 79%,
		#000 79% 82%,
		transparent 82% 87%,
		#000 87% 88%,
		transparent 88%
	);
	opacity: 0.96;
	animation: cst-instrument-breathe 22s ease-in-out infinite alternate;
}

.cs-brand-instrument-frame .cst-instrument::after {
	position: absolute;
	z-index: -1;
	inset: 7%;
	border: 1px solid rgb(207 217 222 / 30%);
	border-radius: 50%;
	box-shadow:
		-1px -1px 0 rgb(255 255 255 / 10%),
		1px 1px 0 rgb(0 0 0 / 90%),
		inset -1px -1px 0 rgb(255 255 255 / 7.5%),
		inset 1px 1px 0 rgb(0 0 0 / 82%),
		0 0 22px rgb(181 196 204 / 3.5%);
	content: "";
}

.cs-brand-instrument-frame .cst-logo-stage {
	position: relative;
	display: grid;
	width: 86%;
	aspect-ratio: 1;
	place-items: center;
}

.cs-brand-instrument-frame .cst-logo-stage::before {
	position: absolute;
	inset: 4%;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 50%;
	box-shadow:
		inset 0 0 34px rgb(0 0 0 / 50%),
		inset -1px -1px 0 rgb(255 255 255 / 4.5%),
		0 0 52px rgb(0 0 0 / 30%);
	content: "";
}

.cs-brand-instrument-frame .cst-compass-diamond {
	position: absolute;
	z-index: 0;
	width: 72%;
	aspect-ratio: 1;
	border: 1px dashed rgb(207 217 222 / 28%);
	box-shadow:
		-1px -1px 0 rgb(255 255 255 / 7.5%),
		1px 1px 0 rgb(0 0 0 / 82%),
		inset -1px -1px 0 rgb(255 255 255 / 2.5%),
		inset 1px 1px 0 rgb(0 0 0 / 60%);
	transform: rotate(45deg);
}

.cs-brand-instrument-frame .cst-technical-ring {
	position: absolute;
	z-index: 1;
	width: 61%;
	aspect-ratio: 1;
	border: 1px dashed rgb(207 217 222 / 23%);
	border-radius: 50%;
	box-shadow:
		inset 0 0 22px rgb(0 0 0 / 28%),
		0 0 18px rgb(255 255 255 / 1.8%);
}

.cs-brand-instrument-frame .cst-technical-ring::before,
.cs-brand-instrument-frame .cst-technical-ring::after {
	position: absolute;
	background: rgb(211 220 225 / 10%);
	content: "";
}

.cs-brand-instrument-frame .cst-technical-ring::before {
	top: 50%;
	left: -8%;
	width: 116%;
	height: 1px;
}

.cs-brand-instrument-frame .cst-technical-ring::after {
	top: -8%;
	left: 50%;
	width: 1px;
	height: 116%;
}

.cs-brand-instrument-frame .cst-compass-logo {
	position: relative;
	z-index: 2;
	width: var(--cs-instrument-logo-diameter);
	aspect-ratio: 1;
	color: #9ba6ad;
	filter: drop-shadow(0 1px 0 rgb(255 255 255 / 12%))
		drop-shadow(0 3px 16px rgb(0 0 0 / 58%))
		drop-shadow(0 0 22px rgb(255 255 255 / 5.5%));
}

.cs-brand-instrument-frame .cst-compass-logo :is(svg, img) {
	display: block;
	width: 100%;
	height: 100%;
}

.cs-brand-instrument-frame .cst-axis {
	position: absolute;
	z-index: 1;
	background: rgb(211 220 225 / 32%);
	box-shadow:
		-1px -1px 0 rgb(255 255 255 / 4.5%),
		1px 1px 0 rgb(0 0 0 / 92%);
}

.cs-brand-instrument-frame .cst-axis.north,
.cs-brand-instrument-frame .cst-axis.south {
	left: 50%;
	width: 1px;
	height: 22px;
	transform: translateX(-50%);
}

.cs-brand-instrument-frame .cst-axis.east,
.cs-brand-instrument-frame .cst-axis.west {
	top: 50%;
	width: 22px;
	height: 1px;
	transform: translateY(-50%);
}

.cs-brand-instrument-frame .cst-axis.north {
	top: 3.2%;
}

.cs-brand-instrument-frame .cst-axis.south {
	bottom: 3.2%;
}

.cs-brand-instrument-frame .cst-axis.east {
	right: 3.2%;
}

.cs-brand-instrument-frame .cst-axis.west {
	left: 3.2%;
}

.cs-brand-instrument-frame .cst-north-index {
	position: absolute;
	z-index: 1;
	top: 7.5%;
	left: 50%;
	width: 0;
	height: 0;
	border-right: 7px solid transparent;
	border-bottom: 12px solid rgb(201 211 217 / 18%);
	border-left: 7px solid transparent;
	filter: drop-shadow(-1px -1px 0 rgb(255 255 255 / 5%))
		drop-shadow(1px 1px 0 rgb(0 0 0 / 94%));
	transform: translateX(-50%);
}

.cs-brand-instrument-frame .cst-bearing {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 3px;
	margin: -1.5px 0 0 -12px;
	border-radius: 2px;
	background: rgb(242 122 26 / 78%);
	box-shadow: 0 0 14px rgb(242 122 26 / 30%);
	will-change: transform;
}

.cs-brand-instrument-frame .cst-bearing.one {
	animation: cst-bearing-east-sector 192s ease-in-out infinite;
}

.cs-brand-instrument-frame .cst-bearing.two {
	animation: cst-bearing-west-sector 224s ease-in-out -28s infinite;
}

.cs-brand-instrument-frame .cst-reference-marker {
	position: absolute;
	z-index: 3;
	width: 7px;
	height: 7px;
	border: 1px solid rgb(255 183 112 / 52%);
	border-radius: 50%;
	background: rgb(242 122 26 / 96%);
	box-shadow:
		0 0 0 4px rgb(242 122 26 / 8%),
		0 0 12px rgb(242 122 26 / 52%);
	transition: translate 2.8s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

.cs-brand-instrument-frame .cst-reference-marker.two-oclock {
	top: 29.5%;
	left: 84.5%;
	animation: cst-reference-pulse 6s ease-in-out infinite;
}

.cs-brand-instrument-frame .cst-reference-marker.eight-oclock {
	top: 69.5%;
	left: 14.5%;
	animation: cst-reference-pulse-alt 6s ease-in-out -2.2s infinite;
}

.cs-brand-instrument-frame .cst-reference-marker.green-target {
	top: 82%;
	left: 50%;
	border-color: rgb(139 239 178 / 42%);
	background: rgb(66 185 108 / 76%);
	box-shadow:
		0 0 0 3px rgb(60 210 116 / 5%),
		0 0 9px rgb(60 210 116 / 30%);
	animation: cst-reference-pulse-green 3.2s ease-in-out -0.9s infinite;
}

.cs-wp15-fixture .cs-brand-instrument-frame .cst-instrument::before,
.cs-wp15-fixture .cs-brand-instrument-frame .cst-bearing,
.cs-wp15-fixture .cs-brand-instrument-frame .cst-reference-marker {
	animation: none;
}

.cs-brand-instrument-frame .cst-target-trails {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.cs-brand-instrument-frame .cst-target-trails polyline {
	fill: none;
	stroke: rgb(174 185 191 / 30%);
	stroke-width: 1;
	stroke-dasharray: 3 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

@keyframes cst-instrument-breathe {
	from {
		opacity: 0.82;
		transform: scale(0.997);
	}

	to {
		opacity: 0.96;
		transform: scale(1.004);
	}
}

@keyframes cst-bearing-east-sector {
	0%,
	100% {
		transform: rotate(-90deg) translateX(var(--cst-bearing-radius));
	}

	12.5%,
	87.5% {
		transform: rotate(-60deg) translateX(var(--cst-bearing-radius));
	}

	25%,
	75% {
		transform: rotate(-30deg) translateX(var(--cst-bearing-radius));
	}

	37.5%,
	62.5% {
		transform: rotate(0deg) translateX(var(--cst-bearing-radius));
	}

	50% {
		transform: rotate(30deg) translateX(var(--cst-bearing-radius));
	}
}

@keyframes cst-bearing-west-sector {
	0%,
	100% {
		transform: rotate(150deg) translateX(var(--cst-bearing-radius));
	}

	12.5%,
	87.5% {
		transform: rotate(180deg) translateX(var(--cst-bearing-radius));
	}

	25%,
	75% {
		transform: rotate(210deg) translateX(var(--cst-bearing-radius));
	}

	37.5%,
	62.5% {
		transform: rotate(240deg) translateX(var(--cst-bearing-radius));
	}

	50% {
		transform: rotate(270deg) translateX(var(--cst-bearing-radius));
	}
}

@keyframes cst-reference-pulse {
	0%,
	100% {
		opacity: 0.4;
		transform: scale(0.94);
	}

	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

@keyframes cst-reference-pulse-alt {
	0%,
	100% {
		opacity: 0.48;
		transform: scale(0.96);
	}

	50% {
		opacity: 0.94;
		transform: scale(1.07);
	}
}

@keyframes cst-reference-pulse-green {
	0%,
	100% {
		filter: brightness(0.78);
		opacity: 0.3;
	}

	45%,
	65% {
		filter: brightness(0.98);
		opacity: 0.78;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-brand-instrument-frame .cst-instrument::before,
	.cs-brand-instrument-frame .cst-bearing,
	.cs-brand-instrument-frame .cst-reference-marker {
		animation: none !important;
		transition: none !important;
	}
}

/* stylelint-enable rule-empty-line-before */