/*
 * CYBERSMART area instruments for Competition and Resilience.
 * Both retain the shared signet while the surrounding visual identifies the area.
 */

/* stylelint-disable selector-class-pattern, rule-empty-line-before -- Area component contracts and Prettier formatting. */

.cs-area--competition .cs-brand-masthead {
	background:
		var(--cs-area-motif),
		radial-gradient(
			circle at 73% 42%,
			rgb(86 181 255 / 9%),
			transparent 31%
		),
		linear-gradient(122deg, #1b2937 0%, #101922 48%, #243544 100%);
}

.cs-area--competition
	:is(
		.cs-utility-bar__context,
		.cs-utility-links a,
		.cs-language-switcher a,
		.cs-utility-bar__toggle,
		.cs-utility-bar__search-toggle
	) {
	color: #edf2f3;
}

.cs-area--competition .cs-utility-bar {
	--cs-area-accent: #56b5ff;
}

.cs-area--competition
	:is(.cs-utility-bar__toggle, .cs-utility-bar__search-toggle) {
	border-color: var(--cs-color-line);
	background: var(--cs-color-surface);
}

.cs-area--competition .cs-utility-links__disabled {
	color: #79858a;
}

.cs-area--competition .cs-brand-masthead::before {
	background:
		linear-gradient(
			112deg,
			transparent 0 38%,
			rgb(86 181 255 / 4.5%) 38.2% 51%,
			transparent 51.2%
		),
		linear-gradient(115deg, #1b2937 0%, #101922 50%, #243544 100%);
	filter: saturate(0.82) contrast(1.01);
}

.cs-area--competition .cs-brand-masthead::after {
	background: linear-gradient(
		112deg,
		transparent 34%,
		rgb(86 181 255 / 6.5%) 46%,
		rgb(244 247 250 / 2.4%) 53%,
		transparent 65%
	);
	mix-blend-mode: normal;
}

.cs-area--resilience .cs-brand-masthead {
	background:
		var(--cs-area-motif),
		radial-gradient(
			circle at 73% 42%,
			rgb(180 192 181 / 8%),
			transparent 31%
		),
		linear-gradient(122deg, #303538 0%, #242729 48%, #3a4143 100%);
}

.cs-area--resilience .cs-brand-masthead::before {
	background:
		linear-gradient(
			112deg,
			transparent 0 38%,
			rgb(255 255 255 / 3.5%) 38.2% 51%,
			transparent 51.2%
		),
		linear-gradient(115deg, #303538 0%, #242729 50%, #3a4143 100%);
}

.cs-area--resilience
	:is(
		.cs-utility-bar__context,
		.cs-utility-links a,
		.cs-language-switcher a,
		.cs-utility-bar__toggle,
		.cs-utility-bar__search-toggle
	) {
	color: #edf2f3;
}

.cs-area--resilience .cs-utility-bar {
	--cs-area-accent: #b4c0b5;
}

.cs-area--resilience
	:is(.cs-utility-bar__toggle, .cs-utility-bar__search-toggle) {
	border-color: rgb(237 242 243 / 18%);
	background: var(--cs-color-surface);
}

.cs-area--resilience .cs-utility-links__disabled {
	color: #87989e;
}

@media (max-width: 850px) {
	.cs-area--resilience .cs-utility-bar__actions {
		--cs-area-accent: #b4c0b5;

		color: var(--cs-color-text);
	}

	.cs-area--resilience
		.cs-utility-bar__actions
		:is(.cs-utility-links a, .cs-language-switcher a) {
		color: var(--cs-color-text);
	}

	.cs-area--resilience .cs-utility-bar__actions .cs-utility-links__disabled {
		color: var(--cs-color-muted);
	}
}

/* Area base colors must not suppress the shared utility-link feedback. */
:is(.cs-area--competition, .cs-area--resilience)
	.cs-utility-bar__actions
	:is(.cs-utility-links a, .cs-language-switcher a):is(
		:hover,
		:focus-visible
	) {
	color: var(--cs-area-accent);
}

.cs-brand-instrument-frame :is(.csc-instrument, .csr-instrument) {
	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;
}

.cs-brand-instrument-frame :is(.csc-logo-stage, .csr-logo-stage) {
	position: relative;
	z-index: 3;
	display: grid;
	width: 50%;
	aspect-ratio: 1;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--cs-area-accent) 34%, transparent);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--cs-color-surface) 82%, transparent),
		color-mix(in srgb, var(--cs-color-canvas) 96%, transparent) 72%
	);
	box-shadow:
		inset 0 0 32px rgb(0 0 0 / 55%),
		0 0 44px color-mix(in srgb, var(--cs-area-accent) 9%, transparent);
}

.cs-brand-instrument-frame :is(.csc-brand-logo, .csr-brand-logo) {
	position: relative;
	z-index: 2;
	display: block;
	width: var(--cs-instrument-logo-diameter);
	aspect-ratio: 1;
	color: #aab3b8;
	filter: drop-shadow(0 2px 12px rgb(0 0 0 / 68%));
}

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

/* Shared 167.7px signet on the 390px canvas; rim leaves room for the logo. */

/* Competition: two contour rings and one logo rim; scale-aware ~1px strokes. */
.cs-brand-instrument-frame .csc-instrument {
	--csc-contour-width: calc(1px / var(--cs-instrument-scale));
}

.cs-brand-instrument-frame .csc-logo-stage {
	border: var(--csc-contour-width) solid rgb(86 181 255 / 16%);
	background: #101922;
	box-shadow: none;
}

.cs-brand-instrument-frame .csc-brand-logo {
	color: #b8c2c7;
	filter: none;
}

.csc-instrument::before {
	position: absolute;
	inset: 7%;
	border: var(--csc-contour-width) solid rgb(86 181 255 / 22%);
	border-radius: 50%;
	content: "";
}

.csc-target-rings {
	position: absolute;
	z-index: 0;
	width: 66%;
	aspect-ratio: 1;
	border: var(--csc-contour-width) solid rgb(86 181 255 / 28%);
	border-radius: 50%;
}

.csc-target-axis {
	position: absolute;
	z-index: 1;
}

.csc-target-axis--horizontal {
	width: 96%;
	height: var(--csc-contour-width);
	background: linear-gradient(
		90deg,
		rgb(86 181 255 / 14%) 0 27%,
		transparent 27% 73%,
		rgb(86 181 255 / 14%) 73%
	);
}

.csc-target-axis--vertical {
	width: var(--csc-contour-width);
	height: 96%;
	background: linear-gradient(
		0deg,
		rgb(86 181 255 / 14%) 0 27%,
		transparent 27% 73%,
		rgb(86 181 255 / 14%) 73%
	);
}

.csc-target-index {
	position: absolute;
	z-index: 2;
	background: rgb(86 181 255 / 35%);
}

.csc-target-index--north,
.csc-target-index--south {
	left: 50%;
	width: var(--csc-contour-width);
	height: 4%;
	transform: translateX(-50%);
}

.csc-target-index--north {
	top: 5%;
}

.csc-target-index--south {
	bottom: 5%;
}

.csc-target-index--east,
.csc-target-index--west {
	top: 50%;
	width: 4%;
	height: var(--csc-contour-width);
	transform: translateY(-50%);
}

.csc-target-index--east {
	right: 5%;
}

.csc-target-index--west {
	left: 5%;
}

.csc-impact {
	position: absolute;
	z-index: 4;
	top: var(--csc-impact-y, 50%);
	left: var(--csc-impact-x, 50%);
	display: block;
	width: 19px;
	aspect-ratio: 1;
	border-radius: 48% 52% 46% 54%;
	background:
		radial-gradient(circle at 47% 45%, #020304 0 23%, transparent 25%),
		radial-gradient(
			circle at 50% 50%,
			rgb(0 0 0 / 96%) 0 35%,
			#354047 38% 47%,
			#0b0f12 49% 61%,
			transparent 64%
		);
	filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 80%));
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.8)
		rotate(var(--csc-impact-rotation, 0deg));
	transition:
		opacity 180ms ease-out,
		transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.csc-impact::before,
.csc-impact::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.csc-impact::before {
	inset: -5px;
	background: linear-gradient(
		135deg,
		transparent 10%,
		rgb(167 180 187 / 40%) 43% 48%,
		transparent 51%
	);
	clip-path: polygon(
		50% 0,
		58% 30%,
		82% 11%,
		70% 38%,
		100% 47%,
		68% 55%,
		88% 86%,
		58% 68%,
		48% 100%,
		41% 69%,
		10% 88%,
		31% 57%,
		0 48%,
		32% 40%,
		12% 13%,
		41% 31%
	);
	opacity: 0.54;
}

.csc-impact::after {
	inset: -2px;
	border: 1px solid rgb(184 195 201 / 34%);
	border-radius: 43% 57% 51% 49%;
	box-shadow: inset 1px 1px 2px rgb(255 255 255 / 15%);
}

.csc-impact.is-visible {
	opacity: 0.92;
	transform: translate(-50%, -50%) scale(1)
		rotate(var(--csc-impact-rotation, 0deg));
}

/* Resilience: provisions, energy, communication and mobility around the signet. */
.csr-instrument::before {
	position: absolute;
	inset: 4%;
	border: 1px solid color-mix(in srgb, var(--cs-area-accent) 22%, transparent);
	background:
		linear-gradient(
			90deg,
			transparent 49.8%,
			color-mix(in srgb, var(--cs-area-accent) 13%, transparent) 50%,
			transparent 50.2%
		),
		linear-gradient(
			transparent 49.8%,
			color-mix(in srgb, var(--cs-area-accent) 13%, transparent) 50%,
			transparent 50.2%
		),
		repeating-linear-gradient(
			135deg,
			transparent 0 28px,
			color-mix(in srgb, var(--cs-area-accent) 7%, transparent) 29px 30px
		);
	box-shadow:
		inset 0 0 46px rgb(0 0 0 / 48%),
		0 0 32px rgb(0 0 0 / 25%);
	content: "";
	transform: rotate(45deg);
}

.csr-frame {
	position: absolute;
	border: 1px solid color-mix(in srgb, var(--cs-area-accent) 27%, transparent);
}

.csr-frame--outer {
	width: 83%;
	aspect-ratio: 1;
	border-style: dashed;
	border-radius: 16%;
	transform: rotate(45deg);
}

.csr-frame--middle {
	width: 68%;
	aspect-ratio: 1;
	border-radius: 50%;
}

.csr-frame--inner {
	width: 54%;
	aspect-ratio: 1;
	border-radius: 22%;
	transform: rotate(45deg);
}

.csr-link {
	position: absolute;
	z-index: 1;
	background: color-mix(in srgb, var(--cs-area-accent) 24%, transparent);
}

.csr-link--horizontal {
	width: 91%;
	height: 1px;
}

.csr-link--vertical {
	width: 1px;
	height: 91%;
}

.csr-node {
	position: absolute;
	z-index: 2;
	display: block;
	width: 40px;
	height: auto;
	aspect-ratio: 1;
	color: color-mix(in srgb, var(--cs-area-accent) 68%, transparent);
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
	transform: translate(-50%, -50%);
	animation: csr-resource-fade 7s ease-in-out infinite;
}

.csr-node--north-west {
	top: 20%;
	left: 20%;
}

.csr-node--north-east {
	top: 20%;
	left: 80%;
	animation-duration: 9s;
	animation-delay: -2s;
}

.csr-node--south-east {
	top: 80%;
	left: 80%;
	animation-duration: 13s;
	animation-delay: -6s;
}

.csr-node--south-west {
	top: 80%;
	left: 20%;
	animation-duration: 11s;
	animation-delay: -4s;
}

/* Keep the aligned desktop instrument clear of the longer editorial copy. */
@media (min-width: 64.001rem) {
	.csr-node--north-west,
	.csr-node--south-west {
		left: 32%;
	}

	.csr-node--north-east,
	.csr-node--south-east {
		left: 68%;
	}
}

/* The approved contour color remains the ceiling; only fade below it. */
@keyframes csr-resource-fade {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

/* Compensate the instrument scale: ~20px resource contours on tablets. */
@media (max-width: 48rem) {
	.cs-area--resilience .cs-brand-instrument-frame {
		inset-block-start: 10px;
	}

	.csr-node {
		width: 48px;
	}

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

}

/* Keep all four motifs legible (~17px), even on the 64px instrument. */
@media (max-width: 35rem) {
	.cs-area--resilience .cs-brand-masthead h1 {
		font-size: clamp(0.8125rem, 4.1vw, 1rem);
	}

	.csr-node {
		width: 104px;
	}

	.cs-brand-instrument-frame :is(.csc-instrument, .csr-instrument) {
		transform: scale(var(--cs-instrument-scale)) translateY(-45%);
	}

}

@media (prefers-reduced-motion: reduce) {
	.csr-node {
		animation: none;
		opacity: 1;
	}

	.csc-impact {
		opacity: 0.72;
		transform: translate(-50%, -50%) scale(1)
			rotate(var(--csc-impact-rotation, 0deg));
		transition: none;
	}
}

/* stylelint-enable selector-class-pattern, rule-empty-line-before */