/*
 * "Our Products" — child-theme refinement of the client's section.
 * Structure (Elementor):  .mx-products › .mx-products__intro
 *                                     › .mx-products__stage › [masader_product_stage] (4 real image layers)
 *                                     › .mx-products__list  › .mx-product--cylinder | --beaker | --barrel
 * The product class names say which vessel each product lights up in the image:
 *   --cylinder = Biodiesel (gold cylinder) · --beaker = Glycerine (pale beaker) · --barrel = Soap-Stock (drum)
 *
 * States
 *   calm — default: Elementor editor, prefers-reduced-motion, no JS. Image composed, list fully open.
 *   live — .mx-products.is-live, added by assets/js/products.js on the real site only.
 *          Desktop: pinned; layers assemble with the scroll, then one product at a time is in focus.
 */

:root {
	--mxp-bg:     #091D0D; /* section background */
	--mxp-bg-2:   #0F2A17; /* same family, lighter: lighting behind the image */
	--mxp-text:   #EFF5ED; /* main text */
	--mxp-sub:    #AAB6AC; /* sub-text: #839085 lifted for the dark background (8.6:1) */
	--mxp-green:  #9DCB5B; /* details */
	--mxp-gold:   #F4AF35; /* details, links, lines */
	--mxp-line:   rgba(239, 245, 237, 0.12);
	--mxp-glow:   rgba(244, 175, 53, 0.20); /* light behind the image; JS shifts it per product */
	--mxp-ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Section ------------------------------------------------------------------------------ */
.elementor .e-con.mx-products {
	background:
		radial-gradient(52% 58% at 74% 46%, var(--mxp-bg-2) 0%, transparent 72%),
		var(--mxp-bg);
	color: var(--mxp-text);
	--mx-fg: var(--mxp-text);
	--mx-fg-soft: var(--mxp-sub);
	--mx-accent: var(--mxp-gold);
	row-gap: 2.5rem;
}

@media (min-width: 1025px) {
	.elementor .e-con.mx-products {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-areas: "intro stage" "list stage";
		grid-template-rows: auto 1fr;
		column-gap: clamp(3rem, 6vw, 7rem);
		align-items: start;
	}
	.elementor .e-con.mx-products__intro { grid-area: intro; }
	.elementor .e-con.mx-products__stage { grid-area: stage; align-self: center; }
	.elementor .e-con.mx-products__list  { grid-area: list; grid-column: auto; }
}

/* ---- Intro -------------------------------------------------------------------------------- */
.elementor .e-con.mx-products__intro { --gap: 1.25rem; --row-gap: 1.25rem; }

.elementor .mx-products .elementor-element.mx-eyebrow .elementor-heading-title {
	display: inline-block;
	font-family: var(--mx-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mxp-sub);
}
.elementor .mx-products .elementor-element.mx-eyebrow .elementor-heading-title::before { content: none; }
.elementor .mx-products .elementor-element.mx-eyebrow .elementor-heading-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 12px;
	border-radius: 2px;
	background: var(--mxp-gold);
}

.elementor .mx-products .elementor-element.mx-title .elementor-heading-title {
	max-width: 17ch;
	font-size: clamp(2.3rem, 1.5rem + 2.3vw, 3.6rem);
	hyphens: manual;
	line-height: 1.04;
	color: var(--mxp-text);
}
.elementor .mx-products .elementor-element.mx-lead { max-width: 46ch; color: var(--mxp-sub); }
.elementor .mx-products .elementor-element.mx-specline .elementor-heading-title { color: var(--mxp-sub); letter-spacing: 0.04em; }
.elementor .mx-products .elementor-element.mx-link-arrow .elementor-button { color: var(--mxp-gold); }
.elementor .mx-products .elementor-element.mx-link-arrow .elementor-button:hover { color: var(--mxp-text); }

/* ---- Stage: four real layers on one canvas ------------------------------------------------- */
.elementor .e-con.mx-products__stage { position: relative; }
.elementor .mx-products .elementor-element.mx-products__layers { width: 100%; }

.mxp-stage {
	position: relative;
	width: min(100%, 640px);
	aspect-ratio: 1;
	margin-inline: auto;
	perspective: 1400px;
}
.mxp-glow {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 46%, var(--mxp-glow) 0%, rgba(157, 203, 91, 0.07) 42%, transparent 68%);
	transition: background 0.8s var(--mxp-ease);
	pointer-events: none;
}
.mxp-tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.mxp-layer,
.mxp-sweep {
	position: absolute;
	left: var(--l);
	top: var(--t);
	width: var(--w);
	height: var(--h);
}
.mxp-layer { display: block; transition: filter 0.6s var(--mxp-ease); }
.mxp-layer img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Grounding shadow under the vessels (lighting only) */
.mxp-layer--barrel img,
.mxp-layer--cylinder img,
.mxp-layer--beaker img,
.mxp-layer--beaker2 img { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35)); }

/* Light sweep: masked by each vessel's own image, so it only touches metal and glass */
.mxp-sweep {
	display: none;
	pointer-events: none;
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) no-repeat;
	background-size: 260% 100%;
	background-position: calc(100% - var(--sweep, 0) * 100%) 0;
	mix-blend-mode: screen;
	opacity: 0.55;
}

/* ---- List: the client's three products --------------------------------------------------- */
.elementor .e-con.mx-products__list {
	--display: flex;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--mxp-line);
}

.elementor .e-con.mx-product {
	--gap: 0.6rem;
	--row-gap: 0.6rem;
	position: relative;
	padding: 1.25rem 0 1.25rem 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--mxp-line);
	border-radius: 0;
	background: none;
	transition: none;
}
.elementor .e-con.mx-product::before {
	/* parent's gradient top line → a thin focus bar on the left */
	inset: 1.25rem auto 1.25rem 0;
	width: 2px;
	height: auto;
	border-radius: 2px;
	background: var(--mxp-gold);
	opacity: 0;
	transform: scaleY(0.3);
	transform-origin: top center;
	transition: opacity 0.5s var(--mxp-ease), transform 0.6s var(--mxp-ease);
}
.elementor .e-con.mx-product:hover { transform: none; border-color: var(--mxp-line); background: none; }

.elementor .mx-product .elementor-element.mx-product__title .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
	line-height: 1.2;
	color: var(--mxp-text);
	transition: color 0.5s var(--mxp-ease);
}
/* Colour chip = the liquid/material it shows in the image */
.elementor .mx-product .elementor-element.mx-product__title .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--chip, var(--mxp-gold));
	box-shadow: 0 0 0 3px rgba(239, 245, 237, 0.06);
}
.elementor .mx-product--cylinder { --chip: var(--mxp-gold); }
.elementor .mx-product--beaker   { --chip: #E9E6C6; } /* pale glycerine, between mist and gold */
.elementor .mx-product--beaker2  { --chip: #A89F8A; } /* crude glycerine */
.elementor .mx-product--barrel   { --chip: #B9C2BC; } /* steel, light sage family */

.elementor .mx-product .elementor-element.mx-product__text { max-width: 44ch; color: var(--mxp-sub); font-size: 0.95rem; line-height: 1.6; }

/* =========================================================================================
 * LIVE — real site only
 * ========================================================================================= */

/* Pinned sections must move instantly. Elementor gives every container
 * `transition: transform .4s`; when ScrollTrigger releases the pin it repositions the section
 * with a transform, and that transition made it slide off-screen for 0.4s (white flash). */
.elementor .e-con.mx-products.is-live,
.pin-spacer > .e-con { transition: none; }
@media (min-width: 1025px) and (min-height: 600px) {
	.elementor .e-con.mx-products.is-live {
		--padding-top: clamp(4.5rem, 11svh, 7rem);
		--padding-bottom: clamp(2rem, 6svh, 4rem);
		height: 100svh;
		min-height: 0;
		row-gap: clamp(1.25rem, 3svh, 2.25rem);
		align-content: center;
	}
	.elementor .mx-products.is-live .elementor-element.mx-title .elementor-heading-title { font-size: min(3.6vw, 6svh); }
	.elementor .mx-products.is-live .elementor-element.mx-lead { font-size: min(1.0625rem, 2.05svh); }
	.elementor .mx-products.is-live .e-con.mx-products__intro { --gap: min(1.25rem, 2svh); --row-gap: min(1.25rem, 2svh); }
	.elementor .mx-products.is-live .mxp-stage { width: min(100%, 76svh, 640px); }
	/* Light sweep only on the vessel in focus (and never while the image is still assembling) */
	.mx-products.is-live .mxp-stage[data-active="cylinder"] .mxp-sweep--cylinder,
	.mx-products.is-live .mxp-stage[data-active="beaker"] .mxp-sweep--beaker,
	.mx-products.is-live .mxp-stage[data-active="beaker2"] .mxp-sweep--beaker2,
	.mx-products.is-live .mxp-stage[data-active="barrel"] .mxp-sweep--barrel { display: block; }

	/* List appears after the image has assembled */
	.elementor .mx-products.is-live .e-con.mx-products__list {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s var(--mxp-ease), transform 0.8s var(--mxp-ease);
	}
	.elementor .mx-products.is-live.is-spot .e-con.mx-products__list { opacity: 1; transform: none; }

	/* Every product's text is shown together as soon as the list appears; scrolling then lights
	 * one product at a time (gold bar, bright title and text) while the others stay readable, dimmed. */
	.elementor .mx-products.is-live .e-con.mx-product { padding-block: min(0.95rem, 1.6svh); --gap: 0.4rem; --row-gap: 0.4rem; }
	.elementor .mx-products.is-live .mx-product > .elementor-element.mx-product__text { font-size: min(0.92rem, 1.75svh); line-height: 1.55; }
	.elementor .mx-products.is-live .mx-product > .elementor-element.mx-product__text,
	.elementor .mx-products.is-live .mx-product > .elementor-element.mx-link-arrow { transition: opacity 0.5s var(--mxp-ease); }
	.elementor .mx-products.is-live .e-con.mx-products__list:has(.is-active) .mx-product:not(.is-active) > .elementor-element.mx-product__text,
	.elementor .mx-products.is-live .e-con.mx-products__list:has(.is-active) .mx-product:not(.is-active) > .elementor-element.mx-link-arrow { opacity: 0.5; }
	.elementor .mx-products.is-live .e-con.mx-products__list:has(.is-active) .mx-product:not(.is-active) .elementor-element.mx-product__title .elementor-heading-title { color: var(--mxp-sub); }
	.elementor .mx-products.is-live .e-con.mx-product.is-active::before { opacity: 1; transform: none; }
	/* After the section has been scrolled through it stays fully lit and static. */
	.elementor .e-con.mx-products.is-live.is-done { height: auto; min-height: 100svh; }

	/* Spotlight in the image: the matching vessel stays lit, the rest dims */
	.mx-products.is-live .mxp-stage[data-active="cylinder"] .mxp-layer:not(.mxp-layer--cylinder),
	.mx-products.is-live .mxp-stage[data-active="beaker"]   .mxp-layer:not(.mxp-layer--beaker),
	.mx-products.is-live .mxp-stage[data-active="beaker2"]  .mxp-layer:not(.mxp-layer--beaker2),
	.mx-products.is-live .mxp-stage[data-active="barrel"]   .mxp-layer:not(.mxp-layer--barrel) {
		filter: brightness(0.42) saturate(0.65);
	}
	.mx-products.is-live .mxp-stage[data-active] .mxp-layer--bg { filter: brightness(0.6) saturate(0.8); }
	.mx-products.is-live .mxp-stage[data-active=""] .mxp-layer { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mxp-layer, .mxp-glow, .elementor .e-con.mx-product::before { transition: none; }
}