/**
 * Elixirelle — Perfume Mist Background (pure CSS, no JS)
 * Add CSS class "elx-mist-bg" to any Container block (Advanced tab →
 * Additional CSS class(es)) to apply this effect as its background.
 *
 * v2: rewritten with zero DOM injection — the earlier JS version inserted
 * extra elements into the container, which conflicted with GreenShift's
 * own structure/animation handling and hid real content on desktop.
 * This version uses only ::before/::after, so the DOM tree is untouched.
 */

.elx-mist-bg {
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse at center, #1c1712 0%, #0c0a08 70%, #14100c 100%) !important;
}

.elx-mist-bg::before,
.elx-mist-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
}

.elx-mist-bg::before {
	background-image:
		radial-gradient(circle at 20% 30%, rgba(196, 161, 90, 0.22) 0%, transparent 45%),
		radial-gradient(circle at 75% 60%, rgba(216, 189, 133, 0.16) 0%, transparent 50%);
	filter: blur(26px);
	animation: elx-mist-drift-a 20s ease-in-out infinite alternate;
}

.elx-mist-bg::after {
	background-image:
		radial-gradient(circle at 50% 80%, rgba(196, 161, 90, 0.16) 0%, transparent 55%),
		radial-gradient(circle at 30% 20%, rgba(216, 189, 133, 0.12) 0%, transparent 40%);
	filter: blur(20px);
	animation: elx-mist-drift-b 26s ease-in-out infinite alternate-reverse;
}

@keyframes elx-mist-drift-a {
	0%   { transform: translate3d(-3%, -2%, 0) scale(1);   opacity: 0.75; }
	50%  { transform: translate3d(2%, 3%, 0) scale(1.08);  opacity: 1; }
	100% { transform: translate3d(-1%, 2%, 0) scale(1.04); opacity: 0.85; }
}

@keyframes elx-mist-drift-b {
	0%   { transform: translate3d(2%, 1%, 0) scale(1);    opacity: 0.6; }
	50%  { transform: translate3d(-2%, -2%, 0) scale(1.06); opacity: 0.9; }
	100% { transform: translate3d(1%, -1%, 0) scale(1.02); opacity: 0.7; }
}

/* Ensure actual block content (heading, text, buttons) stays above the effect */
.elx-mist-bg > * {
	position: relative;
	z-index: 1;
}

/**
 * Force readable brand colors on top of the dark mist background —
 * regardless of what color each block was set to elsewhere on the site.
 * Primary = gold (#c4a15a), Secondary = black background, headings/body = white/cream.
 */
.elx-mist-bg h1,
.elx-mist-bg h2,
.elx-mist-bg h3,
.elx-mist-bg h4 {
	color: #f9f6f0 !important;
}

.elx-mist-bg p,
.elx-mist-bg span,
.elx-mist-bg li {
	color: #d8bd85 !important;
}

.elx-mist-bg .wp-block-button__link,
.elx-mist-bg button,
.elx-mist-bg a.button {
	background-color: #c4a15a !important;
	color: #14100c !important;
	border: none !important;
	font-weight: 700;
}
.elx-mist-bg .wp-block-button__link:hover,
.elx-mist-bg button:hover,
.elx-mist-bg a.button:hover {
	background-color: #a8823f !important;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.elx-mist-bg::before,
	.elx-mist-bg::after {
		animation: none;
	}
}

/**
 * Page-wide spray overlay — a fixed layer that stays visible while scrolling
 * anywhere on the landing page (added via body class "erx-landing-mist" in
 * landing-strip.php, no per-container class needed). Mimics a slow-motion
 * perfume spray in front of a camera lens, ~5s per burst, looping.
 */
body.erx-landing-mist {
	position: relative;
	background: #0c0a08 !important;
	overflow-x: hidden !important;
	max-width: 100vw !important;
}
html:has(body.erx-landing-mist) {
	overflow-x: hidden !important;
}
body.erx-landing-mist::before,
body.erx-landing-mist::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	filter: blur(22px);
}
body.erx-landing-mist::before {
	background-image:
		radial-gradient(circle at 30% 40%, rgba(196, 161, 90, 0.30) 0%, transparent 42%),
		radial-gradient(circle at 70% 55%, rgba(216, 189, 133, 0.22) 0%, transparent 48%);
	animation: elx-spray-burst 5s ease-out infinite;
}
body.erx-landing-mist::after {
	background-image:
		radial-gradient(circle at 55% 65%, rgba(196, 161, 90, 0.22) 0%, transparent 40%),
		radial-gradient(circle at 25% 30%, rgba(216, 189, 133, 0.16) 0%, transparent 45%);
	animation: elx-spray-burst 5s ease-out infinite;
	animation-delay: 2.5s;
}
@keyframes elx-spray-burst {
	0%   { transform: scale(0.6); opacity: 0; }
	15%  { opacity: 0.9; }
	60%  { transform: scale(1.15); opacity: 0.45; }
	100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.erx-landing-mist::before,
	body.erx-landing-mist::after {
		animation: none;
		display: none;
	}
}

/**
 * All buttons on this landing page — brand gold, more visible (glow), with
 * the same left-to-right shine sweep used on the order button.
 */
body.erx-landing-mist .wp-block-button__link {
	background-color: #c4a15a !important;
	color: #14100c !important;
	border: 2px solid #e8cf9a !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	padding: 16px 28px !important;
	box-shadow: 0 0 22px 4px rgba(196, 161, 90, 0.65) !important;
	position: relative !important;
	overflow: hidden !important;
	z-index: 1;
}
body.erx-landing-mist .wp-block-button__link:hover {
	background-color: #a8823f !important;
}
body.erx-landing-mist .wp-block-button__link::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
	transform: skewX(-20deg);
	animation: erx-btn-shine 2.6s ease-in-out infinite;
}
@keyframes erx-btn-shine {
	0%   { left: -60%; }
	40%  { left: 130%; }
	100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
	body.erx-landing-mist .wp-block-button__link::after {
		animation: none;
		display: none;
	}
}

/**
 * General spacing tightening pass across the whole landing page — reduces
 * common vertical gaps between GreenShift/Spectra blocks and elements so
 * the page scrolls shorter. Best-effort/generic since these blocks weren't
 * built by us (unknown exact classes) — content itself (text/lines) is
 * untouched, only spacing.
 */
body.erx-landing-mist .wp-block-uagb-container {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
body.erx-landing-mist h1,
body.erx-landing-mist h2,
body.erx-landing-mist h3,
body.erx-landing-mist h4 {
	margin-top: 6px !important;
	margin-bottom: 8px !important;
}
body.erx-landing-mist p {
	margin-top: 0 !important;
	margin-bottom: 10px !important;
}
body.erx-landing-mist .wp-block-uagb-buttons {
	margin-top: 8px !important;
	margin-bottom: 8px !important;
}
body.erx-landing-mist .wp-block-uagb-image {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
body.erx-landing-mist section,
body.erx-landing-mist .entry-content > div {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* Ensure sections never overlap the fixed mist layer */
body.erx-landing-mist .entry-content > * {
	position: relative !important;
	z-index: 1;
}

/* Tighter gap between a button and the image right after it */
body.erx-landing-mist .wp-block-uagb-buttons {
	margin-bottom: 5px !important;
}
body.erx-landing-mist .wp-block-uagb-image {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}
body.erx-landing-mist .wp-block-uagb-image img {
	border-radius: 14px !important;
	border: 2px solid #c4a15a !important;
	box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
}

/* Minimal 4px gaps everywhere on this landing page */
body.erx-landing-mist h1,
body.erx-landing-mist h2,
body.erx-landing-mist h3,
body.erx-landing-mist h4,
body.erx-landing-mist p,
body.erx-landing-mist .wp-block-uagb-buttons,
body.erx-landing-mist .wp-block-uagb-image,
body.erx-landing-mist .wp-block-uagb-container {
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}

/* Mobile only: remove the gap directly above/below this image (button→image, image→text) */
@media (max-width: 600px) {
	body.erx-landing-mist .wp-block-uagb-buttons {
		margin-bottom: 0 !important;
	}
	body.erx-landing-mist .wp-block-uagb-image {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* Remove blank gap inside this specific container (between image and text below it) */
.uagb-block-ri9c3yxr,
.uagb-block-ri9c3yxr .uagb-container-inner-blocks-wrap {
	padding-bottom: 0 !important;
	padding-top: 0 !important;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	gap: 0 !important;
}
.uagb-block-ri9c3yxr .wp-block-uagb-image {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.uagb-block-ri9c3yxr p {
	margin-top: -90px !important;
	padding-top: 0 !important;
	font-size: 1.15em !important;
	text-align: justify !important;
	text-justify: inter-word !important;
}

/* Slider pagination dots — overlay on top of the image (bottom edge), single line, gold */
body.erx-landing-mist .uagb-slider-container,
body.erx-landing-mist .uagb-swiper,
body.erx-landing-mist .swiper {
	position: relative !important;
}
body.erx-landing-mist .slick-dots,
body.erx-landing-mist .swiper-pagination,
body.erx-landing-mist .uagb-slider-dots,
body.erx-landing-mist .uagb-swiper-pagination {
	position: absolute !important;
	bottom: 40px !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	white-space: nowrap !important;
	z-index: 5 !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.erx-landing-mist .slick-dots li button:before,
body.erx-landing-mist .swiper-pagination-bullet,
body.erx-landing-mist .uagb-slider-dots li button:before {
	color: #c4a15a !important;
	background: #c4a15a !important;
	opacity: 1 !important;
}
body.erx-landing-mist .slick-dots li.slick-active button:before,
body.erx-landing-mist .swiper-pagination-bullet-active {
	color: #f2dfa8 !important;
	background: #f2dfa8 !important;
}