/**
 * SOC Command Center Showcase Section Styles — WP SOC Theme
 * ============================================================
 * Reused as-is from the design system: .wp-soc-section(--surface),
 * .wp-soc-section-pad, .wp-soc-container, .wp-soc-bg-grid,
 * .wp-soc-bg-glow, .wp-soc-section-label(__dot), .wp-soc-section-title,
 * .wp-soc-section-description, .wp-soc-btn(--primary/--ghost/__icon),
 * .wp-soc-btn-group, .wp-soc-divider, .wp-soc-text-h2/-label/-body/
 * -primary, .wp-soc-fade-up + .is-visible.
 *
 * Only what those files don't already provide is defined below: the
 * 55/45 layout grid, the capability highlight list, and the cinematic
 * SOC scene layout. Every value still resolves to an existing token —
 * no new custom properties are introduced.
 *
 * Note: this section intentionally does not repeat the operational
 * statistics (15+ years, 500+ assessments, 24/7, 99.9%) — they already
 * appear with an animated count-up treatment in Why Choose Us, directly
 * below on the homepage.
 * ============================================================
 */

/* ------------------------------------------------------------ *
 * Ambient background glow placement
 * (.wp-soc-bg-glow from design-system.css supplies the look; size
 * and position are section-specific, same pattern the Hero used.)
 * ------------------------------------------------------------ */

.wp-soc-showcase__glow {
	width: 620px;
	height: 620px;
	top: -180px;
	right: -200px;
	animation: wp-soc-showcase-drift 30s ease-in-out infinite;
}

@keyframes wp-soc-showcase-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-20px, 18px); }
}

/* ------------------------------------------------------------ *
 * Layout — 55 / 45 two-column grid
 * ------------------------------------------------------------ */

.wp-soc-showcase__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 55fr 45fr;
	align-items: center;
	gap: var(--wp-soc-space-8);
}

.wp-soc-showcase__content {
	max-width: var(--wp-soc-container-max-prose);
}

/* ------------------------------------------------------------ *
 * Capability highlights (2 × 2 on desktop)
 * ------------------------------------------------------------ */

.wp-soc-showcase__highlights {
	margin-top: var(--wp-soc-space-6);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp-soc-space-4);
}

.wp-soc-showcase__highlight {
	display: flex;
	align-items: center;
	gap: var(--wp-soc-space-3);
}

.wp-soc-showcase__highlight-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--wp-soc-radius-sm);
	background: rgba(var(--wp-soc-color-primary-rgb), 0.08);
	color: var(--wp-soc-color-primary);
}

.wp-soc-showcase__highlight .wp-soc-text-body {
	color: var(--wp-soc-color-text);
	font-weight: var(--wp-soc-weight-medium);
}

.wp-soc-showcase__content .wp-soc-btn-group {
	margin-top: var(--wp-soc-space-7);
}

/* ------------------------------------------------------------ *
 * Cinematic SOC scene
 * ------------------------------------------------------------ */

.wp-soc-showcase__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 520px;
}

.wp-soc-showcase-scene {
	position: relative;
	width: 100%;
	max-width: 460px;
	height: 100%;
	perspective: 1400px;
}

.wp-soc-showcase-scene__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

/* Floating particles — soft, slow, almost imperceptible */
.wp-soc-showcase-scene__particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.wp-soc-showcase-scene__particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: var(--wp-soc-radius-full);
	background: rgba(var(--wp-soc-color-primary-rgb), 0.5);
	opacity: 0;
	animation: wp-soc-showcase-particle 12s ease-in-out infinite;
}

.wp-soc-showcase-scene__particles span:nth-child(1) { left: 12%; bottom: 20%; animation-delay: 0s; }
.wp-soc-showcase-scene__particles span:nth-child(2) { left: 30%; bottom: 10%; animation-delay: -2s; }
.wp-soc-showcase-scene__particles span:nth-child(3) { left: 50%; bottom: 24%; animation-delay: -4s; }
.wp-soc-showcase-scene__particles span:nth-child(4) { left: 68%; bottom: 14%; animation-delay: -6s; }
.wp-soc-showcase-scene__particles span:nth-child(5) { left: 82%; bottom: 26%; animation-delay: -8s; }
.wp-soc-showcase-scene__particles span:nth-child(6) { left: 42%; bottom: 6%;  animation-delay: -10s; }

@keyframes wp-soc-showcase-particle {
	0%   { opacity: 0; transform: translateY(0) scale(0.8); }
	15%  { opacity: 0.7; }
	85%  { opacity: 0.4; }
	100% { opacity: 0; transform: translateY(-160px) scale(1.1); }
}

/* Curved monitoring wall */
.wp-soc-showcase-wall {
	position: absolute;
	top: 30px;
	left: 50%;
	width: 400px;
	height: 176px;
	margin-left: -200px;
	display: flex;
	justify-content: center;
	gap: 3px;
	transform-style: preserve-3d;
}

.wp-soc-showcase-wall__panel {
	position: relative;
	flex: 1 1 0;
	height: 100%;
	background:
		radial-gradient(120% 140% at 50% 0%, rgba(var(--wp-soc-color-primary-rgb), 0.14), transparent 60%),
		linear-gradient(155deg, #0b0f0e 0%, #0c0c0c 55%, #070707 100%);
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.65);
	overflow: hidden;
	animation: wp-soc-showcase-flicker 9s ease-in-out infinite;
}

.wp-soc-showcase-wall__panel::after {
	content: '';
	position: absolute;
	inset: 14% 10%;
	background: repeating-linear-gradient(
		180deg,
		rgba(var(--wp-soc-color-primary-rgb), 0.05) 0px,
		rgba(var(--wp-soc-color-primary-rgb), 0.05) 1px,
		transparent 1px,
		transparent 5px
	);
	opacity: 0.35;
	mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 90%);
}

.wp-soc-showcase-wall__panel--left {
	border-radius: var(--wp-soc-radius-md) var(--wp-soc-radius-sm) var(--wp-soc-radius-sm) var(--wp-soc-radius-md);
	transform: rotateY(24deg) translateZ(-26px);
	animation-delay: -3s;
}

.wp-soc-showcase-wall__panel--center {
	border-radius: var(--wp-soc-radius-sm);
	transform: rotateY(0deg) translateZ(4px);
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55), 0 24px 48px -20px rgba(var(--wp-soc-color-primary-rgb), 0.2);
}

.wp-soc-showcase-wall__panel--right {
	border-radius: var(--wp-soc-radius-sm) var(--wp-soc-radius-md) var(--wp-soc-radius-md) var(--wp-soc-radius-sm);
	transform: rotateY(-24deg) translateZ(-26px);
	animation-delay: -6s;
}

@keyframes wp-soc-showcase-flicker {
	0%, 92%, 100% { filter: brightness(1); }
	94%           { filter: brightness(1.06); }
	96%           { filter: brightness(0.97); }
}

/* Infrastructure / threat visualization, floating in front of the wall */
.wp-soc-showcase-network {
	position: absolute;
	top: 150px;
	left: 50%;
	width: 320px;
	margin-left: -160px;
	opacity: 0.9;
	animation: wp-soc-showcase-float 10s ease-in-out infinite;
}

@keyframes wp-soc-showcase-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

.wp-soc-showcase-network__svg {
	width: 100%;
	height: auto;
	display: block;
}

.wp-soc-showcase-network__link {
	stroke: var(--wp-soc-color-primary);
	stroke-width: 1.2;
	stroke-linecap: round;
	opacity: 0.4;
	stroke-dasharray: 5 8;
	animation: wp-soc-showcase-link-flow 4s linear infinite;
}

.wp-soc-showcase-network__link:nth-of-type(2) { animation-delay: -1s; }
.wp-soc-showcase-network__link:nth-of-type(3) { animation-delay: -2s; }
.wp-soc-showcase-network__link:nth-of-type(4) { animation-delay: -3s; }

@keyframes wp-soc-showcase-link-flow {
	to { stroke-dashoffset: -130; }
}

.wp-soc-showcase-network__node circle:first-child {
	fill: var(--wp-soc-color-primary);
}

.wp-soc-showcase-network__ring {
	fill: none;
	stroke: var(--wp-soc-color-primary);
	stroke-width: 1;
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
	animation: wp-soc-showcase-ping 3s ease-out infinite;
	animation-delay: var(--wp-soc-node-delay, 0s);
}

@keyframes wp-soc-showcase-ping {
	0%   { opacity: 0.5; transform: scale(0.3); }
	80%  { opacity: 0; transform: scale(1.6); }
	100% { opacity: 0; transform: scale(1.6); }
}

/* Analyst desks, foreground */
.wp-soc-showcase-desks {
	position: absolute;
	bottom: 20px;
	left: 50%;
	width: 420px;
	margin-left: -210px;
	z-index: 2;
}

.wp-soc-showcase-desks__svg {
	width: 100%;
	height: auto;
	display: block;
}

.wp-soc-showcase-desks__shadow {
	fill: rgba(0, 0, 0, 0.55);
}

.wp-soc-showcase-analyst__desk {
	fill: #0a0a0a;
	stroke: var(--wp-soc-color-border);
	stroke-width: 1;
}

.wp-soc-showcase-analyst__monitor {
	fill: #080d0b;
	stroke: rgba(var(--wp-soc-color-primary-rgb), 0.4);
	stroke-width: 1;
}

.wp-soc-showcase-analyst__head,
.wp-soc-showcase-analyst__body {
	fill: #050505;
	stroke: rgba(var(--wp-soc-color-primary-rgb), 0.14);
	stroke-width: 1;
}

/* Floor reflection + vignette */
.wp-soc-showcase-scene__reflection {
	position: absolute;
	bottom: -36px;
	left: 50%;
	width: 360px;
	height: 80px;
	margin-left: -180px;
	background: radial-gradient(50% 100% at 50% 0%, rgba(var(--wp-soc-color-primary-rgb), 0.12), transparent 75%);
	filter: blur(16px);
	opacity: 0.5;
	transform: scaleY(-1);
	pointer-events: none;
}

.wp-soc-showcase-scene__vignette {
	position: absolute;
	inset: -32px;
	background: radial-gradient(ellipse at 50% 55%, transparent 40%, var(--wp-soc-color-bg) 92%);
	pointer-events: none;
}

.wp-soc-section--surface .wp-soc-showcase-scene__vignette {
	background: radial-gradient(ellipse at 50% 55%, transparent 40%, var(--wp-soc-color-surface) 92%);
}

/* ------------------------------------------------------------ *
 * Entrance stagger for the two main columns
 * ------------------------------------------------------------ */

.is-visible.wp-soc-showcase__visual {
	animation-delay: 0.12s;
}

/* ------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------ */

@media (max-width: 1023px) {
	.wp-soc-showcase__grid {
		grid-template-columns: 1fr;
		gap: var(--wp-soc-space-7);
	}

	.wp-soc-showcase__content {
		max-width: 100%;
	}

	.wp-soc-showcase__visual {
		height: 440px;
	}
}

@media (max-width: 767px) {
	.wp-soc-showcase__highlights {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 639px) {
	.wp-soc-showcase__visual {
		height: 360px;
	}

	.wp-soc-showcase-wall {
		width: 300px;
		height: 132px;
		margin-left: -150px;
	}

	.wp-soc-showcase-network {
		top: 108px;
		width: 240px;
		margin-left: -120px;
	}

	.wp-soc-showcase-desks {
		width: 320px;
		margin-left: -160px;
		bottom: 10px;
	}
}

/* ------------------------------------------------------------ *
 * Accessibility
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.wp-soc-showcase__glow,
	.wp-soc-showcase-scene__particles span,
	.wp-soc-showcase-wall__panel,
	.wp-soc-showcase-network,
	.wp-soc-showcase-network__link,
	.wp-soc-showcase-network__ring {
		animation: none !important;
	}
}