/**
 * Shared animation styles for the A-RH (Ascend) block set.
 *
 * Two animation systems:
 * 1. `.a-rh-fade-in` - CSS-only fade/rise on load, used by the hero
 *    (always in the initial viewport, so no scroll observer is needed).
 * 2. `.a-rh-animate` (+ a variant class) - scroll-triggered reveal.
 *    `animations.js` adds `.is-visible` via IntersectionObserver once the
 *    element enters the viewport; the transition then plays.
 *
 * Both systems are disabled under `prefers-reduced-motion: reduce`.
 */

/* ---------- On-load fade (hero) ---------- */

.a-rh-fade-in {
	opacity: 0;
	transform: translateY(16px);
	animation: a-rh-fade-in-up 0.8s ease-out forwards;
}

@keyframes a-rh-fade-in-up {
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Scroll-triggered reveal ---------- */

.a-rh-animate {
	opacity: 0;
	will-change: transform, opacity;
	transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--a-rh-delay, 0s);
}

.a-rh-animate.is-visible {
	opacity: 1;
	transform: none;
}

.a-rh-animate-up {
	transform: translateY(32px);
}

.a-rh-animate-reveal {
	transform: translateY(24px) scale(0.97);
}

.a-rh-animate-pop {
	transform: scale(0.82);
}

/* ---------- Shared delay utilities (on-load + scroll systems) ---------- */

.a-rh-delay-1 {
	animation-delay: 0.15s;
	transition-delay: 0.1s;
}

.a-rh-delay-2 {
	animation-delay: 0.3s;
	transition-delay: 0.2s;
}

.a-rh-delay-3 {
	animation-delay: 0.45s;
	transition-delay: 0.3s;
}

/* ---------- Hero background ---------- */

/*
 * Full-bleed background layer. Hidden below md by default so left-aligned
 * copy stays readable on narrow screens. Omit `--hide-mobile` (via the
 * "Show Background on Mobile" ACF toggle) to keep it visible at all widths.
 */
.a-rh-hero__bg--hide-mobile {
	display: none;
}

@media (min-width: 768px) {
	.a-rh-hero__bg--hide-mobile {
		display: block;
	}
}

.a-rh-hero__bg--blend .a-rh-hero__bg-img {
	mix-blend-mode: multiply;
}

/*
 * Optional mobile-only background layer (color, image, or gradient).
 * Hidden on desktop and in the editor; covers the desktop image and
 * Gutenberg color/gradient below 768px when Custom Mobile Background is on.
 */
.a-rh-hero__bg--mobile {
	display: none;
}

@media (max-width: 767px) {
	.a-rh-hero__bg--mobile {
		display: block;
	}

	.a-rh-hero--mobile-bg .a-rh-hero__bg:not(.a-rh-hero__bg--mobile) {
		display: none;
	}
}

/*
 * Fill the hero wrapper. Inline object-fit/object-position still override
 * for Text-layout Contain. Higher specificity than `.prose img` so typography
 * margins cannot letterbox the layer. Framed Image uses `.a-rh-hero__frame-img`
 * and is intentionally not targeted.
 */
.a-rh-hero__bg .a-rh-hero__bg-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transform-origin: center center;
}

.a-rh-hero--min-height {
	min-height: var(--a-rh-hero-min-h, 0px);
}

/*
 * Optional eyebrow above the H1. The element is omitted when the field is
 * empty, so unused heroes keep their current spacing. The following heading
 * loses its top margin only while the eyebrow is present.
 */
.a-rh-hero .a-rh-hero__eyebrow {
	margin: 0 0 0.75rem;
	padding: 0;
	max-width: 80rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: inherit;
}

.a-rh-hero__content.text-center .a-rh-hero__eyebrow {
	margin-left: auto;
	margin-right: auto;
}

.a-rh-hero .a-rh-hero__eyebrow + .a-rh-hero__heading {
	margin-top: 0;
}

@media (max-width: 767px) {
	.a-rh-hero--mobile-min-height {
		min-height: var(--a-rh-hero-mobile-min-h, 0px);
	}
}

/* ---------- Component specifics ---------- */

.a-rh-overlap-media,
.a-rh-overlap-stage,
.a-rh-overlap-pair {
	overflow: visible;
}

.a-rh-overlap-pair {
	position: relative;
	max-width: none;
}

.a-rh-overlap-pair .a-rh-overlap-image--primary {
	z-index: 1;
	background-color: transparent;
}

.a-rh-overlap-pair .a-rh-overlap-image--overlay {
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
}

.a-rh-overlap-pair .a-rh-overlap-image--overlay .a-rh-overlap-image__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
	min-height: 0;
	flex: 0 1 auto;
	object-fit: contain;
	object-position: center;
	contain-intrinsic-size: none;
	background-color: transparent;
}

/*
 * Transparent PNG/GIF/SVG: drop the rectangular card shadow (it reads as a
 * white fill) and follow the image alpha instead. Keep filter on the img so
 * the wrapper can still animate with transform.
 */
.a-rh-overlap-pair .a-rh-overlap-image--alpha {
	background-color: transparent;
	box-shadow: none;
	overflow: visible;
	filter: none;
}

.a-rh-overlap-pair .a-rh-overlap-image--alpha .a-rh-overlap-image__img {
	background-color: transparent;
	filter: drop-shadow(0 20px 25px rgb(0 0 0 / 0.12));
}

.a-rh-overlap-pair .a-rh-overlap-image--primary.a-rh-fade-in {
	transform: none;
}

/*
 * Overflow: pull the image stage up over the previous section (hero).
 * Negative margin is on the stage so inner padding no longer eats the value.
 * :has() keeps parent Section blocks from clipping the overlap.
 */
.a-rh-overlap-images--overflow {
	overflow: visible;
	z-index: 10;
}

.a-rh-overlap-images--overflow .a-rh-overlap-media,
.a-rh-overlap-images--overflow .a-rh-overlap-stage,
.a-rh-overlap-images--overflow .a-rh-overlap-pair {
	overflow: visible;
	z-index: 3;
}

.a-rh-overlap-images--overflow .a-rh-overlap-stage {
	margin-top: calc(-1 * var(--a-rh-overlap-overflow, 0px));
}

/*
 * Mobile: images stack above the text. Overflow into the previous section
 * is off unless Keep Overflow on Mobile is on, which uses its own amount.
 */
@media (max-width: 639px) {
	.a-rh-overlap-images--overflow:not(.a-rh-overlap-images--overflow-mobile) .a-rh-overlap-stage {
		margin-top: 0;
	}

	.a-rh-overlap-images--overflow:not(.a-rh-overlap-images--overflow-mobile) > .container {
		padding-top: 4rem;
	}

	.a-rh-overlap-images--overflow-mobile .a-rh-overlap-stage {
		margin-top: calc(-1 * var(--a-rh-overlap-overflow-mobile, 0px));
	}

	.a-rh-overlap-pair {
		width: 100% !important;
		max-width: 100%;
	}
}

/*
 * Image Left + oversized primary: extra width hangs off the outer page edge
 * so the collage stays on the left instead of covering the hero photo.
 * Mobile stays full-column so the overlay is not cropped.
 */
@media (min-width: 640px) {
	.a-rh-overlap-images--image-left.a-rh-overlap-images--oversized .a-rh-overlap-pair {
		margin-left: calc(100% - var(--a-rh-overlap-primary-size, 100) * 1%);
	}
}

.section-block:has(.a-rh-overlap-images--overflow),
.section-block-content:has(.a-rh-overlap-images--overflow),
.acf-innerblocks-container:has(.a-rh-overlap-images--overflow),
.section-block:has(.a-rh-overlap-images--oversized),
.section-block-content:has(.a-rh-overlap-images--oversized),
.acf-innerblocks-container:has(.a-rh-overlap-images--oversized) {
	overflow: visible;
}

.a-rh-gradient-card {
	z-index: 1;
}

/*
 * Side-by-side icon row: desktop uses the ACF pixel size as a cap. Below sm
 * the icons share the row, shrink to fit, and keep a gap between them.
 */
.a-rh-icon-row {
	--a-rh-icon-size: 80px;
}

.a-rh-icon-swatch {
	width: var(--a-rh-icon-size);
	height: var(--a-rh-icon-size);
	flex-shrink: 0;
}

.a-rh-icon-glyph {
	width: 50%;
	height: 50%;
}

@media (max-width: 639px) {
	.a-rh-icon-row {
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
	}

	.a-rh-icon-item {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	.a-rh-icon-swatch {
		width: 100%;
		max-width: var(--a-rh-icon-size);
		height: auto;
		aspect-ratio: 1 / 1;
		margin-inline: auto;
	}

	.a-rh-icon-item span {
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}

/*
 * `--a-rh-dot-inactive` / `--a-rh-dot-active` are optional custom properties
 * set inline on `.a-rh-step-rail` from the block's color picker fields; when
 * unset they fall back to the original currentColor-based tinting.
 */
.a-rh-step-dot {
	color: var(--a-rh-dot-inactive, color-mix(in srgb, currentColor 35%, transparent));
	background-color: transparent;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.a-rh-step-dot.is-active {
	color: var(--a-rh-dot-active, currentColor);
	background-color: color-mix(in srgb, var(--a-rh-dot-active, currentColor) 10%, transparent);
}

/* Optional General Sans subtitle above headings. Hidden when the ACF field is empty. */
.a-rh-subtitle {
	font-family: "General Sans", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 0.25rem;
	color: inherit;
}

.a-rh-side-by-side .a-rh-subtitle,
.a-rh-overlap-images .a-rh-subtitle,
.a-rh-sticky-scroll .a-rh-subtitle {
	margin-top: 0;
	margin-bottom: 0.25rem;
}

.a-rh-side-by-side .a-rh-subtitle + h3,
.a-rh-overlap-images .a-rh-subtitle + h2,
.a-rh-sticky-scroll .a-rh-subtitle + h2,
.a-rh-sticky-scroll .a-rh-subtitle + h3 {
	margin-top: 0;
}

/* Desktop step min-height; --a-rh-step-min-h is set on the block root from ACF. */
@media (min-width: 768px) {
	.a-rh-sticky-scroll .a-rh-scroll-section {
		min-height: var(--a-rh-step-min-h, 45vh);
	}
}

/* ---------- Reduced motion: show final state immediately, no motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.a-rh-fade-in,
	.a-rh-animate {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}