/* Sproutline Cover. Most values below are defaults that the Elementor controls override. */

.spl {
	--spl-stage-h: 100vh;
	--spl-run: 300vh;
	--spl-top: 0px;
	--spl-fit: cover;
	--spl-pos: center center;
	--spl-origin: center center;
	position: relative;
	width: 100%;
	height: calc(var(--spl-stage-h) + var(--spl-run));
	box-sizing: border-box;
	text-align: center;
}
.spl *,
.spl *::before,
.spl *::after {
	box-sizing: border-box;
}
.spl--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* The stage is pinned while the visitor scrolls through .spl.
   The next section only comes up after the effect has finished. */
.spl-stage {
	position: sticky;
	top: var(--spl-top);
	height: var(--spl-stage-h);
	overflow: hidden;
	isolation: isolate;
}
/* Used by the script when a theme or container stops sticky from working */
.spl--jspin .spl-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.spl-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform-origin: var(--spl-origin);
	will-change: transform;
}
.spl .spl-img,
.spl .spl-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: var(--spl-fit);
	object-position: var(--spl-pos);
	opacity: 0;
}
.spl .spl-img:first-child,
.spl .spl-video {
	opacity: 1;
}

/* A tint so the text stays readable on the picture */
.spl-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Text */
.spl-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 60px 40px;
}
.spl-content {
	width: 100%;
	max-width: 720px;
}
.spl .spl-title,
.spl .spl-subtitle,
.spl .spl-text {
	margin-top: 0;
	margin-left: var(--spl-ml, auto);
	margin-right: var(--spl-mr, auto);
}
.spl .spl-title { margin-bottom: 14px; }
.spl .spl-subtitle { margin-bottom: 14px; }
.spl .spl-text { margin-bottom: 24px; }
.spl .spl-text > :first-child { margin-top: 0; }
.spl .spl-text > :last-child { margin-bottom: 0; }

/* With a scroll hint, the text block keeps clear of it */
.spl--hint .spl-content { margin-bottom: var(--spl-hint-space, 0px); }

/* Mouse scroll icon: wheel slides down and fades, arrow bobs. Fades away on scroll (set by the script). */
.spl-hint {
	position: absolute;
	bottom: 32px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: #fff;
	pointer-events: none;
}
.spl-hint--center { left: 50%; transform: translateX(-50%); }
.spl-hint--left { left: 32px; }
.spl-hint--right { right: 32px; }
.spl-hint-mouse { width: 44px; height: auto; display: block; overflow: visible; }
.spl-hint-chev { width: 22px; height: 22px; display: block; animation: spl-arrow 1.8s ease-in-out infinite; }
.spl-hint-text { font: 600 12px/1 system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; }
.spl-hint--text .spl-hint-text { font-size: 14px; animation: spl-pulse 2s ease-in-out infinite; }
@keyframes spl-pulse {
	0%, 100% { opacity: 0.45; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(4px); }
}
.spl-hint-wheel { animation: spl-wheel 1.8s ease-in-out infinite; }
.spl-hint-arrow { animation: spl-arrow 1.8s ease-in-out infinite; }
@keyframes spl-wheel {
	0% { transform: translateY(0); opacity: 0; }
	20% { opacity: 1; }
	70% { transform: translateY(16px); opacity: 0; }
	100% { transform: translateY(16px); opacity: 0; }
}
@keyframes spl-arrow {
	0%, 100% { transform: translateY(0); opacity: 0.35; }
	50% { transform: translateY(5px); opacity: 1; }
}

/* Timed text: hidden until the script has set its position; the two title lines stack */
.spl .spl-t1,
.spl .spl-t2 { display: block; }
.spl--anim .spl-a[data-spl-a] { opacity: 0; will-change: transform, opacity; }

/* Colors (Elementor controls override these) */
.spl .spl-title,
.spl .spl-subtitle,
.spl .spl-text { color: #fff; }

/* Buttons */
.spl-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: var(--spl-flex, center);
}
.spl-buttons:empty { display: none; }
.spl .spl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-style: solid;
	border-width: 2px;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.spl .spl-btn--1 { color: #111; background-color: #fff; border-color: #fff; }
.spl .spl-btn--2 { color: #fff; border-color: #fff; }

.spl-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #3a3a3a;
	color: #fff;
	font: 14px/1.4 system-ui, sans-serif;
	text-align: center;
	padding: 16px;
}

@media (max-width: 767px) {
	.spl-inner { padding: 40px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.spl .spl-btn { transition: none; }
	.spl-hint-wheel, .spl-hint-arrow, .spl-hint-chev, .spl-hint--text .spl-hint-text { animation: none; }
}