/**
 * Home Hero block (blocks/content/home-hero.php)
 *
 * Full-viewport hero pulled up under the transparent, overlaid site header
 * (the header is position:sticky, so a negative margin-top equal to the shared
 * --dm-header-h var slides the hero flush beneath it — same technique as the
 * collection PLP hero in collection-plp.css). The transparent→cream header
 * swap on scroll is handled by body.dm-transparent-header (header.css + header.js).
 */

.dm-home-hero {
	--dm-topbar-h: 0px;                 /* raised to the topbar height when present (below) */
	position: relative;
	width: 100%;
	/* Fill the viewport minus the announcement topbar (which sits above the
	   sticky header in normal flow), so the first fold = topbar + hero = 100vh
	   with no overflow. Falls back to plain vh where svh is unsupported. */
	min-height: calc(100vh - var(--dm-topbar-h));
	min-height: calc(100svh - var(--dm-topbar-h));
	margin-top: calc(-1 * var(--dm-header-h, 88px));
	overflow: hidden;
	/* Starts black so the media fades up from a dark ground on load. */
	background: var(--dm-ext-black);
	border-bottom: 5px solid var(--color-forest, var(--dm-border-default-dark-strong));
}

/* When the Customizer announcement topbar is rendered, shrink the hero by its
   height so the section still reads as a single full-viewport fold. */
body:has(.dm-topbar) .dm-home-hero {
	--dm-topbar-h: 32px;               /* matches .dm-topbar-inner height in header.css */
}

/* ---- Media (poster + video share the same box) ---------------------- */
.dm-home-hero__media,
.dm-home-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dm-home-hero__media picture,
.dm-home-hero__media img,
.dm-home-hero__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.dm-home-hero__media-fallback {
	width: 100%;
	height: 100%;
	background: var(--dm-ext-black);
}

/* Video sits above the poster once hero-video.js reveals it. */
.dm-home-hero__video {
	z-index: 1;
}

/* ---- Background fade-in ---------------------------------------------- *
 * On load the section shows black, then the poster (and video, once it
 * reveals) fades up smoothly over ~1.6s so the imagery eases in rather than
 * popping. Skipped for reduced-motion (media is simply shown). */
@media (prefers-reduced-motion: no-preference) {
	.dm-home-hero__media,
	.dm-home-hero__video {
		animation: dm-hero-media-in 2.2s cubic-bezier(0.33, 0, 0.2, 1) both;
	}
}

@keyframes dm-hero-media-in {
	from {
		opacity: 0;
		transform: scale(1.06);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---- Dark overlay (keeps the cream header + text legible) ------------ *
 * Darker top (behind the nav) and bottom (behind the heading/CTA), lighter
 * through the middle so the flame stays visible — mirrors the screenshot. */
.dm-home-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		/* Extra black gradient from the very top (behind the header). */
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--dm-ext-black) 70%, transparent) 0%,
			color-mix(in srgb, var(--dm-ext-black) 35%, transparent) 12%,
			transparent 32%
		),
		/* Base darkening (top + bottom for text legibility). */
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--dm-ext-black) 50%, transparent) 0%,
			color-mix(in srgb, var(--dm-ext-black) 28%, transparent) 22%,
			color-mix(in srgb, var(--dm-ext-black) 20%, transparent) 52%,
			color-mix(in srgb, var(--dm-ext-black) 55%, transparent) 100%
		);
}

/* ---- Content layout -------------------------------------------------- *
 * Flex column with a flexible gap above the heading and another between the
 * heading and the bottom row → heading floats lower-left, footer pins bottom.
 * Constrained to the site container (adds `container mx-auto` in the markup) so
 * the heading's left edge and the footer's right edge line up with the header
 * logo/nav. Matches the header's 16px side gutter below the lg breakpoint. */
.dm-home-hero__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-top: calc(var(--dm-header-h, 88px) + 2rem);
	padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
	padding-inline: 16px;               /* mirrors .dm-header-inner on mobile */
}

@media (min-width: 1024px) {
	.dm-home-hero__content {
		/* Keep a real gutter that matches the site's sections (16px). Tailwind's
		   .container is full-width at each exact breakpoint (1024px, 1280px…), so
		   relying on its max-width alone left no side margin and clipped the
		   heading at ~1024px. 16px keeps it aligned with .dm-*__grid sections. */
		padding-inline: 16px;
	}
}

/* ---- Heading (roman line + italic line) ------------------------------ */
.dm-home-hero__heading {
	margin: auto 0 0;                   /* flexible space above → sits mid/lower */
	max-width: min(72%, 760px);
	color: var(--dm-fg-default-white);                        /* Semantics/fg/default/white */
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	line-height: 1.1;                   /* 110% (80px → 88px) */
	letter-spacing: -0.05em;            /* tightened (~-4px at 80px) */
	text-shadow: 0 2px 24px color-mix(in srgb, var(--dm-ext-black) 35%, transparent);
}

.dm-home-hero__heading-roman,
.dm-home-hero__heading-italic {
	display: block;
	/* Figma small-desktop size (64px) is applied in the 1024-1280 block at
	   the end of this file; above that the original 80px cap stands. */
	font-size: clamp(2.75rem, 8vw, 5rem);
}

.dm-home-hero__heading-roman {
	font-style: normal;
}

.dm-home-hero__heading-italic {
	font-style: italic;
}

/* ---- Footer: intro paragraph + CTA, pinned bottom-right -------------- */
.dm-home-hero__footer {
	margin-top: auto;                   /* flexible space between heading + footer */
	align-self: flex-end;               /* right edge (cross axis in a column) */
	max-width: 460px;
	text-align: left;
}

.dm-home-hero__intro {
	margin: 0 0 1.5rem;
	color: var(--dm-fg-default-white);                        /* Semantics/fg/default/white */
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 18px;                    /* body/lg/regular */
	font-weight: 400;
	line-height: 1.4;                   /* 140% → 25.2px */
	text-shadow: 0 1px 12px color-mix(in srgb, var(--dm-ext-black) 45%, transparent);
}

/* Sun-yellow pill CTA with a forest play glyph (Figma "Experience" button). */
.dm-home-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 48px;
	padding: 0 1.25rem 0 0.5rem;        /* tighter left: icon has its own circle */
	border-radius: 999px;
	background: var(--dm-bg-accent-yellow);   /* Semantics/bg/accent/yellow — #FAD609 */
	color: var(--dm-fg-default-primary);                     /* Semantics/fg/default/primary */
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;                    /* body/md/regular */
	font-weight: 400;
	line-height: 1.4;                   /* 140% → 22.4px */
	text-decoration: none;
	white-space: nowrap;
}

.dm-home-hero__cta-icon {
	display: block;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
}

/* ---- Full-video CTA modal (lazy player) ----------------------------- *
 * Native <dialog>; the <video>/<iframe> is injected on open by
 * home-hero-modal.js, so the full film never loads with the page. */
.dm-hero-modal {
	border: 0;
	padding: 0;
	margin: auto;                       /* centre in the top layer */
	width: min(92vw, 1100px);
	max-width: 100%;
	background: transparent;
	color: var(--dm-fg-default-white);
	overflow: visible;
}

.dm-hero-modal[open] {
	display: flex;                      /* stack close button over the player */
	flex-direction: column;
}

.dm-hero-modal::backdrop {
	background: color-mix(in srgb, var(--dm-ext-black) 82%, transparent);
}

.dm-hero-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0.75rem auto;           /* right-aligned, above the player */
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 999px;
	background: var(--dm-bg-accent-yellow);   /* Semantics/bg/accent/yellow — #FAD609 */
	color: var(--dm-fg-default-white);  /* white X on the yellow pill */
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dm-hero-modal__body {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--dm-ext-black);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 25px 60px color-mix(in srgb, var(--dm-ext-black) 50%, transparent);
}

.dm-hero-modal__video,
.dm-hero-modal__iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Lock background scroll while the player is open. */
body.dm-hero-modal-lock {
	overflow: hidden;
}

/* ---- Scroll cue (bottom-center double chevron) ---------------------- *
 * Animation (bob + fade) and click-to-scroll come from the shared
 * initScrollArrowAnimations() in gsap-animations.js. */
.dm-home-hero__scroll {
	position: absolute;
	z-index: 4;                         /* above overlay (2) + content (3) */
	left: 50%;
	bottom: clamp(1rem, 3vh, 2rem);
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	background: none;
	border: 0;
	color: var(--dm-fg-default-white);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.dm-home-hero__chevrons {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 0;
}

.dm-home-hero__chev {
	display: block;
	width: 22px;
	height: auto;
	filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--dm-ext-black) 35%, transparent));
}

.dm-home-hero__chev--2 {
	margin-top: -3px;                   /* nest the second chevron under the first */
}

/* Zero-size, invisible — only exists so the theme's scroll-arrow JS keeps
   click-to-scroll bound (it animates this, not the visible chevrons). */
.dm-home-hero__scroll-marker {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Two chevrons fade in from the top and drift down, each at a different speed
   so they cascade. Off for reduced-motion (static chevrons remain). */
@media (prefers-reduced-motion: no-preference) {
	.dm-home-hero__chev--1 {
		animation: dm-hero-chev 1.7s ease-in-out infinite;
	}

	.dm-home-hero__chev--2 {
		animation: dm-hero-chev 2.2s ease-in-out infinite;
	}
}

@keyframes dm-hero-chev {
	0% {
		opacity: 0;
		transform: translateY(-4px);
	}
	35% {
		opacity: 1;
	}
	70% {
		opacity: 0.35;
	}
	100% {
		opacity: 0;
		transform: translateY(5px);
	}
}

/* Desktop-only (matches the GSAP bob) so it never crowds the mobile CTA. */
@media (max-width: 767px) {
	.dm-home-hero__scroll {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-home-hero__scroll {
		opacity: 0.85;                  /* static, still visible */
	}
}

/* ---- Mobile: stack, left-aligned near the bottom -------------------- *
 * Matches the Figma mobile hero: display-M heading (50px / 110% / -1px),
 * body/lg intro and the sun-yellow CTA grouped in the lower-left. */
@media (max-width: 767px) {
	.dm-home-hero__content {
		padding-bottom: 2.5rem;         /* Figma: comfortable base gutter */
	}

	/* Heavier, taller black gradient at the bottom so the stacked heading +
	   intro + CTA stay legible over the imagery on small screens. */
	.dm-home-hero__overlay {
		background:
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--dm-ext-black) 70%, transparent) 0%,
				color-mix(in srgb, var(--dm-ext-black) 30%, transparent) 12%,
				transparent 30%
			),
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--dm-ext-black) 45%, transparent) 0%,
				color-mix(in srgb, var(--dm-ext-black) 12%, transparent) 30%,
				color-mix(in srgb, var(--dm-ext-black) 35%, transparent) 60%,
				color-mix(in srgb, var(--dm-ext-black) 85%, transparent) 100%
			);
	}

	.dm-home-hero__heading {
		max-width: 40ch;                /* hold the display heading to a tighter, more balanced wrap */
		letter-spacing: -1px;           /* Figma display-M tracking (looser than desktop) */
	}

	/* Fixed 50px from the Figma spec rather than the desktop viewport clamp,
	   which bottomed out below the intended size on a 375–430px screen. */
	.dm-home-hero__heading-roman,
	.dm-home-hero__heading-italic {
		font-size: 50px;
	}

	.dm-home-hero__footer {
		align-self: flex-start;
		max-width: 100%;
		margin-top: 3rem;               /* more breathing room between title and intro */
	}

	.dm-home-hero__intro {
		margin-bottom: 1.8rem;          /* a touch more air before the CTA */
	}
}

/* Very small phones: nudge the display heading down so three lines still fit
   above the intro without crowding the safe area. */
@media (max-width: 380px) {
	.dm-home-hero__heading-roman,
	.dm-home-hero__heading-italic {
		font-size: 44px;
	}
}

/* ---- Small desktop (1280+): match the Figma board -------------------- *
 * Figma "Home Page - Small Desktop": hero band 1280x551, content box 1080
 * (100px gutters), heading -> intro gap 40, bottom padding 32.
 * The ratio replaces the full-viewport min-height so the band keeps its
 * proportions as the window grows. `width: 100%` above keeps the width
 * definite, so the ratio can only ever resolve to a height. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-home-hero {
		min-height: 0;
		aspect-ratio: 1280 / 551;
	}

	.dm-home-hero__content {
		/* The capped 1080 container already provides Figma's 100px gutter. */
		padding-inline: 0;
		justify-content: flex-end;
		padding-bottom: 32px;
	}

	.dm-home-hero__heading {
		margin-top: 0;                  /* drop the flexible push; content is bottom-aligned */
	}

	.dm-home-hero__footer {
		margin-top: 40px;               /* Figma gap between heading and intro */
	}

	.dm-home-hero__heading-roman,
	.dm-home-hero__heading-italic {
		font-size: 64px;                /* Figma small desktop */
		letter-spacing: -0.02em;        /* -1.28px at 64px (set here, where the
		                                   font-size is, so the em resolves right) */
	}

	.dm-home-hero__footer {
		max-width: 490px;               /* Figma small desktop: 490 */
	}

	.dm-home-hero__cta {
		padding: 0 1rem 0 0.5rem;       /* Figma: pl 8, pr 16 */
	}
}