/* ===== HandiFable Lamb Landing · v5 full-screen image + frosted overlay ===== */

/* Shared full-bleed black canvas (same as v4). */
body.hl-landing-page {
	background: #000 !important;
}
body.hl-landing-page header,
body.hl-landing-page .wp-site-header {
	display: none;
}
body.hl-landing-page .wp-site-footer,
body.hl-landing-page footer {
	background: #fff;
}
body.hl-landing-page .wp-block-post-title {
	display: none;
}
body.hl-landing-page .wp-site-blocks,
body.hl-landing-page main,
body.hl-landing-page .entry-content {
	background: #000 !important;
}
body.hl-landing-page .hl5-wrap {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* Custom page H1 (rendered above the wrap) */
body.hl-landing-page .hl-page-title {
	background: #000;
	color: var(--hl5-ink);
	margin: 0;
	padding: 3.5rem clamp(1.5rem, 6vw, 4rem) 0;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.hl5-wrap {
	--hl5-ink: #f5f2ec;
	--hl5-muted: rgba(245, 242, 236, 0.85);
	--hl5-faint: rgba(245, 242, 236, 0.4);
	--hl5-line: rgba(245, 242, 236, 0.16);
	--hl5-accent: #e6a15c;
	background: #000;
	color: var(--hl5-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
}
.hl5-wrap,
.hl5-wrap *,
.hl5-wrap *::before,
.hl5-wrap *::after { box-sizing: border-box; }
.hl5-wrap img { max-width: 100%; height: auto; display: block; }
.hl5-wrap p { margin: 0 0 1rem; }

/* ===== Variant module: tall scroll space + sticky full-screen stage ===== */
.hl5-module {
	position: relative;
	height: 200vh;
}
.hl5-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

/* Full-bleed product image (the "background"). Shown in full, centered on
   black, so no part of the portrait image is cropped on wide screens. */
.hl5-media {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}
.hl5-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.6));
}

/* Full-width frosted overlay ("door"). Hidden until the user scrolls a little
   (progress past ~0.18), then it slides in and the image behind turns to
   frosted glass with a strong blur. */
.hl5-mask {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, 0.5);
	-webkit-backdrop-filter: blur(clamp(0px, (var(--hl5-p, 0) - 0.18) * 55px, 38px)) saturate(1.35);
	backdrop-filter: blur(clamp(0px, (var(--hl5-p, 0) - 0.18) * 55px, 38px)) saturate(1.35);
	opacity: clamp(0, (var(--hl5-p, 0) - 0.18) * 4.5, 1);
	will-change: backdrop-filter, opacity;
}

/* The copy sits full-width on top; it slides up and fades in as one group,
   appearing together with the frosted door. */
.hl5-copy {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(2rem, 8vw, 6rem) clamp(1.5rem, 6vw, 4rem);
	opacity: clamp(0, (var(--hl5-p, 0) - 0.22) * 5, 1);
	transform: translateY(calc((1 - var(--hl5-p, 0)) * 44px));
	will-change: opacity, transform;
}
.hl5-name {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 1.4rem;
}
.hl5-para {
	font-size: 1.06rem;
	color: var(--hl5-muted);
	margin: 0 auto 0.9rem;
	max-width: 34em;
}
.hl5-mod-buy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2rem;
}
.hl5-price {
	color: var(--hl5-accent);
	font-size: 1.3rem;
	font-weight: 600;
}
.hl5-price .woocommerce-Price-currencySymbol { font-size: 0.85em; }
.hl5-btn {
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 2.5rem;
	background: #fff;
	color: #000;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.hl5-btn:hover { transform: translateY(-2px); background: var(--hl5-accent); }
.hl5-btn.is-loading { opacity: 0.5; pointer-events: none; }
.hl-buy-form { display: contents; }

.hl5-count {
	position: absolute;
	top: 6vh;
	right: 6vw;
	color: var(--hl5-faint);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	z-index: 2;
}
.hl5-msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hl5-faint);
	font-size: 0.9rem;
}

/* ===== responsive ===== */
@media (max-width: 860px) {
	.hl5-copy { padding: 2.5rem 1.25rem; }
	.hl5-mod-buy { flex-direction: column; gap: 0.75rem; }
}