/**
 * LabDiamond — landing page (cinematic luxury) styling + motion.
 *
 * Loaded only on the front page (see functions.php). Design values pull from
 * theme.json tokens (--wp--preset--*). Motion is wrapped in
 * prefers-reduced-motion: no-preference, so reduced-motion users get a fully
 * static, fully visible page with zero layout shift.
 *
 * Section copy stays in normal editable blocks; this file only adds visual
 * treatment + motion via class hooks (.ldd-reveal, .ldd-stagger, .ldd-cards,
 * .ldd-underline, .ldd-featured, .ldd-quotes) placed on those blocks.
 */

:root {
	--ldd-ease: cubic-bezier(0.16, 0.84, 0.32, 1);
	--ldd-gold: var(--wp--preset--color--accent, #c5a572);
	--ldd-ink: var(--wp--preset--color--contrast, #1a1a1a);
	--ldd-ivory: var(--wp--preset--color--base, #faf9f7);
	--ldd-platinum: var(--wp--preset--color--platinum, #e7e3dc);
	--ldd-shadow: 0 26px 60px -28px rgba(26, 26, 26, 0.5);
}

/* ----------------------------------------------------------------------- *
 *  Reveal-on-scroll system (JS adds .is-visible). Refined: blur + rise.
 * ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ldd-reveal {
		opacity: 0;
		transform: translateY(34px);
		filter: blur(8px);
		transition: opacity 1s var(--ldd-ease), transform 1s var(--ldd-ease), filter 1s var(--ldd-ease);
	}
	.ldd-reveal.is-visible { opacity: 1; transform: none; filter: none; }

	.ldd-stagger > * {
		opacity: 0;
		transform: translateY(34px) scale(0.985);
		filter: blur(6px);
		transition: opacity 0.85s var(--ldd-ease), transform 0.85s var(--ldd-ease), filter 0.85s var(--ldd-ease);
	}
	.ldd-stagger.is-visible > * { opacity: 1; transform: none; filter: none; }
	.ldd-stagger.is-visible > *:nth-child(1) { transition-delay: 0.06s; }
	.ldd-stagger.is-visible > *:nth-child(2) { transition-delay: 0.16s; }
	.ldd-stagger.is-visible > *:nth-child(3) { transition-delay: 0.26s; }
	.ldd-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
	.ldd-stagger.is-visible > *:nth-child(5) { transition-delay: 0.46s; }
	.ldd-stagger.is-visible > *:nth-child(6) { transition-delay: 0.56s; }
}

/* Gold hairline that draws in under a section heading when revealed. */
.ldd-underline { position: relative; padding-bottom: 0.6rem; }
.ldd-underline::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 70px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ldd-gold), transparent);
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
	.ldd-underline::after { transition: transform 1s var(--ldd-ease) 0.3s; }
	.is-visible.ldd-underline::after,
	.is-visible .ldd-underline::after { transform: translateX(-50%) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.ldd-underline::after { transform: translateX(-50%) scaleX(1); }
}

/* ----------------------------------------------------------------------- *
 *  HERO
 * ----------------------------------------------------------------------- */
.ldd-hero {
	position: relative;
	overflow: clip;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(125% 95% at 50% 14%, #23272f 0%, #15171c 46%, #0b0c10 100%);
	color: #fff;
	isolation: isolate;
}
.ldd-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ldd-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(72% 58% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.6) 100%);
}

/* Wrapper handles centering + mouse parallax (CSS vars set by JS). */
.ldd-hero__gemwrap {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(64vw, 560px);
	transform: translate(-50%, -50%) translate3d(calc(var(--ldd-px, 0) * 1px), calc(var(--ldd-py, 0) * 1px), 0);
	transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.ldd-hero__gem {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.52;
	filter: drop-shadow(0 0 70px rgba(197, 165, 114, 0.22));
}
.ldd-hero__gem .ldd-facet { fill: none; stroke: var(--ldd-gold); stroke-width: 1; opacity: 0.62; }
.ldd-hero__gem .ldd-facet--soft { fill: none; stroke: #fff; stroke-width: 1; opacity: 0.16; }

/* Soft gold glow that breathes behind the gem. */
.ldd-hero__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(50vw, 420px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(197, 165, 114, 0.22) 0%, transparent 62%);
	opacity: 0.7;
}

/* Brighter light sweep across the gem. */
.ldd-hero__sweep {
	position: absolute;
	top: 0;
	left: 0;
	width: 42%;
	height: 100%;
	background: linear-gradient(100deg, transparent 0%, rgba(197, 165, 114, 0.3) 46%, rgba(255, 255, 255, 0.22) 52%, transparent 100%);
	transform: translateX(-160%) skewX(-12deg);
	mix-blend-mode: screen;
}

.ldd-hero__inner {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 5rem) 1.25rem;
	text-align: center;
}
.ldd-hero__eyebrow {
	font-family: var(--wp--preset--font-family--body, sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--ldd-gold);
	margin: 0 0 1.25rem;
}
.ldd-hero h1 {
	font-family: var(--wp--preset--font-family--heading, serif);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: 0.005em;
	font-size: clamp(2.6rem, 7vw, 5.25rem);
	margin: 0;
	color: #fff;
}
.ldd-hero__rule {
	display: block;
	width: 72px;
	height: 1px;
	margin: 1.6rem auto;
	background: linear-gradient(90deg, transparent, var(--ldd-gold), transparent);
	transform-origin: center;
}
.ldd-hero__sub {
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.7;
	color: #d8d4cc;
	max-width: 46ch;
	margin: 0 auto 2.25rem;
}
.ldd-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 1.6rem;
	transform: translateX(-50%);
	width: 22px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
}
.ldd-hero__scroll::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 7px;
	width: 3px;
	height: 7px;
	border-radius: 2px;
	background: var(--ldd-gold);
	transform: translateX(-50%);
}
.ldd-hero .wp-block-button__link {
	transition: transform 0.3s var(--ldd-ease), box-shadow 0.3s var(--ldd-ease), background-color 0.3s var(--ldd-ease);
	letter-spacing: 0.04em;
}
.ldd-hero .wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px -14px rgba(197, 165, 114, 0.65);
}

@media (prefers-reduced-motion: no-preference) {
	.ldd-hero__gem { animation: lddSpin 44s linear infinite, lddFloat 7s ease-in-out infinite; }
	.ldd-hero__glow { animation: lddGlow 6s ease-in-out infinite; }
	.ldd-hero__sweep { animation: lddSweep 7.5s cubic-bezier(0.5, 0, 0.2, 1) 1s infinite; }
	.ldd-hero__eyebrow { animation: lddTrack 1.2s var(--ldd-ease) 0.2s both; }
	.ldd-hero h1 { animation: lddHeroIn 1.3s var(--ldd-ease) 0.35s both; }
	.ldd-hero__rule { animation: lddRuleIn 1.1s var(--ldd-ease) 0.6s both; }
	.ldd-hero__sub { animation: lddRise 1.1s var(--ldd-ease) 0.78s both; }
	.ldd-hero .wp-block-buttons { animation: lddRise 1.1s var(--ldd-ease) 0.95s both; }
	.ldd-hero__scroll { animation: lddRise 1s var(--ldd-ease) 1.4s both, lddBob 2.4s ease-in-out 2.4s infinite; }
}

@keyframes lddRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lddHeroIn { from { opacity: 0; transform: translateY(30px) scale(1.04); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lddRuleIn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes lddTrack { from { opacity: 0; letter-spacing: 0.6em; } to { opacity: 1; letter-spacing: 0.32em; } }
@keyframes lddSpin { to { transform: rotate(360deg); } }
@keyframes lddFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -16px; } }
@keyframes lddGlow { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes lddSweep { 0% { transform: translateX(-160%) skewX(-12deg); } 60%, 100% { transform: translateX(320%) skewX(-12deg); } }
@keyframes lddBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }

/* ----------------------------------------------------------------------- *
 *  Card sections (trust, 4C) — styles the existing .wp-block-column cards
 * ----------------------------------------------------------------------- */
.ldd-cards.wp-block-columns { align-items: stretch; }
.ldd-cards > .wp-block-column {
	background: #fff;
	border: 1px solid var(--ldd-platinum);
	border-radius: 6px;
	padding: clamp(1.6rem, 3vw, 2.25rem) 1.5rem;
	transition: transform 0.5s var(--ldd-ease), box-shadow 0.5s var(--ldd-ease), border-color 0.5s var(--ldd-ease);
}
.ldd-cards > .wp-block-column:hover {
	transform: translateY(-8px);
	box-shadow: var(--ldd-shadow);
	border-color: var(--ldd-gold);
}
.ldd-cards > .wp-block-column > .wp-block-heading::before {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 0 auto 1rem;
	background: var(--ldd-gold);
	opacity: 0.85;
}

/* ----------------------------------------------------------------------- *
 *  Featured collection — product cards
 * ----------------------------------------------------------------------- */
.ldd-featured .wp-block-woocommerce-product-template > li,
.ldd-featured .wc-block-grid__product {
	transition: transform 0.5s var(--ldd-ease), box-shadow 0.5s var(--ldd-ease);
	border-radius: 8px;
	overflow: clip;
}
.ldd-featured .wp-block-woocommerce-product-template > li:hover {
	transform: translateY(-8px);
	box-shadow: var(--ldd-shadow);
}
.ldd-featured .wp-block-woocommerce-product-template img { transition: transform 0.7s var(--ldd-ease); }
.ldd-featured .wp-block-woocommerce-product-template > li:hover img { transform: scale(1.06); }

/* ----------------------------------------------------------------------- *
 *  Testimonials — quote cards
 * ----------------------------------------------------------------------- */
.ldd-quotes > .wp-block-column {
	transition: transform 0.5s var(--ldd-ease), box-shadow 0.5s var(--ldd-ease);
	border: 1px solid var(--ldd-platinum);
	position: relative;
}
.ldd-quotes > .wp-block-column:hover { transform: translateY(-8px); box-shadow: var(--ldd-shadow); }
.ldd-quotes > .wp-block-column::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: 3.2rem;
	line-height: 0.5;
	color: var(--ldd-gold);
	margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------------- *
 *  Newsletter form
 * ----------------------------------------------------------------------- */
.ldd-newsletter__row { display: flex; gap: 0.6rem; max-width: 460px; margin: 0 auto; }
.ldd-newsletter__input {
	flex: 1;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: 1rem;
}
.ldd-newsletter__input::placeholder { color: #9a958c; }
.ldd-newsletter__input:focus-visible { outline: 2px solid var(--ldd-gold); outline-offset: 2px; }
.ldd-newsletter__button {
	padding: 0.85rem 1.6rem;
	border: 0;
	background: var(--ldd-gold);
	color: var(--ldd-ink);
	font-weight: 500;
	border-radius: 2px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	white-space: nowrap;
	transition: filter 0.3s var(--ldd-ease), transform 0.3s var(--ldd-ease);
}
.ldd-newsletter__button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ldd-newsletter__note { font-size: 0.78rem; color: #9a958c; text-align: center; margin: 0.9rem 0 0; }

/* ----------------------------------------------------------------------- *
 *  Mobile / responsive
 * ----------------------------------------------------------------------- */
@media (max-width: 781px) {
	.ldd-hero { min-height: 82vh; }
	.ldd-hero__gemwrap { width: 86vw; opacity: 0.9; }
	.ldd-hero h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
	/* WP stacks columns < 782px; tighten the card rhythm. */
	.ldd-cards.wp-block-columns,
	.ldd-quotes.wp-block-columns { gap: 1rem; }
}

@media (max-width: 600px) {
	.ldd-hero { min-height: 78vh; }
	.ldd-hero__inner { padding-inline: 1.25rem; }
	.ldd-newsletter__row { flex-direction: column; }
	.ldd-hero .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 0.75rem; }
	.ldd-hero .wp-block-button,
	.ldd-hero .wp-block-button__link { width: 100%; }
}

/* Featured grid: keep 2-up on tablet, 1-up on small phones if Woo renders a grid. */
@media (max-width: 781px) {
	.ldd-featured .wp-block-woocommerce-product-template { gap: 1.25rem; }
}