/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Home Hero — blocks/home-hero/style.css
 *
 * Auto-enqueued by WordPress via "style": "file:./style.css" in block.json.
 * Never enqueue this manually in functions.php.
 *
 * Depends on tokens from css/global.css.
 * =====================================================================================================================
 */

.home-hero {
	/* Block-local knobs. Everything here is either a Figma value that is
	   only ever used by this block, or a timing that belongs to this one
	   load sequence. Shared values come from global.css. */
	/*--hero-min-height : 60.6875rem;*/  /* 971px ÷ 16 */
	--hero-min-height : 22.6875rem;  /* 971px ÷ 16 */
	--hero-pad-top    : 7.5rem;      /* 120px ÷ 16 */
	--hero-pad-bottom  : 13rem;      /* 208px ÷ 16 — larger than the top so the
	                                    content sits above the optical centre,
	                                    clear of the beige fade */
	--hero-heading-width : 41.625rem; /* 666px ÷ 16 */
	--hero-btn-width     : 19.1875rem; /* 307px ÷ 16 */
	--hero-btn-height    : 3.5rem;     /* 56px ÷ 16 */

	/* Load sequence timings */
	--hero-delay-eyebrow : 150ms;
	--hero-delay-heading : 280ms;
	/* Buttons wait for the last word to land. --word-count is set on the
	   element by render.php. */
	--hero-delay-actions : calc(
		var(--hero-delay-heading) + (var(--word-count, 6) * var(--motion-stagger)) + 120ms
	);

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: grid;
	align-items: center;
	justify-items: center;

	/* min() keeps the hero off the bottom of shorter laptop screens. For the
	   literal Figma height on every viewport, use min-height: var(--hero-min-height). */
	min-height: min(var(--hero-min-height), 80svh);
	padding: var(--hero-pad-top) var(--container-gutter) var(--hero-pad-bottom);

	overflow: hidden;
	background-color: var(--clr-warm-beige);
}


/*
 * Background image + gradient scrim
 * ---------------------------------------------------------------------------------------------------------------------
 * The scrim lives on the wrapper, not the image, so the image can scale
 * during the load sequence without dragging the gradient with it.
 */

.home-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;         /* contained by isolation: isolate on .home-hero */
	overflow: hidden;
}

.home-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-hero__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 80%;
	background: var(--gradient-hero-fade);
	pointer-events: none;
}


/*
 * Content
 * ---------------------------------------------------------------------------------------------------------------------
 */

.home-hero__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-width);
	text-align: center;
}

.home-hero__eyebrow {
	margin: 0 0 1rem;
	color: var(--clr-white);
	font-family: var(--ff-body);
	font-size: var(--fs-hero-eyebrow);
	font-weight: var(--fw-regular);
	line-height: 1.375;
	letter-spacing: 0.08em;
}

.home-hero__heading {
	max-width: var(--hero-heading-width);
	margin: 0 auto;
	color: var(--clr-white);
	font-family: var(--ff-heading);
	font-size: clamp(2.25rem, 6.4vw, var(--fs-hero-heading));
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: 1;   /* 100% */
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}

.home-hero__word {
	display: inline-block;
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}


/*
 * Buttons
 * ---------------------------------------------------------------------------------------------------------------------
 */

.home-hero__btn {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;   /* 10px ÷ 16 */

	inline-size: min(100%, var(--hero-btn-width));
	min-height: var(--hero-btn-height);
	padding: 0.5rem 1.75rem;

	border: 0 solid var(--clr-copper-deep);
	border-radius: var(--radius-pill);
	overflow: hidden;   /* clips the ::before gradient to the pill */

	font-family: var(--ff-body);
	font-size: var(--fs-btn);
	font-style: normal;
	font-weight: var(--fw-medium);
	line-height: 1.1875rem;   /* 19px ÷ 16 */
	letter-spacing: var(--ls-btn);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;

	transition:
		transform var(--motion-med) var(--ease-out-soft),
		box-shadow var(--motion-med) var(--ease-out-soft),
		color var(--motion-med) var(--ease-in-out-soft),
		border-color var(--motion-med) var(--ease-in-out-soft);
}

.home-hero__btn:focus-visible {
	outline: 2px solid var(--clr-white);
	outline-offset: 3px;
}

/* Gradients can't be transitioned, so the hover fill is a second gradient
   on a pseudo-element that cross-fades underneath the label. */
.home-hero__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity var(--motion-med) var(--ease-in-out-soft);
}

.home-hero__btn:hover::before,
.home-hero__btn:focus-visible::before {
	opacity: 1;
}

.home-hero__btn:active {
	transform: translateY(0);
}

/* Primary — copper gradient
   Scoped as `.home-hero a.home-hero__btn--primary` (0,2,1) on purpose.
   Astra's dynamic CSS colours anchors via `.entry-content a` (0,1,1), which
   beats a lone `.home-hero__btn--primary` (0,1,0) and repaints the label in
   the theme link colour. Specificity handles it without another !important. */
.home-hero a.home-hero__btn--primary {
	background: var(--gradient-cta);
	color: var(--clr-white);
}

.home-hero a.home-hero__btn--primary::before {
	background: var(--gradient-cta-hover);
}

/* The label MUST go dark here — --gradient-cta-hover starts at white, so a
   white label disappears into the left end of the pill. */
.home-hero a.home-hero__btn--primary:hover,
.home-hero a.home-hero__btn--primary:focus-visible {
	color: var(--clr-charcoal-black);
	transform: translateY(-1px);
	box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(161 103 69 / 0.45);
}

/* Secondary — outlined, for the rare two-button instance */
.home-hero a.home-hero__btn--secondary {
	border-radius: 3.125rem;
	border: 0 solid #A16745;
	background: linear-gradient(92deg, #C6845D -0.09%, #E1916C 100%);
	color: var(--clr-white);
}

.home-hero a.home-hero__btn--secondary::before {
	border-radius: 3.125rem;
	border: 0 solid #FFF;
	background: linear-gradient(92deg, #FFF -0.09%, #E1916C 100%);
}

.home-hero a.home-hero__btn--secondary:hover,
.home-hero a.home-hero__btn--secondary:focus-visible {
	border-color: var(--clr-white);
	color: var(--clr-charcoal-black);
}

/* The label and the arrow both take their colour from the anchor, so the
   scoped rules above are the only place button colour is ever set. */
.home-hero__btn-label {
	position: relative;
	color: inherit;
}


/*
 * Arrow relay
 * ---------------------------------------------------------------------------------------------------------------------
 * A fixed, clipped slot holding two identical arrows. At rest the first is
 * in place and the second is parked off to the left. On hover the first
 * leaves to the right and the second arrives behind it, so the arrow reads
 * as continuing forward rather than just nudging.
 */

.home-hero__btn-icon {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 1rem;
	height: 1rem;
	overflow: hidden;
}

.home-hero__btn-icon svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 1rem;
	height: 1rem;
}

.home-hero__btn-icon svg:last-child {
	transform: translateX(-170%);
}

@media (prefers-reduced-motion: no-preference) {

	.home-hero__btn-icon svg {
		transition: transform var(--motion-med) var(--ease-out-soft);
	}

	.home-hero__btn:hover .home-hero__btn-icon svg:first-child,
	.home-hero__btn:focus-visible .home-hero__btn-icon svg:first-child {
		transform: translateX(170%);
	}

	.home-hero__btn:hover .home-hero__btn-icon svg:last-child,
	.home-hero__btn:focus-visible .home-hero__btn-icon svg:last-child {
		transform: translateX(0);
		transition-delay: 60ms;   /* applies on the way in only */
	}

}


/*
 * Load sequence
 * ---------------------------------------------------------------------------------------------------------------------
 * One orchestrated moment, then the hero is still. Gated on both the
 * editor's toggle (.home-hero--no-motion) and the visitor's OS preference —
 * with motion off, the markup already renders in its final state, so
 * nothing needs resetting.
 */

@media (prefers-reduced-motion: no-preference) {

	.home-hero:not(.home-hero--no-motion) .home-hero__img {
		animation: home-hero-settle 1600ms var(--ease-out-soft) both;
	}

	.home-hero:not(.home-hero--no-motion) .home-hero__eyebrow {
		animation: home-hero-rise var(--motion-slow) var(--ease-out-soft) both;
		animation-delay: var(--hero-delay-eyebrow);
	}

	.home-hero:not(.home-hero--no-motion) .home-hero__word {
		animation: home-hero-word var(--motion-slow) var(--ease-out-soft) both;
		animation-delay: calc(
			var(--hero-delay-heading) + (var(--word-index, 0) * var(--motion-stagger))
		);
	}

	.home-hero:not(.home-hero--no-motion) .home-hero__actions {
		animation: home-hero-rise var(--motion-slow) var(--ease-out-soft) both;
		animation-delay: var(--hero-delay-actions);
	}

}

/* The photograph comes to rest rather than arriving — a 4% scale-down over
   1.6s, which is slow enough to read as camera settle, not a zoom effect. */
@keyframes home-hero-settle {
	from { transform: scale(1.04); }
	to   { transform: scale(1); }
}

/* Each word fades in from slightly left of where it belongs. Staggered
   left to right, the line assembles in reading order. */
@keyframes home-hero-word {
	from { opacity: 0; transform: translate3d(-0.3em, 0, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes home-hero-rise {
	from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
	to   { opacity: 1; transform: none; }
}


/*
 * Alternative heading reveal — left-to-right mask sweep
 * ---------------------------------------------------------------------------------------------------------------------
 * A single soft-edged wipe across the whole heading instead of per-word
 * staggering. Smoother and more "one gesture", but it needs @property to
 * animate (Chrome/Edge 85+, Safari 16.4+, Firefox 128+) and falls back to
 * no animation at all elsewhere. Swap in by commenting out the
 * .home-hero__word rule in the block above and uncommenting this.
 *
 * @property --hero-sweep {
 *     syntax: "<percentage>";
 *     inherits: false;
 *     initial-value: -20%;
 * }
 *
 * @media (prefers-reduced-motion: no-preference) {
 *     .home-hero:not(.home-hero--no-motion) .home-hero__heading {
 *         --hero-sweep: -20%;
 *         mask-image: linear-gradient(
 *             90deg,
 *             #000 0%,
 *             #000 var(--hero-sweep),
 *             transparent calc(var(--hero-sweep) + 18%)
 *         );
 *         animation: home-hero-sweep 1400ms var(--ease-in-out-soft) 280ms both;
 *     }
 * }
 *
 * @keyframes home-hero-sweep {
 *     from { --hero-sweep: -20%; }
 *     to   { --hero-sweep: 120%; }
 * }
 */


/*
 * Responsive
 * ---------------------------------------------------------------------------------------------------------------------
 */

@media only screen and (max-width: 64em) {   /* 1024px */

	.home-hero {
		--hero-pad-top: 5rem;
		--hero-pad-bottom: 9rem;
		min-height: min(45rem, 100svh);
	}

}

@media only screen and (max-width: 48em) {   /* 768px */

	.home-hero {
		--hero-pad-top: 4rem;
		--hero-pad-bottom: 7rem;
		min-height: min(36rem, 100svh);
	}

	.home-hero__actions {
		margin-top: 2rem;
	}

	.home-hero__btn {
		inline-size: min(100%, var(--hero-btn-width));
	}

}