/* ==========================================================================
   VisionaryCue intro loader
   ========================================================================== */

:root {
	--vc-intro-black: #000;
	--vc-intro-primary: #8e44ad;
	--vc-intro-secondary: #0047ff;
	--vc-intro-electric: #9db8ff;
}

html:has(#vc-loader),
body:has(#vc-loader),
body.vc-loader-active {
	overflow: hidden;
}

.vc-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	pointer-events: auto;
	isolation: isolate;
}

.vc-loader__shutter {
	position: absolute;
	z-index: 1;
	left: 0;
	width: 100%;
	height: calc(50% + 1px);
	background:
		radial-gradient(circle at 50% 100%, rgba(142, 68, 173, 0.12), transparent 42%),
		var(--vc-intro-black);
	will-change: transform;
}

.vc-loader__shutter--top {
	top: 0;
	border-bottom: 1px solid rgba(142, 68, 173, 0.32);
}

.vc-loader__shutter--bottom {
	bottom: 0;
	background:
		radial-gradient(circle at 50% 0%, rgba(0, 71, 255, 0.12), transparent 42%),
		var(--vc-intro-black);
	border-top: 1px solid rgba(0, 71, 255, 0.32);
}

.vc-loader__brand {
	position: absolute;
	z-index: 2;
	top: clamp(1.5rem, 5vh, 3.5rem);
	left: 50%;
	width: clamp(10rem, 20vw, 15rem);
	opacity: 0.78;
	transform: translateX(-50%);
	will-change: opacity, transform;
}

.vc-loader__brand img {
	display: block;
	width: 100%;
	height: auto;
}

/* Shared SVG 9: this exact node is moved into the hero dock by JavaScript. */

.vc-nine {
	position: relative;
	z-index: 4;
	display: grid;
	place-items: center;
	width: clamp(11rem, 28vw, 20rem);
	aspect-ratio: 240 / 330;
	color: var(--vc-intro-primary);
	filter:
		drop-shadow(0 0 1.5rem rgba(142, 68, 173, 0.2))
		drop-shadow(0 0 2.75rem rgba(0, 71, 255, 0.1));
	transform-origin: 50% 55%;
	will-change: transform, opacity;
}

.vc-nine__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.vc-nine__depth,
.vc-nine__body,
.vc-nine__current {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vc-nine__depth {
	stroke: #171208;
	stroke-width: 42;
	transform: translate(5px, 8px);
}

.vc-nine__body {
	stroke: url("#vc-nine-metal");
	stroke-width: 34;
}

.vc-nine__current {
	stroke: var(--vc-intro-electric);
	stroke-width: 5;
	stroke-dasharray: 22 78;
	stroke-dashoffset: 620;
	filter: url("#vc-nine-glow");
	opacity: 0;
}

.vc-nine__spark {
	fill: none;
	stroke: #dce5ff;
	stroke-width: 3;
	stroke-linecap: round;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

@media (max-width: 767px) {
	.vc-loader__brand {
		width: clamp(9rem, 45vw, 12rem);
	}

	.vc-nine {
		width: clamp(9rem, 48vw, 14rem);
	}

	.vc-nine__current {
		stroke-width: 4;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:has(#vc-loader),
	body:has(#vc-loader),
	body.vc-loader-active {
		overflow: auto;
	}
}