/**
 * Home page (front-page.php only — enqueued conditionally in inc/enqueue.php).
 *
 * Ported from the alston-alt site: the immersive hero from the
 * alston-design-preview-immersive child, and the signature bar, feature
 * rows, promo cards and proof strip from the alston-design-preview parent's
 * preview.css. Every class is prefixed (immersive-hero__, home-) so nothing
 * here restyles A's shared components. The preview's colour variables are
 * translated to tokens.css: --red → --brand-red, --navy → --brand-navy,
 * --bronze → --accent-bronze, --green → --accent-green, --ink-2 →
 * --ink-muted, --paper-warm → --surface-warm, --invert → --ink-invert.
 *
 * Sizes are the design's pixels, not the --sp-* scale, on purpose.
 */

/* =====================================================================
 * Immersive hero
 *
 * Timing: one clock, set inline on the section by the template from the
 * Home Hero settings —
 *   --count  slides in the lap (1–6)
 *   --cycle  one lap: --count × seconds per slide (28s by default)
 *   --intro  how long the headline/tagline hold before the lap starts (8.6s)
 * Every cycling element carries --i (its slot, set by the template) and
 * starts at --intro + --i × --cycle / --count. The four cycle keyframes
 * (slide, slide-first, caption, tick) are generated for the count by
 * inc/hero-motion.php and added inline after this sheet; at four slides
 * of 7s they are the design file's, unchanged.
 *
 * Safari before 16.4 does not animate discrete properties, so there the
 * caption links keep pointer-events: none and only the ticks are clickable.
 * ================================================================== */

@keyframes immersive-hero-intro-out {
	0%   { opacity: 1; transform: none; }
	78%  { opacity: 1; transform: none; }
	100% { opacity: 0; transform: translate3d(0, 34px, 0); }
}

@keyframes immersive-hero-indicator-in {
	0%   { opacity: 0; transform: translate3d(0, 26px, 0); }
	80%  { opacity: 0; transform: translate3d(0, 26px, 0); }
	100% { opacity: 1; transform: none; }
}

.immersive-hero {
	/* Fallbacks; the template sets all three inline. */
	--count: 4;
	--cycle: 28s;
	--intro: 8.6s;
	/*
	 * Eyebrows and caption hover. --accent-bronze is the warranty-badge
	 * colour and sinks into the darkened photo; this is the design's lighter
	 * gold, which reads on it.
	 */
	--accent-gold: #E3C37A;
	/* The design's near-black base; shows for a moment on every crossfade. */
	--hero-base: #14161A;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* header.css floats the header over this, so it owns the whole viewport. */
	height: 100vh;
	height: 100svh;
	min-height: 460px;
	background: var(--hero-base);
	color: var(--ink-invert);
}

/*
 * Pause, the page's own "pause" control (WCAG 2.2.2). Pointer: only while
 * the pointer is on a caption link or a tick, and then everything pauses as
 * one clock. Keyboard: the cycle only, so the indicator still arrives if
 * focus lands during the intro.
 */
.immersive-hero:has(.immersive-hero__indicator:hover) .immersive-hero__intro,
.immersive-hero:has(.immersive-hero__indicator:hover) .immersive-hero__indicator,
.immersive-hero:has(.immersive-hero__indicator:hover) .immersive-hero__slide,
.immersive-hero:has(.immersive-hero__indicator:hover) .immersive-hero__caption,
.immersive-hero:has(.immersive-hero__indicator:hover) .immersive-hero__tick-fill,
.immersive-hero:focus-within .immersive-hero__slide,
.immersive-hero:focus-within .immersive-hero__caption,
.immersive-hero:focus-within .immersive-hero__tick-fill {
	animation-play-state: paused;
}

.immersive-hero__slide {
	position: absolute;
	inset: 0;
	z-index: -3;
	animation: immersive-hero-slide var(--cycle) linear infinite both;
	animation-delay: calc(var(--intro) + var(--i, 0) * var(--cycle) / var(--count));
}

.immersive-hero__slide--first {
	animation-name: immersive-hero-slide-first;
}

.immersive-hero__slide-link { display: block; height: 100%; }

/* Qualified with its parent so it outranks base.css's `img { height: auto }`. */
.immersive-hero__slide .immersive-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
}

.immersive-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none; /* clicks reach the slide photo's link beneath */
	background: linear-gradient(180deg, rgba(20, 22, 26, 0.04) 0%, rgba(20, 22, 26, 0.02) 30%, rgba(20, 22, 26, 0.42) 58%, rgba(20, 22, 26, 0.64) 74%, rgba(20, 22, 26, 0.68) 100%);
}

.immersive-hero__overlay--corner {
	z-index: -1;
	background: radial-gradient(120% 78% at 0% 108%, rgba(20, 22, 26, 0.5) 0%, rgba(20, 22, 26, 0.26) 42%, rgba(20, 22, 26, 0.08) 68%, rgba(20, 22, 26, 0) 86%);
}

.immersive-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	/* The .wrap--wide geometry, so the copy shares the sections' left edge. */
	max-width: var(--wrap-wide);
	height: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-bottom: clamp(48px, 7svh, 88px);
	pointer-events: none; /* the photo takes the click; captions and ticks opt back in */
}

/* Intro and indicator share this footprint; the indicator is pinned to its bottom edge. */
.immersive-hero__stage {
	position: relative;
	max-width: min(100%, 940px);
}

.immersive-hero__intro {
	/* 8s at the default 8.6s intro: the headline is gone 0.6s before the lap starts. */
	animation: immersive-hero-intro-out calc(var(--intro) - 0.6s) cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}

.immersive-hero__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(40px, 5.2vw, 90px);
	line-height: 0.94;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--ink-invert);
	text-wrap: balance;
}

.immersive-hero__tagline {
	margin: 22px 0 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(20px, 2.1vw, 30px);
	color: rgba(255, 255, 255, 0.94);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.immersive-hero__indicator {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	pointer-events: none; /* re-enabled per caption by its keyframes, and on the ticks below */
	/* 9s at the default 8.6s intro: the indicator finishes arriving 0.4s into the lap. */
	animation: immersive-hero-indicator-in calc(var(--intro) + 0.4s) ease 1 both;
}

.immersive-hero__captions {
	position: relative;
	width: 100%;
	height: 76px;
}

.immersive-hero__caption {
	position: absolute;
	inset: 0;
	text-align: left;
	animation: immersive-hero-caption var(--cycle) linear infinite both;
	animation-delay: calc(var(--intro) + var(--i, 0) * var(--cycle) / var(--count));
}

.immersive-hero__eyebrow {
	margin: 0 0 6px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: clamp(15px, 1.25vw, 18px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-gold);
}

.immersive-hero__name {
	margin: 0;
	font-family: var(--font-sans);
	/* A step up from the design's 700: the client wants the slide names to carry more. */
	font-weight: 800;
	font-size: clamp(19px, 1.8vw, 27px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.immersive-hero__name a {
	color: var(--ink-invert);
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.34);
	transition: color var(--transition), border-color var(--transition);
}

.immersive-hero__name a:hover {
	color: var(--accent-gold);
	border-bottom-color: var(--accent-gold);
	text-decoration: none;
}

/* --- Ticks: the keyboard-reachable links --- */

.immersive-hero__ticks {
	display: flex;
	gap: 10px;
	pointer-events: auto;
}

/*
 * 52 × 24px target with the 2px bar drawn in the middle, so the link meets
 * the 24px minimum target size while looking like the design's hairline.
 * The track is a border, not a background, so it survives forced-colors mode.
 */
.immersive-hero__tick {
	position: relative;
	display: block;
	width: 52px;
	height: 24px;
}

.immersive-hero__tick::before,
.immersive-hero__tick-fill {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
}

.immersive-hero__tick::before {
	content: '';
	border-top: 2px solid rgba(255, 255, 255, 0.34);
	height: 0;
}

.immersive-hero__tick-fill {
	background: var(--ink-invert);
	transform-origin: left center;
	animation: immersive-hero-tick var(--cycle) linear infinite both;
	animation-delay: calc(var(--intro) + var(--i, 0) * var(--cycle) / var(--count));
}

.immersive-hero__tick:hover::before {
	border-top-color: var(--accent-gold);
}

/*
 * A sighted keyboard user otherwise sees a ring around an empty bar: the
 * matching caption is only on screen during its own slot. The label is the
 * link's own aria-label, so it never drifts from what AT reads.
 */
.immersive-hero__tick:hover::after,
.immersive-hero__tick:focus-visible::after {
	content: attr(aria-label);
	position: absolute;
	left: 0;
	bottom: 100%;
	margin-bottom: 8px;
	white-space: nowrap;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-invert);
}

/* The theme's navy focus ring vanishes on the photo. */
.immersive-hero__tick:focus-visible,
.immersive-hero__name a:focus-visible {
	outline: 2px solid var(--ink-invert);
	outline-offset: 4px;
}

@media (forced-colors: active) {
	/* Backgrounds are stripped; borders keep the fill visible. */
	.immersive-hero__tick-fill {
		height: 0;
		border-top: 2px solid CanvasText;
	}
}

/*
 * One slide: nothing to cycle. The slide, headline and tagline hold
 * still with the caption under them; there are no ticks, so the caption
 * link is the accessible one (the template leaves it in the tab order).
 */
.immersive-hero--single .immersive-hero__slide,
.immersive-hero--single .immersive-hero__intro,
.immersive-hero--single .immersive-hero__indicator,
.immersive-hero--single .immersive-hero__caption {
	animation: none;
}

.immersive-hero--single .immersive-hero__slide {
	opacity: 1;
	transform: none;
}

.immersive-hero--single .immersive-hero__indicator {
	position: static;
	margin-top: 24px;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Outranks the reduced-motion rule that hides captions in favour of the ticks. */
.immersive-hero--single .immersive-hero__captions {
	display: block;
	height: auto;
}

.immersive-hero--single .immersive-hero__caption {
	position: static;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/*
 * Reduced motion: a still, complete hero. base.css collapses every animation
 * to 0.01ms under this query, which would freeze each element on its LAST
 * keyframe (no headline, no caption, ticks empty). Turn the animations off
 * instead and pin slide 1, the headline and tagline, and the ticks.
 */
@media (prefers-reduced-motion: reduce) {
	.immersive-hero__slide,
	.immersive-hero__intro,
	.immersive-hero__indicator,
	.immersive-hero__caption,
	.immersive-hero__tick-fill {
		animation: none;
	}

	.immersive-hero__slide {
		opacity: 0;
		transform: none;
	}

	.immersive-hero__slide--first {
		opacity: 1;
	}

	/* Unanimated, every slide would take clicks; only the one shown should. */
	.immersive-hero__slide {
		pointer-events: none;
	}

	.immersive-hero__slide--first {
		pointer-events: auto;
	}

	.immersive-hero__intro {
		opacity: 1;
		transform: none;
	}

	.immersive-hero__indicator {
		position: static;
		margin-top: 24px;
		opacity: 1;
		transform: none;
	}

	.immersive-hero__captions {
		display: none;
	}

	.immersive-hero__tick-fill {
		transform: scaleX(0);
	}

	.immersive-hero__tick--first .immersive-hero__tick-fill {
		transform: scaleX(1);
	}
}

/* =====================================================================
 * Red marquee (announcements, or Quality · Beauty · Longevity)
 *
 * Two identical tracks sit side by side in a max-content row; the row
 * slides left by exactly one track (50%) and snaps back, which reads as
 * a continuous loop as long as one track is wider than the viewport
 * (the partial repeats the items to make sure of that). Each track
 * carries half the inter-item gap as inline padding so the seam between
 * copies is the same 56px as the gap inside a copy. Duration comes from
 * PHP as --sigbar-duration.
 * ================================================================== */

.home-sigbar {
	overflow: hidden;
	padding-block: 11px;
	background: var(--brand-red);
	color: var(--ink-invert);
}

.home-sigbar__marquee {
	display: flex;
	width: max-content;
	animation: home-sigbar-scroll var(--sigbar-duration, 18s) linear infinite;
}

.home-sigbar:hover .home-sigbar__marquee,
.home-sigbar:focus-within .home-sigbar__marquee {
	animation-play-state: paused;
}

/* The base navy ring is lost on the red; draw it white, inside the edge. */
.home-sigbar:focus-visible {
	outline: 2px solid var(--ink-invert);
	outline-offset: -4px;
}

.home-sigbar__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: 56px;
	margin: 0;
	padding: 0 28px;
	list-style: none;
}

.home-sigbar__item {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 26px;
	white-space: nowrap;
}

.home-sigbar__diamond {
	flex: none;
	width: 5px;
	height: 5px;
	background: currentColor;
	transform: rotate(45deg);
}

@keyframes home-sigbar-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 700px) {
	.home-sigbar__track { column-gap: 20px; padding: 0 10px; }
	.home-sigbar__item { font-size: 19px; }
}

/*
 * No motion: one set of items, wrapped and centred like the old static
 * bar. The track must be allowed to shrink (flex: auto) or it keeps its
 * single-line max-content width and wrapping never happens. The repeats,
 * the seam diamond and the tail copy all go.
 */
@media (prefers-reduced-motion: reduce) {
	.home-sigbar__marquee { width: auto; justify-content: center; animation: none; }
	.home-sigbar__track { flex: auto; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
	.home-sigbar__track[aria-hidden="true"],
	.home-sigbar__item--repeat,
	.home-sigbar__diamond--seam { display: none; }
	.home-sigbar__item { white-space: normal; text-align: center; }
}

/* =====================================================================
 * The range: heading, feature rows, promo pair
 * ================================================================== */

.home-range { padding-block: 84px; }

.home-heading { max-width: 900px; margin-inline: auto; text-align: center; }

/* Under the title here: "The Healthiest Flooring / Patented Technology". */
.home-heading__eyebrow {
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-bronze);
}

.home-heading__title {
	margin: 0 0 12px;
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* The highlighted word, after the old site's "The Healthiest Flooring"
   banner: larger, in the collection logos' green, darkened to pass 3:1. */
.home-heading__title em {
	font-size: 1.6em;
	font-style: normal;
	font-weight: 800;
	color: #6f9e00;
	vertical-align: -0.06em;
}

/* The diamond rule, in red. */
.home-heading__rule {
	position: relative;
	display: block;
	width: min(420px, 80%);
	height: 1px;
	margin-inline: auto;
	background: linear-gradient(to right, transparent, var(--ink) 20%, var(--ink) 80%, transparent);
}

.home-heading__rule::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	background: var(--brand-red);
	transform: translate(-50%, -50%) rotate(45deg);
}

.home-heading__text {
	max-width: 720px;
	margin: 26px auto 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-muted);
}

.home-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding-top: 72px;
}

.home-feature__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/*
 * The architectural frame: a navy hairline offset behind the photo, set
 * toward the copy side, and a long, low shadow under it. The photo stays
 * square-cornered; the frame does the work.
 */
.home-feature__media {
	--frame-offset: 18px;

	position: relative;
	isolation: isolate;
}

.home-feature__media::before {
	content: '';
	position: absolute;
	inset: var(--frame-offset) calc(-1 * var(--frame-offset)) calc(-1 * var(--frame-offset)) var(--frame-offset);
	z-index: -1;
	border: 1px solid var(--brand-navy);
	pointer-events: none;
}

.home-feature--reverse .home-feature__media::before {
	inset: var(--frame-offset) var(--frame-offset) calc(-1 * var(--frame-offset)) calc(-1 * var(--frame-offset));
}

.home-feature__media img,
.home-promo {
	box-shadow: 0 2px 4px rgba(17, 17, 17, 0.06), 0 24px 48px -20px rgba(17, 17, 17, 0.38);
}

.home-feature__media-link,
.home-promo__media-link { display: block; }

.home-feature--reverse .home-feature__media { order: 2; }

.home-feature__eyebrow {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-bronze);
}

.home-feature__title {
	margin: 0 0 18px;
	font-size: clamp(21px, 2.3vw, 27px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* A collection logo standing in for the title. */
.home-feature__title--logo { margin-bottom: 22px; }

.home-feature__logo { display: block; width: 100%; max-width: 520px; height: auto; }

.home-feature__rule { width: 56px; height: 3px; margin-bottom: 22px; background: var(--brand-red); }

.home-feature__text {
	max-width: 46ch;
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-muted);
	text-wrap: pretty;
}

/* The design's outline button. Scoped: A has no general outline variant. */
.home-feature .btn--outline {
	min-height: 48px;
	padding: 0 26px;
	border-color: var(--brand-navy);
	background: transparent;
	color: var(--brand-navy);
}

.home-feature .btn--outline:hover { background: var(--brand-navy); color: var(--ink-invert); }

@media (max-width: 900px) {
	.home-feature { grid-template-columns: 1fr; gap: 26px; padding-top: 52px; }
	.home-feature__media { --frame-offset: 10px; }
	.home-feature--reverse .home-feature__media { order: 0; }
}

.home-promo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding-top: 84px;
}

.home-promo {
	display: flex;
	flex-direction: column;
	padding-bottom: 34px;
	background: var(--surface-warm);
}

/* 3:2: the trims product composite is laid out for this frame and shows whole. */
.home-promo__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.home-promo__media-link,
.home-promo > .home-promo__img {
	margin-bottom: 26px;
}

/* A white hairline mat inside the photo, the promos' half of the frame. */
.home-promo__media-link {
	position: relative;
}

.home-promo__media-link::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	pointer-events: none;
}

.home-promo__body { padding-inline: 34px; }

.home-promo__eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-bronze);
}

.home-promo__title {
	margin: 0 0 16px;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.home-promo__text { margin: 0 0 22px; font-size: 16px; color: var(--ink-muted); }

/* Text link with the red rule under it. */
.home-promo__link {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--brand-red);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-navy);
	transition: color var(--transition);
}

.home-promo__link:hover { color: var(--brand-red); text-decoration: none; }

@media (max-width: 900px) {
	.home-promo-grid { grid-template-columns: 1fr; gap: 26px; padding-top: 52px; }
	.home-promo__body { padding-inline: 22px; }
}

/* =====================================================================
 * Proof strip and accreditation marks
 * ================================================================== */

.home-proof {
	padding-block: 52px;
	background: var(--surface-warm);
	border-block: 1px solid var(--rule);
}

.home-proof__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

.home-proof__copy { max-width: 320px; }

.home-proof__label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-green);
}

.home-proof__text { margin: 0; font-size: 16px; color: var(--ink-muted); }

/* Equal-height marks in a gap row; the PNGs are keyed to transparent. */
.home-marks {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px 40px;
	width: min(660px, 58%);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-marks__item { display: flex; }

.home-marks__img { width: auto; height: clamp(56px, 5.4vw, 76px); }

/* nwfa is a wide wordmark — matching its height would oversize it. */
.home-marks__img--wide { height: clamp(44px, 4.2vw, 60px); }

@media (max-width: 900px) {
	.home-proof__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
	.home-proof__copy { max-width: none; }
	.home-marks { width: 100%; justify-content: flex-start; gap: 22px 32px; }
}