/* ─────────────────────────────────────────────────────────────────────────────
   Background Title Component [oas_bg_title]
   
   A large decorative text that fills the container width.
   When text is wider than the container, it scrolls smoothly.
   ───────────────────────────────────────────────────────────────────────────── */

.oas-bg-title {
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	margin-bottom: clamp(1rem, 2vw, 2rem);
	text-align: center;
}

.oas-bg-title__text {
	display: inline-block;
	font-family: var(--font-bg-title, 'Saira Extra Condensed', sans-serif);
	font-weight: 800;
	font-size: var(--font-size-bg-title, clamp(5rem, 15vw, 14rem));
	line-height: 0.85;
	color: var(--color-gray-100, #f0f0f0);
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: -0.02em;
	will-change: transform;
}

/* When scrolling is active (JS adds this class) */
.oas-bg-title--scrolling .oas-bg-title__text {
	animation: none; /* Managed via JS transform */
}