/*
 * VMWEB — Case Study page (port of "Case Study.dc.html").
 * Page helmet <style> + the style-hover rules of the template (prefix vmcs-).
 * Only enqueued for page-templates/template-case-study.php.
 */

/* Helmet: this page sits on a deeper black than the rest of the site. */
html { scroll-behavior: smooth; background: #050506; }
body { margin: 0; background: #050506; color: #edf0ea; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

@keyframes csIn {
	from { opacity: 0; transform: translateY(60px); filter: blur(12px); }
	to { opacity: 1; transform: none; filter: blur(0); }
}

/* style-hover="color:#c1ed00" — breadcrumb "Work" link. */
.vmcs-crumb:hover { color: #c1ed00 !important; }

/*
 * BEFORE side of the before/after slider when the case has no `before`
 * screenshot: a quiet panel in the slot the original reserved for it.
 * The label sits in the middle of the half that is visible at the default split.
 */
.vmcs-slot {
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%),
		linear-gradient(160deg, #18191d 0%, #121316 55%, #0d0e10 100%);
}
.vmcs-slot::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(closest-side at 25% 50%, #000, transparent);
	mask-image: radial-gradient(closest-side at 25% 50%, #000, transparent);
	pointer-events: none;
}
.vmcs-slot-label {
	position: absolute;
	left: 25%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: calc(50% - 72px); /* stays clear of the knob; wraps on narrow sliders */
	color: #6f7378;
	font: 500 11px/1.5 'Geist Mono', monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	user-select: none;
	pointer-events: none;
}
.vmcs-slot-label svg { opacity: .7; }