/**
 * DreBuilt child theme styles.
 *
 * Enqueued by functions.php, versioned by file mtime.
 */

/*
 * DP Preloader: re-centre the loader icon.
 *
 * The plugin prints `margin: 0 0 0 -30px` inline for this selector, which
 * leaves the icon off-centre at its configured size. `!important` wins over
 * that inline rule regardless of load order, since the plugin's rule is not
 * `!important`. Moved here from Appearance → Customize → Additional CSS on
 * 2026-09-25.
 */
.dp_preloader .dp_loader_icon {
	margin: -200px 0 0 -300px !important;
}

/*
 * Home hero headline: one keyword rotates, and only that word shimmers.
 *
 * Replaces the Supreme Modules Pro typing effect, which cost about 18 MB of
 * PHP memory per request. The markup lives in a Divi Text module on the Home
 * page (it is page content, in the database); see docs/SITE.md for the HTML.
 * Every class here is prefixed `drebuilt-hero-`, so nothing applies until that
 * markup exists.
 */
.et_pb_text .drebuilt-hero-title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: Poppins, Helvetica, Arial, Lucida, sans-serif;
	font-size: clamp(28px, 5vw, 54px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	text-wrap: balance;
}

/* All three words share one grid cell, so the slot is as wide as the
   longest word and the sentence never reflows as they change. */
.drebuilt-hero-rotator {
	display: inline-grid;
	height: 1.2em;
	padding-inline: 0.06em;
	overflow: hidden;
	line-height: 1.2;
	vertical-align: bottom;
}

.drebuilt-hero-rotator > span {
	grid-area: 1 / 1;
	justify-self: center;
	opacity: 0;
	transform: translateY(100%);
	background: linear-gradient(100deg, #bfe6ff, #6cc0ff, #fff, #6cc0ff, #bfe6ff);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation:
		drebuilt-hero-rotate 9s cubic-bezier(0.6, 0.05, 0.25, 1) infinite,
		drebuilt-hero-shine 3s linear infinite;
}

/* One word every 3 s: each word is on screen for a third of the 9 s cycle. */
.drebuilt-hero-rotator > span:nth-child(2) {
	animation-delay: 3s, 0s;
}

.drebuilt-hero-rotator > span:nth-child(3) {
	animation-delay: 6s, 0s;
}

@keyframes drebuilt-hero-rotate {

	0% {
		opacity: 0;
		transform: translateY(100%);
	}

	5%,
	30% {
		opacity: 1;
		transform: translateY(0);
	}

	35%,
	100% {
		opacity: 0;
		transform: translateY(-100%);
	}
}

@keyframes drebuilt-hero-shine {

	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0% 0;
	}
}

/* Screen readers get one plain sentence instead of three cycling words. */
.drebuilt-hero-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Visitors who ask for less motion see the first word, still. */
@media (prefers-reduced-motion: reduce) {

	.drebuilt-hero-rotator > span {
		animation: none;
		transform: none;
	}

	.drebuilt-hero-rotator > span:first-child {
		opacity: 1;
	}
}