/*
 * Shared CSS for the two "device + zones + huge watermark" widgets:
 *  - cw-zones-device
 *  - cw-aajt-device
 *
 * Three rule groups are byte-identical between the two prior widget stylesheets and now
 * live here as a shared dependency:
 *  1. .cw-zones-huge — giant background watermark text (also targeted by GSAP via
 *     `.gsap-huge-text` for horizontal scrub motion).
 *  2. .cw-zones-section .human-grid .signal-tag — zone hotspots positioned over the human
 *     model figure (responsive top/left CSS vars, gradient pseudo-dot, hover/active states).
 *  3. .cw-zones-section .zone-mini-card / .cw-zone-mini__* — application/info mini-cards
 *     under the figure (glass surface, accent-tinted icon wells).
 *
 * Both widget stylesheets register this file as a deps_before entry, so per-widget rules
 * cascade after these shared rules — preserving the cascade order that existed when these
 * blocks lived inline in each widget's CSS.
 */

/* ---------- Huge background watermark text ---------- */

.cw-zones-huge {
	display: none;
	position: absolute;
	top: 10%;
	left: -5%;
	z-index: 0;
	pointer-events: none;
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(4rem, 15vw, 15rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.02);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.cw-zones-huge {
		display: block;
	}
}

/* ---------- Signal tag (zone hotspot) ---------- */

.cw-zones-section .human-grid .signal-tag {
	top: var(--cw-signal-top-sm, var(--cw-signal-top, 40%));
	left: var(--cw-signal-left-sm, var(--cw-signal-left, 50%));
}

@media (min-width: 768px) {
	.cw-zones-section .human-grid .signal-tag {
		top: var(--cw-signal-top-md, var(--cw-signal-top-sm, var(--cw-signal-top, 40%)));
		left: var(--cw-signal-left-md, var(--cw-signal-left-sm, var(--cw-signal-left, 50%)));
	}
}

@media (min-width: 1025px) {
	.cw-zones-section .human-grid .signal-tag {
		top: var(--cw-signal-top, 40%);
		left: var(--cw-signal-left, 50%);
	}
}

.cw-zones-section .human-grid .signal-tag {
	--cw-signal-dot-offset: 14px;
	position: absolute;
	padding: 0.35rem 0.7rem;
	touch-action: manipulation;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: color-mix(in srgb, var(--cw-surface-2, #1c1c1c) 72%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--cw-text, #dce0ea);
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 5;
	cursor: pointer;
	width: max-content;
	max-width: calc(100% - 1rem);
	white-space: nowrap;
	transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease, border-color 0.28s ease;
	animation: cwHeroTagFloat 4.8s ease-in-out infinite;
	transform: translate(-50%, -50%);
}

.cw-zones-section .human-grid .signal-tag::after {
	content: "";
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: linear-gradient(
		180deg,
		var(--cw-accent-primary, #dc2626) 0%,
		color-mix(in srgb, var(--cw-accent-primary, #dc2626) 60%, transparent) 100%
	);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--cw-accent-primary, #dc2626) 16%, transparent);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.cw-zones-section .human-grid .signal-tag.tag-left::after {
	right: calc(-1 * var(--cw-signal-dot-offset, 14px));
}

.cw-zones-section .human-grid .signal-tag.tag-right::after {
	left: calc(-1 * var(--cw-signal-dot-offset, 14px));
}

.cw-zones-section .human-grid .signal-tag.is-active,
.cw-zones-section .human-grid .signal-tag:hover,
.cw-zones-section .human-grid .signal-tag:focus-visible {
	transform: translate(-50%, -50%) translateY(-2px) scale(1.03);
	border-color: color-mix(in srgb, var(--cw-accent-primary, #dc2626) 65%, transparent);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--cw-accent-primary, #dc2626) 28%, transparent);
	background: color-mix(in srgb, var(--cw-surface-2, #1c1c1c) 90%, transparent);
	outline: none;
}

@media (max-width: 767px) {
	.cw-zones-section .cw-zones-human-wrap {
		overflow: clip;
		width: 100%;
	}
	.cw-zones-section .human-grid {
		width: min(420px, 90%);
		margin-left: auto;
		margin-right: auto;
	}
	.cw-zones-section .human-grid .signal-tag {
		font-size: 0.66rem;
		padding: 0.3rem 0.55rem;
	}
}

/* ---------- Zone mini card (applications / info tile) ---------- */

.cw-zones-section .zone-mini-card {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	text-align: left;
	width: 100%;
	background: color-mix(in srgb, var(--cw-surface-2, #1c1c1c) 50%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 1.25rem;
	cursor: pointer;
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
	color: inherit;
	box-sizing: border-box;
}

.cw-zones-section .zone-mini-card:hover,
.cw-zones-section .zone-mini-card.active {
	border-color: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 45%, transparent);
	background: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 10%, transparent);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 0 40px color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 5%, transparent);
}

.cw-zone-mini__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.cw-zone-mini__icon {
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cw-zone-mini__icon.red {
	background: var(--cw-accent-primary-soft, rgba(220, 38, 38, 0.2));
	color: var(--cw-accent-primary, #dc2626);
}

.cw-zone-mini__icon.purple {
	background: var(--cw-accent-secondary-soft, rgba(0, 183, 250, 0.15));
	color: var(--cw-accent-secondary, #00b7fa);
}

.cw-zone-mini__icon .elementor-icon svg,
.cw-zone-mini__icon svg {
	width: 1rem;
	height: 1rem;
	display: block;
	fill: currentColor;
}