/* =====================================================================
 * DelRay Multimedia — Calling Card
 * Homepage layout + motion system. Tokens come from theme.json.
 * Every animation is gated behind prefers-reduced-motion.
 * ===================================================================== */

:root {
	--dm-dur-fast: var(--wp--custom--motion--dur-fast, 150ms);
	--dm-dur: var(--wp--custom--motion--dur, 320ms);
	--dm-dur-slow: var(--wp--custom--motion--dur-slow, 640ms);
	--dm-ease: var(--wp--custom--motion--ease-out, cubic-bezier(0.16, 1, 0.30, 1));
	--dm-spring: var(--wp--custom--motion--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
	--dm-stagger: var(--wp--custom--motion--stagger, 90ms);
}

/* ---------------------------------------------------------------------
 * 0. Header + primary navigation (logo left, menu right, no dated underlines)
 * ------------------------------------------------------------------- */
.dm-header { position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(1.1) blur(6px); }
.dm-header .wp-block-site-logo img {
	width: 240px;
	max-width: 46vw;
	height: auto;
	transition: transform var(--dm-dur) var(--dm-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.dm-header .wp-block-site-logo a:hover img { transform: scale(1.04); }
}
.dm-nav {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.01em;
	gap: clamp(1rem, 2.2vw, 2.1rem);
}
.dm-nav .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	padding-block: 0.25rem;
}
/* modern hover: short turquoise→gold bar grows from the left, no full underline */
.dm-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 100%; height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dm-dur) var(--dm-ease);
}
.dm-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.dm-nav .wp-block-navigation-item .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}
.dm-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
.dm-nav .wp-block-navigation-item__content:hover { text-decoration: none; }

/* ---------------------------------------------------------------------
 * 1. Scroll reveals  (CSS scroll-driven primary, IntersectionObserver fallback)
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.dm-reveal {
			animation: dm-rise both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
		.dm-reveal-group > * {
			animation: dm-rise both;
			animation-timeline: view();
			animation-range: entry 2% entry 46%;
		}
		.dm-reveal-group > *:nth-child(2) { animation-delay: var(--dm-stagger); }
		.dm-reveal-group > *:nth-child(3) { animation-delay: calc(var(--dm-stagger) * 2); }
		.dm-reveal-group > *:nth-child(4) { animation-delay: calc(var(--dm-stagger) * 3); }
	}
	@supports not (animation-timeline: view()) {
		.dm-reveal,
		.dm-reveal-group > * {
			opacity: 0;
			transform: translateY(26px);
			transition: opacity var(--dm-dur-slow) var(--dm-ease),
			            transform var(--dm-dur-slow) var(--dm-ease);
		}
		.dm-reveal.is-in,
		.dm-reveal-group.is-in > * { opacity: 1; transform: none; }
		.dm-reveal-group.is-in > *:nth-child(2) { transition-delay: var(--dm-stagger); }
		.dm-reveal-group.is-in > *:nth-child(3) { transition-delay: calc(var(--dm-stagger) * 2); }
		.dm-reveal-group.is-in > *:nth-child(4) { transition-delay: calc(var(--dm-stagger) * 3); }
	}
}
@keyframes dm-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
 * 2. Kinetic headline  (Navy -> Turquoise gradient sweep on the keyword)
 * ------------------------------------------------------------------- */
@property --dm-shift { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

.dm-kinetic mark {
	background: linear-gradient(90deg,
		var(--wp--preset--color--navy) 0%,
		var(--wp--preset--color--accent) 50%,
		var(--wp--preset--color--accent-bright) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 200% 100%;
	background-position: var(--dm-shift) 0;
}
@media (prefers-reduced-motion: no-preference) {
	.dm-kinetic mark { animation: dm-sweep 2.6s var(--dm-ease) infinite alternate; }
}
@keyframes dm-sweep { from { --dm-shift: 0%; } to { --dm-shift: 100%; } }

/* ---------------------------------------------------------------------
 * 3. Buttons  —  Turquoise -> Gold -> Orange sweep + lift + click spark
 * ------------------------------------------------------------------- */
.wp-block-button.is-style-dm-cta > .wp-block-button__link {
	--pos: 0%;
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--accent);
	background-image: linear-gradient(100deg,
		var(--wp--preset--color--accent) 0%,
		var(--wp--preset--color--accent) 34%,
		var(--wp--preset--color--gold) 64%,
		var(--wp--preset--color--orange) 100%);
	background-size: 260% 100%;
	background-position: var(--pos) 0;
	border: none;
	box-shadow: 0 10px 26px -14px rgba(15, 176, 184, 0.55);
	transition: background-position var(--dm-dur) var(--dm-ease),
	            transform var(--dm-dur-fast) var(--dm-spring),
	            box-shadow var(--dm-dur) var(--dm-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.is-style-dm-cta > .wp-block-button__link:hover,
	.is-style-dm-cta > .wp-block-button__link:focus-visible {
		--pos: 72%;
		transform: translateY(-2px);
		box-shadow: 0 16px 34px -12px rgba(255, 122, 26, 0.55);
	}
	.is-style-dm-cta > .wp-block-button__link:active { transform: translateY(0) scale(0.98); }
}

/* Playful variant — gold/orange at rest, springy */
.wp-block-button.is-style-dm-playful > .wp-block-button__link {
	color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--gold);
	background-image: linear-gradient(120deg, var(--wp--preset--color--gold), var(--wp--preset--color--orange));
	border: none;
	transition: transform var(--dm-dur-fast) var(--dm-spring), box-shadow var(--dm-dur) var(--dm-ease), filter var(--dm-dur) var(--dm-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.is-style-dm-playful > .wp-block-button__link:hover,
	.is-style-dm-playful > .wp-block-button__link:focus-visible {
		transform: translateY(-2px) rotate(-1.5deg) scale(1.03);
		box-shadow: 0 16px 34px -12px rgba(244, 183, 64, 0.6);
	}
}

/* WAAPI click ripple injected by motion.js */
.dm-spark { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.85), transparent 60%); }

/* Outline buttons re-tinted for light mode */
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--border);
	transition: border-color var(--dm-dur) var(--dm-ease), color var(--dm-dur) var(--dm-ease), transform var(--dm-dur-fast) var(--dm-spring);
}
.is-style-outline > .wp-block-button__link:hover,
.is-style-outline > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	background: transparent;
}

/* ---------------------------------------------------------------------
 * 4. Hero
 * ------------------------------------------------------------------- */
.dm-hero {
	position: relative;
	overflow: clip;
	isolation: isolate;
	background:
		radial-gradient(60% 80% at 85% 10%, rgba(15, 176, 184, 0.10), transparent 60%),
		radial-gradient(50% 60% at 10% 90%, rgba(244, 183, 64, 0.10), transparent 60%),
		var(--wp--preset--color--base);
}
.dm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.dm-eyebrow::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 4px rgba(15, 176, 184, 0.18);
}
@media (prefers-reduced-motion: no-preference) {
	.dm-eyebrow::before { animation: dm-pulse 2.2s ease-in-out infinite; }
}
@keyframes dm-pulse { 50% { box-shadow: 0 0 0 8px rgba(15, 176, 184, 0); } }

/* Floating colour orbs */
.dm-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.dm-orb { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.55; }
.dm-orb--turq { width: 360px; height: 360px; top: -60px; right: 4%; background: #0fb0b8; }
.dm-orb--gold { width: 300px; height: 300px; bottom: -80px; left: 6%; background: #f4b740; }
.dm-orb--orange { width: 220px; height: 220px; top: 40%; right: 38%; background: #ff7a1a; opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
	.dm-orb--turq { animation: dm-float-a 14s ease-in-out infinite; }
	.dm-orb--gold { animation: dm-float-b 18s ease-in-out infinite; }
	.dm-orb--orange { animation: dm-float-a 16s ease-in-out infinite reverse; }
}
@keyframes dm-float-a { 50% { transform: translate(-26px, 30px) scale(1.08); } }
@keyframes dm-float-b { 50% { transform: translate(30px, -24px) scale(1.10); } }

/* Hero SVG node-graph figure */
.dm-figure { width: 100%; height: auto; display: block; overflow: visible; }
.dm-figure .dm-wire {
	fill: none;
	stroke: url(#dmWire);
	stroke-width: 2.5;
	stroke-linecap: round;
	opacity: 0.85;
}
.dm-figure .dm-pulse {
	fill: none;
	stroke: var(--wp--preset--color--accent-bright);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 2 16;
	opacity: 0;
}
.dm-figure .dm-node { transform-box: fill-box; transform-origin: center; }
.dm-figure .dm-node-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
	fill: var(--wp--preset--color--navy);
}
.dm-figure .dm-core-ring {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.5;
	opacity: 0.35;
	transform-box: fill-box;
	transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
	/* wires draw on, then stay solid (visible without motion too) */
	.dm-figure .dm-wire { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dm-draw 1.4s var(--dm-ease) forwards; }
	.dm-figure .dm-pulse { opacity: 1; animation: dm-flowdash 2.4s linear infinite; }
	.dm-figure .dm-node { animation: dm-pop var(--dm-dur) var(--dm-spring) both; }
	.dm-figure .dm-node--2 { animation-delay: 0.08s; }
	.dm-figure .dm-node--3 { animation-delay: 0.16s; }
	.dm-figure .dm-node--4 { animation-delay: 0.24s; }
	.dm-figure .dm-node--5 { animation-delay: 0.32s; }
	.dm-figure .dm-node--6 { animation-delay: 0.40s; }
	.dm-figure .dm-core { animation: dm-breathe 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
	.dm-figure .dm-core-ring { animation: dm-ring 3.2s ease-out infinite; }
	.dm-figure .dm-core-ring--2 { animation-delay: 1.6s; }
}
@keyframes dm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dm-flowdash { to { stroke-dashoffset: -18; } }
@keyframes dm-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes dm-breathe { 50% { transform: scale(1.04); } }
@keyframes dm-ring { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.3); opacity: 0; } }

/* ---------------------------------------------------------------------
 * 5. Section helpers + panels + chips (Transparency Matrix)
 * ------------------------------------------------------------------- */
.dm-section { padding-block: var(--wp--preset--spacing--70); }

.is-style-dm-panel {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--50);
	height: 100%;
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform var(--dm-dur) var(--dm-ease), box-shadow var(--dm-dur) var(--dm-ease), border-color var(--dm-dur) var(--dm-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.is-style-dm-panel:hover {
		transform: translateY(-6px);
		border-color: rgba(15, 176, 184, 0.4);
		box-shadow: var(--wp--preset--shadow--raised);
	}
}
.is-style-dm-panel > .wp-block-heading::before {
	content: "";
	display: block;
	width: 40px; height: 4px;
	margin-block-end: 0.85rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--gold));
}

.dm-chips { gap: 0.6rem; }
.dm-chips .wp-block-paragraph {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	transition: transform var(--dm-dur-fast) var(--dm-spring), border-color var(--dm-dur) var(--dm-ease), color var(--dm-dur) var(--dm-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.dm-chips .wp-block-paragraph:hover {
		transform: translateY(-3px);
		border-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent);
	}
}

/* ---------------------------------------------------------------------
 * 6. Showcase mockups (Built by DelRay) — pure CSS device chrome
 * ------------------------------------------------------------------- */
.dm-frame {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: clip;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--raised);
}
.dm-frame__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 16px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.dm-frame__bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dm-frame__bar i:nth-child(1) { background: #ff7a1a; }
.dm-frame__bar i:nth-child(2) { background: #f4b740; }
.dm-frame__bar i:nth-child(3) { background: #0fb0b8; }
.dm-frame__url {
	margin-left: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--preset--color--contrast-muted);
}
.dm-frame__body { padding: 18px; }

/* mock dashboard bar chart */
.dm-bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.dm-bars span {
	flex: 1;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, var(--wp--preset--color--accent-bright), var(--wp--preset--color--accent));
	transform-origin: bottom;
}
.dm-bars span:nth-child(3) { background: linear-gradient(180deg, var(--wp--preset--color--gold), var(--wp--preset--color--orange)); }
@media (prefers-reduced-motion: no-preference) {
	.dm-bars span { animation: dm-grow 1.1s var(--dm-ease) both; }
	.dm-bars span:nth-child(2) { animation-delay: 0.1s; }
	.dm-bars span:nth-child(3) { animation-delay: 0.2s; }
	.dm-bars span:nth-child(4) { animation-delay: 0.3s; }
	.dm-bars span:nth-child(5) { animation-delay: 0.4s; }
}
@keyframes dm-grow { from { transform: scaleY(0.05); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } }
.dm-line { height: 8px; border-radius: 4px; background: var(--wp--preset--color--border); margin-top: 14px; }
.dm-line--short { width: 55%; }

/* mock product / add-to-cart */
.dm-card-mini { text-align: left; }
.dm-card-mini__thumb {
	height: 110px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--wp--preset--color--navy), #0c5563);
	position: relative;
	overflow: clip;
}
.dm-card-mini__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(244,183,64,0.5), transparent 55%);
}
.dm-card-mini__row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.dm-card-mini__price { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--wp--preset--color--navy); }
.dm-cart {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700; font-size: 13px;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--accent);
	border: none; border-radius: 8px;
	padding: 8px 14px;
}
@media (prefers-reduced-motion: no-preference) {
	.dm-cart { animation: dm-nudge 2.8s ease-in-out infinite; }
}
@keyframes dm-nudge { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-3px) scale(1.05); } 94% { transform: translateY(0) scale(1); } }

/* mock audio waveform */
.dm-wave { display: flex; align-items: center; gap: 4px; height: 90px; }
.dm-wave span {
	flex: 1; border-radius: 3px;
	background: linear-gradient(180deg, var(--wp--preset--color--accent), var(--wp--preset--color--navy));
}
@media (prefers-reduced-motion: no-preference) {
	.dm-wave span { animation: dm-eq 1.2s ease-in-out infinite; }
	.dm-wave span:nth-child(odd) { animation-delay: 0.2s; }
	.dm-wave span:nth-child(3n) { animation-delay: 0.4s; }
	.dm-wave span:nth-child(4n) { animation-delay: 0.6s; }
}
@keyframes dm-eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* ---------------------------------------------------------------------
 * 7. CTA band
 * ------------------------------------------------------------------- */
.dm-cta-band { position: relative; overflow: clip; isolation: isolate; }
.dm-cta-band .wp-block-cover__inner-container { position: relative; z-index: 2; }
.dm-cta-band .dm-orb { opacity: 0.4; }
.dm-cta-band .dm-orb--turq { background: #17d0d8; }
.dm-cta-band h2,
.dm-cta-band .wp-block-heading { color: #ffffff; }
.dm-cta-band .dm-kinetic mark {
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--orange));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.dm-cta-band p { color: rgba(255, 255, 255, 0.82); }
.dm-cta-band .wp-block-button.is-style-dm-cta > .wp-block-button__link {
	font-size: var(--wp--preset--font-size--large);
	padding: 1rem 2.25rem;
}

/* ---------------------------------------------------------------------
 * 7b. Inner page head (shared page.html template)
 * ------------------------------------------------------------------- */
.dm-page__head {
	position: relative;
	overflow: clip;
	isolation: isolate;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background:
		radial-gradient(50% 70% at 88% 0%, rgba(15, 176, 184, 0.08), transparent 60%),
		radial-gradient(40% 60% at 4% 100%, rgba(244, 183, 64, 0.08), transparent 60%),
		var(--wp--preset--color--base);
}
.dm-page__head .dm-orb { opacity: 0.4; filter: blur(60px); }
.dm-page__head .wp-block-post-title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	margin-block: 0.2em 0;
}
.dm-page__head-inner { position: relative; z-index: 1; }

/* FAQ accordion (core/details, e.g. the FAQ page) */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin-block: 0.75rem;
	background: var(--wp--preset--color--base);
	transition: border-color var(--dm-dur) var(--dm-ease), box-shadow var(--dm-dur) var(--dm-ease);
}
.wp-block-details[open] {
	border-color: rgba(15, 176, 184, 0.4);
	box-shadow: var(--wp--preset--shadow--soft);
}
.wp-block-details > summary {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	list-style-position: outside;
}
.wp-block-details > summary:hover { color: var(--wp--preset--color--accent); }
.wp-block-details[open] > summary { margin-block-end: 0.6rem; }
.wp-block-details > *:not(summary) { color: var(--wp--preset--color--contrast-muted); }
.dm-page__lead {
	max-width: 60ch;
	margin-block-start: var(--wp--preset--spacing--30);
}
/* the auto child-grid heading rhythm inside the body */
.dm-page__body .dm-child-grid { margin-block-start: var(--wp--preset--spacing--40); }

/* ---------------------------------------------------------------------
 * 8. Stats strip
 * ------------------------------------------------------------------- */
.dm-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	background: linear-gradient(120deg, var(--wp--preset--color--accent), var(--wp--preset--color--navy));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.dm-stat__label { color: var(--wp--preset--color--contrast-muted); font-size: var(--wp--preset--font-size--small); }

/* ---------------------------------------------------------------------
 * 9. Productions — studio concept (hero app mock, game mock, product cards)
 * ------------------------------------------------------------------- */
.dm-hero__inner { position: relative; z-index: 1; }
.dm-hero h1.dm-kinetic { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.05; }
.dm-hero__lead { max-width: 48ch; margin-block-start: var(--wp--preset--spacing--30); }
.dm-trustline { margin-block-start: var(--wp--preset--spacing--30); }

/* "LIVE" badge in the frame chrome */
.dm-live {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
	color: #0e7a4f;
}
.dm-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #1fbf6b; }
@media (prefers-reduced-motion: no-preference) {
	.dm-live__dot { animation: dm-livepulse 1.8s ease-out infinite; }
}
@keyframes dm-livepulse { from { box-shadow: 0 0 0 0 rgba(31,191,107,0.5); } to { box-shadow: 0 0 0 7px rgba(31,191,107,0); } }

/* Hero app mock (Wedding Cost Generator) */
.dm-app__total { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.dm-app__amount {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; line-height: 1;
	font-size: clamp(2rem, 4vw, 2.75rem);
	color: var(--wp--preset--color--navy);
}
.dm-app__cap { font-size: 12px; color: var(--wp--preset--color--contrast-muted); }
.dm-app__slider {
	position: relative; height: 6px; border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--accent) 72%, var(--wp--preset--color--border) 72%);
	margin: 6px 0 18px;
}
.dm-app__thumb {
	position: absolute; top: 50%; left: 72%;
	width: 18px; height: 18px; border-radius: 50%;
	background: #fff; border: 3px solid var(--wp--preset--color--accent);
	transform: translate(-50%, -50%); box-shadow: var(--wp--preset--shadow--soft);
}
.dm-app__bars { height: 88px; margin-bottom: 8px; }
.dm-app__legend { display: flex; justify-content: space-between; gap: 4px; }
.dm-app__legend span {
	flex: 1; text-align: center; font-size: 10px;
	color: var(--wp--preset--color--contrast-muted);
	font-family: var(--wp--preset--font-family--mono);
}

/* Game mock (Music Video Trivia) */
.dm-game__q {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; color: var(--wp--preset--color--navy);
	margin-bottom: 16px;
}
.dm-game__note {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 8px; flex: none;
	background: linear-gradient(120deg, var(--wp--preset--color--gold), var(--wp--preset--color--orange));
	color: #fff; font-size: 16px;
}
@media (prefers-reduced-motion: no-preference) { .dm-game__note { animation: dm-nudge 2.4s ease-in-out infinite; } }
.dm-game__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.dm-game__opts span {
	padding: 9px 12px; border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px; font-size: 13px; color: var(--wp--preset--color--navy); background: #fff;
}
.dm-game__opts .is-correct {
	border-color: transparent; font-weight: 700;
	background: linear-gradient(120deg, var(--wp--preset--color--gold), var(--wp--preset--color--orange));
	color: var(--wp--preset--color--navy);
}
@media (prefers-reduced-motion: no-preference) { .dm-game__opts .is-correct { animation: dm-pop-correct 2.8s ease-in-out infinite; } }
@keyframes dm-pop-correct { 0%, 68%, 100% { transform: none; } 80% { transform: scale(1.05); } }
.dm-game__foot {
	display: flex; justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono); font-size: 12px;
	color: var(--wp--preset--color--contrast-muted);
}
.dm-game__score { color: var(--wp--preset--color--accent); font-weight: 700; }

/* Tag chips */
.dm-tags { gap: 0.5rem; margin-bottom: 0.85rem; }
.dm-tags .wp-block-paragraph {
	margin: 0; font-family: var(--wp--preset--font-family--mono);
	font-size: 12px; color: var(--wp--preset--color--navy); background: #fff;
	border: 1px solid var(--wp--preset--color--border); padding: 0.3rem 0.7rem; border-radius: 999px;
}

/* Wedding network header + product cards */
.dm-net-head { max-width: 760px; margin-bottom: var(--wp--preset--spacing--40); }
.dm-net-head .wp-block-heading { margin-bottom: 0.4rem; }
.dm-prod-grid { gap: var(--wp--preset--spacing--40); }
.dm-frame.dm-prod {
	height: 100%; display: flex; flex-direction: column;
	transition: transform var(--dm-dur) var(--dm-ease), box-shadow var(--dm-dur) var(--dm-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.dm-frame.dm-prod:hover { transform: translateY(-6px); }
}
.dm-prod__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.dm-prod__flag {
	align-self: flex-start; font-family: var(--wp--preset--font-family--mono);
	font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: #fff; background: linear-gradient(120deg, var(--wp--preset--color--accent), var(--wp--preset--color--navy));
	padding: 0.2rem 0.55rem; border-radius: 999px;
}
.dm-prod__flag--hub { background: linear-gradient(120deg, var(--wp--preset--color--gold), var(--wp--preset--color--orange)); color: var(--wp--preset--color--navy); }
.dm-prod__title {
	font-family: var(--wp--preset--font-family--display); font-weight: 600;
	font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--navy); margin: 0.15rem 0 0;
}
.dm-prod__desc { font-size: 0.95rem; color: var(--wp--preset--color--contrast-muted); flex: 1; }
.dm-prod__link { font-family: var(--wp--preset--font-family--sans); font-weight: 600; color: var(--wp--preset--color--accent); margin-top: 0.4rem; text-decoration: none; }
.dm-prod__link:hover { color: var(--wp--preset--color--orange); }

/* ---------------------------------------------------------------------
 * 10. Real product screenshots (pre-rendered phone mockups, transparent)
 * ------------------------------------------------------------------- */
.dm-shot {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin-inline: auto;
	aspect-ratio: 62 / 100; /* reserves space (no CLS); object-fit keeps any ratio undistorted */
}
.dm-shot img {
	width: 100%; height: 100%;
	object-fit: contain; display: block;
	filter: drop-shadow(0 28px 46px rgba(14, 42, 71, 0.30));
}
.dm-shot--hero { max-width: 320px; }
@media (prefers-reduced-motion: no-preference) {
	.dm-shot { animation: dm-floatphone 6s ease-in-out infinite; }
	.dm-shot--alt { animation-delay: -3s; }
}
@keyframes dm-floatphone { 50% { transform: translateY(-10px); } }
.dm-shot__live {
	position: absolute; top: 7%; right: -4px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #0e7a4f;
	background: #fff; padding: 5px 11px; border-radius: 999px;
	box-shadow: var(--wp--preset--shadow--soft);
}