/* ==========================================================================
   Homepage scroll template
   --------------------------------------------------------------------------
   Everything on this page is fixed to the viewport: the page never scrolls
   vertically. The wheel drives the strip sideways instead, handled entirely by
   uc-homepage-scroll.js.

   --uc-hs-peek controls how far the first image pokes in from the right. The
   space between the title and the tag line is the plain margin-top on
   .uc-hs-taglines below. Scroll speed and glide live in uc-homepage-scroll.js.
   ========================================================================== */

:root {
	--uc-hs-peek: 88vw;
}

/* Layers, back to front: intro text, strip, footer. */

.uc-hs-intro {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	text-align: center;
	pointer-events: none;
}

.uc-hs-taglines {
	position: relative;
	width: 100%;
	margin: 125px 0 0;
	min-height: 1.6em;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.uc-hs-tagline {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease;
}

.uc-hs-tagline.is-active {
	opacity: 1;
}

/* The strip covers the viewport and starts off to the right. --------------- */

.uc-hs .edgtf-portfolio-list-horizontal-holder {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.uc-hs .edgtf-portfolio-list-horizontal-inner {
	/* The item's own 22px margin sits inside this, so subtract it to land the
	   image edge exactly on --uc-hs-peek. */
	padding-left: calc(var(--uc-hs-peek) - 22px);
	align-items: center;
	/* The theme's 1s transform transition is replaced by the script's own
	   easing — keeping both makes the strip feel loose and overshoot. */
	transition: none;
}

/* Footer sits on the bottom edge of the viewport.
   .edgtf-content is z-index 100 and creates a stacking context, so the footer
   has to clear that number or the strip swallows its clicks. --------------- */

body.uc-page-homepage-scroll .edgtf-page-footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	background: transparent;
}

/* The strip is pinned, so the in-flow wrapper must not add height. --------- */

body.uc-page-homepage-scroll .edgtf-content,
body.uc-page-homepage-scroll .edgtf-content-inner {
	min-height: 0;
}

.uc-hs-strip {
	height: 0;
}

@media only screen and (max-width: 768px) {
	:root {
		--uc-hs-peek: 82vw;
	}

	.uc-hs-taglines {
		margin-top: 70px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.uc-hs-tagline {
		transition: none;
	}
}