/* v14.0.0 — Elementor owns section height, viewport, layout, typography.
   Code: glass rings, lens, textfx, scroll bounce, FOUC, stacking z-index,
   intro vertical anchor (translate -50%/-50% needs top/left 50%). */
#mcp-hero-track {
	--ring-box: 60vw;
	--lens-filter: blur(0.5px) saturate(1.05) brightness(1.01);
}

/* Never set background on the viewport here — Elementor owns background-image. */
/* isolation on the stage (not the viewport) keeps backdrop-filter refracting the
   hero background and intro copy. */
#mcp-hero-glass-stage {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;
	display: block !important;
	place-items: unset !important;
	pointer-events: none;
	overflow: visible !important;
	isolation: isolate;
	background-color: transparent !important;
}

#mcp-hero-state-a,
#mcp-hero-state-b {
	will-change: opacity;
	backface-visibility: hidden;
}

/* Elementor translate(-50%, -50%) needs both axes anchored (Intro missed top). */
#mcp-hero-state-a {
	top: 50% !important;
	inset-block-start: 50% !important;
	inset-inline-start: 50% !important;
	z-index: 10 !important;
}

#mcp-hero-state-b {
	z-index: 30 !important;
}

#mcp-hero-scroll {
	z-index: 40 !important;
	pointer-events: none !important;
	will-change: opacity;
}

/* Only until the script takes over: after that the crossfade is GSAP's alone,
   so nothing can snap the second state on or off mid-transition. */
#mcp-hero-track:not(.is-hero-ready) #mcp-hero-state-a,
#mcp-hero-track:not(.is-hero-ready) #mcp-hero-state-b {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

#mcp-hero-track.is-hero-ready #mcp-hero-state-a {
	visibility: visible !important;
}

#mcp-hero-track:not(.is-hero-ready) #mcp-hero-glass-stage {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

#mcp-hero-ring-outer,
#mcp-hero-ring-mid,
#mcp-hero-ring-inner {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	margin-left: calc(var(--ring-box) / -2) !important;
	margin-top: calc(var(--ring-box) / -2) !important;
	padding: 0 !important;
	width: var(--ring-box) !important;
	height: var(--ring-box) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	overflow: visible !important;
	opacity: var(--ring-a, 1) !important;
	border: none !important;
	box-shadow: none !important;
	grid-area: unset !important;
	background-color: transparent !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

.mcp-ring-svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.mcp-ring-arc {
	fill: none;
	stroke-linecap: round;
}

#mcp-hero-ring-outer::after,
#mcp-hero-ring-mid::after,
#mcp-hero-ring-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
	opacity: var(--lens-a, 1);
	backdrop-filter: var(--lens-filter);
	-webkit-backdrop-filter: var(--lens-filter);
	-webkit-mask-image: radial-gradient(
		closest-side,
		transparent 56%,
		rgba(0, 0, 0, 0.08) 66%,
		rgba(0, 0, 0, 0.28) 76%,
		rgba(0, 0, 0, 0.55) 84%,
		rgba(0, 0, 0, 0.78) 90%,
		rgba(0, 0, 0, 0.85) 96%,
		rgba(0, 0, 0, 0.45) 99.5%,
		transparent 100%
	);
	mask-image: radial-gradient(
		closest-side,
		transparent 56%,
		rgba(0, 0, 0, 0.08) 66%,
		rgba(0, 0, 0, 0.28) 76%,
		rgba(0, 0, 0, 0.55) 84%,
		rgba(0, 0, 0, 0.78) 90%,
		rgba(0, 0, 0, 0.85) 96%,
		rgba(0, 0, 0, 0.45) 99.5%,
		transparent 100%
	);
}

.mcp-glass-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.mcp-hero-textfx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 15;
	background: transparent;
}

#mcp-hero-track.is-textfx #mcp-hero-state-a h1 {
	-webkit-text-fill-color: transparent !important;
	text-shadow: none !important;
}

#mcp-hero-track #mcp-hero-scroll svg,
#mcp-hero-track #mcp-hero-scroll .mcp-hero-scroll-cue-icon,
#mcp-hero-track #mcp-hero-scroll .elementor-icon svg {
	display: block;
	opacity: 1;
	transform: translateY(0);
	animation: mcp-hero-scroll-cue 2s linear infinite !important;
	will-change: transform;
}

@keyframes mcp-hero-scroll-cue {
	0%,
	100% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(4px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	#mcp-hero-track {
		height: auto !important;
		min-height: 0 !important;
	}

	#mcp-hero-ring-outer,
	#mcp-hero-ring-mid,
	#mcp-hero-ring-inner {
		display: none;
	}

	#mcp-hero-track #mcp-hero-scroll svg,
	#mcp-hero-track #mcp-hero-scroll .mcp-hero-scroll-cue-icon,
	#mcp-hero-track #mcp-hero-scroll .elementor-icon svg {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}