/*
 * Apex Events — showcase.css
 * The pinned "We don't just support events / We build the framework." statement and the text
 * spiral on the Home page (driven by assets/js/showcase.js).
 *
 * These rules only apply once the script has started (html.apex-showcase-on), so without
 * JavaScript, or with animations turned off, the section shows as normal static text.
 */

/* The section is tall; its stage stays pinned to the screen while you scroll through it. */
html.apex-showcase-on .apex-statement {
	height: 640vh;
	padding: 0;
	display: block;
}

html.apex-showcase-on .apex-statement-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: block;
}

/* Both text blocks sit on top of each other in the middle of the stage. */
html.apex-showcase-on .apex-statement-block-1,
html.apex-showcase-on .apex-statement-block-2 {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 0 48px;
	justify-content: center;
}

@media (max-width: 767px) {
	html.apex-showcase-on .apex-statement-block-1,
	html.apex-showcase-on .apex-statement-block-2 {
		padding: 0 20px;
	}
}

/* The spiral's heading stays in the page for search engines and screen readers, but isn't shown. */
html.apex-showcase-on .apex-spiral-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The spiral itself (an SVG the script draws behind the text). */
.apex-spiral-svg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
}

.apex-spiral-svg text {
	font-weight: 700;
	text-transform: uppercase;
}

/* Red glow on the red ring. */
html body .apex-spiral-svg text[style*="brand-red"] {
	filter: drop-shadow(0 0 4px rgba(226, 33, 40, .35));
}