/* ==========================================================================
   Mana Blocks 803 — shared stylesheet
   Every widget scopes itself under .mn-hero / .mn-curve / .mn-lineup so two
   widgets on one page never collide. Sizes come from Elementor controls via
   custom properties; nothing here is a fixed width.
   ========================================================================== */

.mn-hero,
.mn-curve,
.mn-lineup {
	--mn-ink: #0f1319;
	--mn-ink-2: #3d4550;
	--mn-muted: #6b7280;
	--mn-accent: #a2570a;
	--mn-hair: rgba(15, 19, 25, 0.08);
	--mn-glow: rgba(245, 158, 11, 0.19);
	--mn-line-1: #f59e0b;
	--mn-line-2: #b9c1cc;
	--mn-grid: rgba(15, 19, 25, 0.07);

	--mn-display: "Heebo", system-ui, sans-serif;
	--mn-body: "Assistant", "Heebo", system-ui, sans-serif;
	--mn-mono: "IBM Plex Mono", ui-monospace, monospace;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	color: var(--mn-ink);
	font-family: var(--mn-body);
	line-height: 1.7;
}

.mn-hero *,
.mn-curve *,
.mn-lineup * { box-sizing: border-box; }

/* ---------------------------------------------------------- shared atoms */

.mn-eyebrow,
.mn-label {
	display: inline-block;
	font-family: var(--mn-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	direction: ltr;
	unicode-bidi: isolate;
}

.mn-eyebrow { color: var(--mn-accent); }
.mn-label { color: var(--mn-muted); }

.mn-lede {
	margin: 0;
	color: var(--mn-ink-2);
	font-size: clamp(16px, 4.2vw, 19px);
	max-width: 52ch;
	overflow-wrap: anywhere;
}

.mn-dim {
	margin: 0;
	color: var(--mn-muted);
	font-size: 15px;
	overflow-wrap: anywhere;
}

.mn-rule {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--mn-line-1);
	margin-block: 22px 18px;
}

.mn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--mn-display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.2s ease,
	            color 0.2s ease;
}

.mn-btn--primary {
	background-image: linear-gradient(180deg, #f59e0b, #d97706);
	color: #2a1a02;
	box-shadow: 0 10px 30px rgba(245, 158, 11, 0.28);
}

.mn-btn--ghost {
	background: transparent;
	border-color: rgba(15, 19, 25, 0.14);
	color: var(--mn-ink);
}

.mn-btn--ghost:hover {
	border-color: var(--mn-line-1);
	color: var(--mn-accent);
}

.mn-hero .mn-btn:focus-visible,
.mn-lineup .mn-btn:focus-visible {
	outline: 2px solid var(--mn-accent);
	outline-offset: 3px;
}

.mn-card {
	background-color: rgba(255, 255, 255, 0.74);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--mn-hair);
	border-radius: 28px;
	box-shadow: 0 10px 34px rgba(15, 19, 25, 0.07);
}

/* ------------------------------------------------------------ the bottle */

.mn-bottle { width: 100%; height: auto; display: block; }
.mn-bottle__floor { fill: rgba(15, 19, 25, 0.13); }
.mn-bottle__glint { fill: rgba(255, 255, 255, 0.3); }

.mn-bottle text { text-anchor: middle; }
.mn-bottle__top,
.mn-bottle__foot {
	font-family: var(--mn-mono);
	font-size: 8px;
	letter-spacing: 1.6px;
	fill: #6b7280;
}
.mn-bottle__brand { font-family: var(--mn-display); font-weight: 900; font-size: 34px; fill: #0f1319; }
.mn-bottle__num   { font-family: var(--mn-display); font-weight: 900; font-size: 27px; fill: #a2570a; }
.mn-bottle__brand--sm { font-size: 21px; }
.mn-bottle__num--sm   { font-size: 19px; }
.mn-bottle--sm .mn-bottle__foot { font-size: 6.5px; letter-spacing: 1.4px; }

/* ================================================================== HERO */

.mn-hero {
	position: relative;
	overflow: hidden;
	padding: 56px 20px;
}

.mn-hero__glow {
	position: absolute;
	inset-block-start: -26%;
	inset-inline-start: 50%;
	translate: -50% 0;
	width: min(820px, 160vw);
	aspect-ratio: 1;
	background: radial-gradient(circle, var(--mn-glow), transparent 64%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}

.mn-hero__grid {
	--mn-copy: 5.4fr;
	position: relative;
	z-index: 1;
	display: grid;
	gap: 44px;
}

.mn-hero__title {
	margin: 0;
	font-family: var(--mn-display);
	font-weight: 900;
	font-size: clamp(42px, 12.5vw, 78px);
	line-height: 0.95;
	letter-spacing: -0.035em;
}

.mn-hero__line { display: block; }
.mn-hero__line.is-accent { color: var(--mn-accent); }

.mn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 26px;
}

.mn-hero__note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0;
	color: var(--mn-muted);
	font-size: 15px;
}

.mn-hero__note-icon { display: inline-flex; color: var(--mn-accent); flex: none; }
.mn-hero__note-icon svg { width: 15px; height: 15px; fill: currentColor; }
.mn-hero__note-icon i { font-size: 14px; }

.mn-shot {
	margin: 0;
	display: grid;
	place-items: center;
	--mn-par: 0px;
}

.mn-shot > * {
	width: 100%;
	max-width: 340px;
	height: auto;
	filter: drop-shadow(0 30px 46px rgba(15, 19, 25, 0.16));
	translate: 0 var(--mn-par);
}

.mn-shot img { object-fit: contain; }

.mn-metrics {
	position: relative;
	margin-block-start: 44px;
	padding: 24px 20px;
	background-color: rgba(255, 255, 255, 0.74);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--mn-hair);
	border-radius: 36px;
	box-shadow: 0 10px 34px rgba(15, 19, 25, 0.07);
}

/* the card hangs from a hairline — reads as suspended, not stacked */
.mn-metrics::before {
	content: "";
	position: absolute;
	inset-block-start: -38px;
	inset-inline-start: 50%;
	width: 1px;
	height: 38px;
	background: linear-gradient(to bottom, transparent, var(--mn-line-1));
}

.mn-metrics__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
	gap: 12px;
	margin-block-start: 20px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--mn-hair);
}

.mn-metrics__value {
	display: block;
	font-family: var(--mn-display);
	font-weight: 900;
	font-size: clamp(21px, 5.6vw, 27px);
	letter-spacing: -0.04em;
	line-height: 1.1;
	direction: ltr;
	unicode-bidi: isolate;
}

.mn-metrics__cell .mn-label { margin-block-start: 5px; }

@media (min-width: 960px) {
	.mn-hero { padding: 110px 32px 104px; }
	.mn-hero__grid {
		grid-template-columns: var(--mn-copy) 4.6fr;
		align-items: center;
	}
	.mn-shot > * { max-width: 420px; }
}

/* ================================================================= CURVE */

.mn-curve { padding: 56px 20px; }
.mn-curve__head { display: grid; gap: 12px; margin-block-end: 32px; }

.mn-curve__title,
.mn-lineup__title {
	margin: 0;
	font-family: var(--mn-display);
	font-weight: 900;
	font-size: clamp(28px, 7.4vw, 46px);
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.mn-curve__grid { display: grid; gap: 18px; }

.mn-chart__title {
	margin: 0 0 2px;
	font-family: var(--mn-display);
	font-weight: 900;
	font-size: clamp(17px, 4.4vw, 20px);
	letter-spacing: -0.025em;
}

.mn-curve__svg {
	width: 100%;
	height: 190px;
	margin-block-start: 16px;
	display: block;
	overflow: visible;
}

.mn-curve__grid-lines line { stroke: var(--mn-grid); stroke-width: 1; }

.mn-curve__line {
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.mn-curve__line--1 { stroke: var(--mn-line-1); stroke-width: 3; }
.mn-curve__line--2 { stroke: var(--mn-line-2); stroke-width: 2; }

/* Lines stay hidden until the widget is in view, then draw. */
.mn-curve[data-mn-draw="on"] .mn-curve__line {
	stroke-dasharray: 1600;
	stroke-dashoffset: 1600;
}
.mn-curve[data-mn-draw="on"].is-inview .mn-curve__line--1 { animation: mn-draw 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; }
.mn-curve[data-mn-draw="on"].is-inview .mn-curve__line--2 { animation: mn-draw 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards; }

@keyframes mn-draw { to { stroke-dashoffset: 0; } }

.mn-curve__probe { fill: var(--mn-line-1); animation: mn-blip 2.6s ease-in-out infinite; }
.mn-curve__halo {
	fill: var(--mn-line-1);
	opacity: 0.4;
	transform-box: fill-box;
	transform-origin: center;
	animation: mn-halo 2.6s ease-out infinite;
}

@keyframes mn-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes mn-halo { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(2.6); opacity: 0; } }

.mn-ticks { display: flex; justify-content: space-between; gap: 6px; margin-block-start: 10px; direction: ltr; }

.mn-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-block-start: 14px; }
.mn-legend__item { display: flex; align-items: center; gap: 7px; }
.mn-legend__swatch { width: 16px; height: 3px; border-radius: 2px; display: block; flex: none; }
.mn-legend__swatch--1 { background: var(--mn-line-1); }
.mn-legend__swatch--2 { background: var(--mn-line-2); }

.mn-delta { display: grid; gap: 20px; align-content: start; }

.mn-delta__value {
	font-family: var(--mn-display);
	font-weight: 900;
	font-size: clamp(42px, 12vw, 58px);
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--mn-accent);
	direction: ltr;
	unicode-bidi: isolate;
}

.mn-bars { display: grid; gap: 14px; padding-block-start: 20px; border-block-start: 1px solid var(--mn-hair); }
.mn-bar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mn-bar__num { font-family: var(--mn-mono); font-size: 13px; font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.mn-bar__track { height: 5px; border-radius: 99px; background: rgba(15, 19, 25, 0.07); overflow: hidden; margin-block-start: 7px; }

.mn-bar__fill {
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, #d97706, #f59e0b);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

[dir="ltr"] .mn-bar__fill { transform-origin: left; }
.mn-curve.is-inview .mn-bar__fill { transform: scaleX(1); }

@media (min-width: 960px) {
	.mn-curve { padding: 100px 32px; }
	.mn-curve__head { margin-block-end: 52px; }
	.mn-curve__grid { grid-template-columns: 2fr 1fr; }
	.mn-curve__svg { height: 250px; }
}

/* ================================================================ LINEUP */

.mn-lineup { padding: 56px 20px; }
.mn-lineup__head { display: grid; gap: 12px; margin-block-end: 32px; }

.mn-lineup__grid {
	--mn-min: 260px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--mn-min), 100%), 1fr));
	gap: 16px;
	align-items: start;
}

.mn-prod {
	display: grid;
	gap: 6px;
	justify-items: center;
	text-align: center;
	padding: 24px 20px;
	background-color: rgba(255, 255, 255, 0.74);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--mn-hair);
	border-radius: 24px;
	box-shadow: 0 10px 34px rgba(15, 19, 25, 0.07);
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.24s ease,
	            border-color 0.24s ease;
}

/* the featured SKU carries more weight, not just another colour */
.mn-prod.is-featured {
	border-color: rgba(245, 158, 11, 0.34);
	box-shadow: 0 18px 48px rgba(245, 158, 11, 0.16);
}

.mn-prod__shot {
	margin: 0 0 8px;
	width: 100%;
	max-width: 180px;
}

.mn-prod__shot img { width: 100%; height: auto; object-fit: contain; }
.mn-prod__shot > * { filter: drop-shadow(0 16px 26px rgba(15, 19, 25, 0.13)); }

.mn-prod__badge {
	font-family: var(--mn-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mn-accent);
	direction: ltr;
	unicode-bidi: isolate;
}

.mn-prod__name {
	margin: 0;
	font-family: var(--mn-display);
	font-weight: 900;
	font-size: clamp(18px, 4.4vw, 21px);
	letter-spacing: -0.025em;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.mn-prod__price {
	font-family: var(--mn-mono);
	font-size: 14px;
	font-weight: 600;
	margin-block-start: 4px;
	direction: ltr;
	unicode-bidi: isolate;
}

.mn-prod .mn-btn { margin-block-start: 14px; }

.mn-lineup[data-mn-drift="on"] .mn-prod__shot > * { animation: mn-drift 8s ease-in-out infinite; }
.mn-lineup[data-mn-drift="on"] .mn-prod:nth-child(2) .mn-prod__shot > * { animation-delay: -2.6s; }
.mn-lineup[data-mn-drift="on"] .mn-prod:nth-child(3) .mn-prod__shot > * { animation-delay: -5.2s; }
.mn-lineup[data-mn-drift="on"] .mn-prod:hover .mn-prod__shot > * { animation-play-state: paused; }

@keyframes mn-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.mn-lineup[data-mn-stagger="on"] .mn-prod { opacity: 0; transform: translateY(26px); }
.mn-lineup[data-mn-stagger="on"].is-inview .mn-prod { animation: mn-pop 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.mn-lineup[data-mn-stagger="on"].is-inview .mn-prod:nth-child(2) { animation-delay: 0.12s; }
.mn-lineup[data-mn-stagger="on"].is-inview .mn-prod:nth-child(3) { animation-delay: 0.24s; }
.mn-lineup[data-mn-stagger="on"].is-inview .mn-prod:nth-child(4) { animation-delay: 0.36s; }

@keyframes mn-pop { to { opacity: 1; transform: none; } }

@media (min-width: 768px) {
	.mn-lineup { padding: 100px 32px; }
	.mn-lineup__head { margin-block-end: 52px; }
}

/* ============================================== editor + reduced motion */

/* In the editor canvas nothing is "scrolled into view" — show the end state. */
.elementor-editor-active .mn-curve__line,
.elementor-editor-active .mn-prod { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
.elementor-editor-active .mn-bar__fill { transform: scaleX(1) !important; }

@media (prefers-reduced-motion: reduce) {
	.mn-hero *, .mn-hero *::before, .mn-hero *::after,
	.mn-curve *, .mn-curve *::before, .mn-curve *::after,
	.mn-lineup *, .mn-lineup *::before, .mn-lineup *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.mn-curve__line { stroke-dashoffset: 0 !important; }
	.mn-prod { opacity: 1 !important; transform: none !important; }
	.mn-bar__fill { transform: scaleX(1) !important; }
	.mn-shot > * { translate: none !important; }
}