/* ==========================================================================
   Glow Fusion Esthetic — Homepage feature band: Luxe Lift Facial
   Scoped entirely to .gfe-lx. Enqueued on the front page only.
   Motion is gated behind .gfe-js (added by gfe.js only when the visitor has
   NOT asked for reduced motion), so no-JS and reduced-motion visitors always
   see the finished, static composition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The band
   -------------------------------------------------------------------------- */
.e-con.gfe-lx {
	--padding-top: clamp(62px, 7.2vw, 112px);
	--padding-bottom: clamp(62px, 7.2vw, 112px);
	background-color: var(--gfe-paper);
	background-image:
		radial-gradient(54% 64% at 71% 44%, rgba(226, 201, 151, .30) 0%, rgba(226, 201, 151, 0) 70%),
		radial-gradient(46% 74% at 6% 84%, rgba(150, 156, 124, .22) 0%, rgba(150, 156, 124, 0) 72%),
		linear-gradient(180deg, #F7F3EE 0%, #F3EFE8 48%, #EAE6DA 100%);
	border-top: 1px solid rgba(194, 158, 95, .48);
	border-bottom: 1px solid rgba(59, 63, 49, .07);
}

/* Slow diagonal light sweep — echoes the light shaft in the photograph.
   Pure transform/opacity, so it stays on the compositor. */
.e-con.gfe-lx::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: -25% -55%;
	pointer-events: none;
	background: linear-gradient(101deg,
		rgba(255, 253, 247, 0) 31%,
		rgba(255, 253, 247, .70) 44%,
		rgba(242, 231, 205, .38) 51%,
		rgba(255, 253, 247, 0) 65%);
	opacity: .6;
	transform: translate3d(-12%, 0, 0);
	will-change: transform;
}
.gfe-js .e-con.gfe-lx.is-in::before { animation: gfeLxSweep 24s var(--gfe-ease) 1.2s infinite; }
@keyframes gfeLxSweep {
	0%   { transform: translate3d(-17%, 0, 0); opacity: 0; }
	16%  { opacity: .6; }
	80%  { opacity: .5; }
	100% { transform: translate3d(17%, 0, 0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   2. Two-column editorial grid
   -------------------------------------------------------------------------- */
.e-con.gfe-lx > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr);
	align-items: center;
	gap: clamp(30px, 4.4vw, 78px);
}
.e-con.gfe-lx-copy {
	padding: 0;
	width: 100%;
	max-width: 545px;
	gap: 0;
}

/* --------------------------------------------------------------------------
   3. Copy
   -------------------------------------------------------------------------- */
.gfe-lx .gfe-lx-eyebrow { margin-bottom: 15px; }
.gfe-sec .gfe-lx-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #6B5329;
}
.gfe-sec .gfe-lx-eyebrow .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	background: var(--gfe-gold);
	transform-origin: left;
}
.gfe-js .gfe-lx .gfe-lx-eyebrow .elementor-heading-title::before {
	transform: scaleX(0);
	transition: transform 1s var(--gfe-ease-out) .3s;
}
.gfe-js .gfe-lx.is-in .gfe-lx-eyebrow .elementor-heading-title::before { transform: scaleX(1); }

.gfe-sec .gfe-lx-h2 .elementor-heading-title {
	font-family: var(--gfe-serif);
	font-size: clamp(33px, 3.55vw, 53px);
	line-height: 1.06;
	letter-spacing: -.012em;
	color: var(--gfe-ink);
}

.gfe-sec .gfe-lx-sub.elementor-widget-text-editor {
	margin-top: 13px;
	font-family: var(--gfe-serif);
	font-size: clamp(17px, 1.5vw, 21px);
	font-style: italic;
	line-height: 1.4;
	color: #5A5F48;
}

.gfe-sec .gfe-lx-body.elementor-widget-text-editor {
	margin-top: 20px;
	max-width: 49ch;
	font-size: 16.5px;
	line-height: 1.82;
	color: var(--gfe-ink-soft);
}

/* Treatment time chip */
.gfe-lx-metaw { margin-top: 26px; }
.gfe-lx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }
.gfe-lx-dur {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 15px 6px 12px;
	border: 1px solid rgba(107, 83, 41, .36);
	border-radius: 2px;
	background: rgba(255, 253, 247, .55);
	font-family: var(--gfe-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6B5329;
	white-space: nowrap;
}
.gfe-lx-dur::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat 50% / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat 50% / contain;
}
.gfe-lx-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* One CTA only: the band hands the visitor to the Luxe Lift section on
   /facials/, where the existing booking CTA continues to Square. */
.gfe-lx .e-con.gfe-actions { margin-top: 32px; }
.gfe-lx .gfe-btn .elementor-button { min-width: 208px; }

/* --------------------------------------------------------------------------
   4. The products
   The authentic Circadia products are delivered pre-isolated on transparency
   (the untouched original photograph stays in the Media Library). Nothing is
   masked or cropped here: a warm bloom sits behind the grouping and a pair of
   soft drop-shadows follow the products' own edges, so they read as sitting in
   the band's cream light rather than as a photograph pasted into it.
   -------------------------------------------------------------------------- */
.e-con.gfe-lx-media {
	position: relative;
	padding: 0;
	width: 100%;
	gap: 0;
}
.e-con.gfe-lx-media::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 2%;
	right: 2%;
	top: 4%;
	bottom: 2%;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(56% 56% at 50% 54%, rgba(243, 229, 200, .78) 0%, rgba(243, 229, 200, 0) 72%);
}
.gfe-lx-media .elementor-widget-image { position: relative; z-index: 1; }
.gfe-lx-img img {
	display: block;
	width: 100%;
	height: auto;
	/* Both shadows are cast from the alpha channel, so they trace the bottles
	   and jars themselves: a tight contact shadow plus a soft ambient one. */
	filter:
		drop-shadow(0 1px 1px rgba(72, 76, 58, .11))
		drop-shadow(0 15px 24px rgba(72, 76, 58, .17));
}

/* --------------------------------------------------------------------------
   5. Entrance (JS + motion-allowed only)
   -------------------------------------------------------------------------- */
.gfe-js .gfe-lx .gfe-lx-eyebrow,
.gfe-js .gfe-lx .gfe-lx-h2,
.gfe-js .gfe-lx .gfe-lx-sub,
.gfe-js .gfe-lx .gfe-lx-body,
.gfe-js .gfe-lx .gfe-lx-metaw,
.gfe-js .gfe-lx .e-con.gfe-lx-actions {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .95s var(--gfe-ease-out), transform 1.05s var(--gfe-ease-out);
}
.gfe-js .gfe-lx.is-in .gfe-lx-eyebrow,
.gfe-js .gfe-lx.is-in .gfe-lx-h2,
.gfe-js .gfe-lx.is-in .gfe-lx-sub,
.gfe-js .gfe-lx.is-in .gfe-lx-body,
.gfe-js .gfe-lx.is-in .gfe-lx-metaw,
.gfe-js .gfe-lx.is-in .e-con.gfe-lx-actions {
	opacity: 1;
	transform: none;
}
.gfe-js .gfe-lx.is-in .gfe-lx-eyebrow  { transition-delay: .06s; }
.gfe-js .gfe-lx.is-in .gfe-lx-h2       { transition-delay: .16s; }
.gfe-js .gfe-lx.is-in .gfe-lx-sub      { transition-delay: .26s; }
.gfe-js .gfe-lx.is-in .gfe-lx-body     { transition-delay: .34s; }
.gfe-js .gfe-lx.is-in .gfe-lx-metaw    { transition-delay: .42s; }
.gfe-js .gfe-lx.is-in .e-con.gfe-lx-actions { transition-delay: .5s; }

/* The Circadia composition materialises on its own trigger: gfe.js gives
   .gfe-lx-media the .is-in class only once the products are meaningfully in
   view, so on desktop the reveal is never spent while the right-hand column is
   still below the fold. The grouping rises, sharpens out of a soft blur and
   fades up as one movement (~1.55s), and the champagne bloom behind it swells
   in with it. The two drop-shadows are part of the same transition, so no hard
   shadow ever sits under a still-blurred image. */
.gfe-lx {
	--gfe-lx-rise: cubic-bezier(.17, .84, .24, 1);
	--gfe-lx-blur: 14px;
}

.gfe-js .gfe-lx .gfe-lx-media::before {
	opacity: 0;
	transform: scale(.86);
	transition: opacity 1.5s var(--gfe-ease-out) .08s, transform 1.7s var(--gfe-lx-rise) .08s;
}
.gfe-js .gfe-lx .gfe-lx-media.is-in::before { opacity: 1; transform: none; }

.gfe-js .gfe-lx .gfe-lx-img img {
	opacity: 0;
	transform: translate3d(0, 38px, 0) scale(1.028);
	filter:
		blur(var(--gfe-lx-blur))
		drop-shadow(0 1px 1px rgba(72, 76, 58, 0))
		drop-shadow(0 15px 24px rgba(72, 76, 58, 0));
	transition:
		opacity 1.05s var(--gfe-ease-out),
		transform 1.55s var(--gfe-lx-rise),
		filter 1.4s var(--gfe-ease-out);
}
.gfe-js .gfe-lx .gfe-lx-media.is-in .gfe-lx-img img {
	opacity: 1;
	transform: none;
	filter:
		blur(0px)
		drop-shadow(0 1px 1px rgba(72, 76, 58, .11))
		drop-shadow(0 15px 24px rgba(72, 76, 58, .17));
}
/* Float lives on the wrapper so it never fights the entrance transform, and
   only begins once the composition has settled and gone crisp. */
.gfe-js .gfe-lx .gfe-lx-media.is-in .gfe-lx-img { animation: gfeLxFloat 16s var(--gfe-ease) 2.4s infinite; }
@keyframes gfeLxFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -7px, 0); }
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.e-con.gfe-lx > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(20px, 3.6vw, 32px);
		justify-items: center;
	}
	/* Stacked: the product grouping leads as an editorial opener, held to a width
	   that keeps the labels legible without letting it dominate the band. */
	.e-con.gfe-lx-media { order: -1; width: min(100%, 460px); margin-inline: auto; }
	.e-con.gfe-lx-copy { max-width: 620px; }
	.gfe-lx-img img { display: block; width: 100%; height: auto; margin-inline: auto; }
	.e-con.gfe-lx-media::before { left: 8%; right: 8%; top: 6%; bottom: 4%; }
}

@media (max-width: 600px) {
	/* Slightly shallower blur on phones: same read, less to rasterise. */
	.gfe-lx { --gfe-lx-blur: 11px; }
	.e-con.gfe-lx {
		--padding-top: clamp(46px, 11vw, 62px);
		--padding-bottom: clamp(46px, 11vw, 62px);
	}
	.gfe-sec .gfe-lx-eyebrow .elementor-heading-title { letter-spacing: .26em; gap: 10px; }
	.gfe-sec .gfe-lx-eyebrow .elementor-heading-title::before { width: 22px; }
	.gfe-sec .gfe-lx-body.elementor-widget-text-editor { font-size: 15.5px; line-height: 1.78; }
	.gfe-lx .e-con.gfe-actions { margin-top: 26px; gap: 12px; width: 100%; }
	.gfe-lx .e-con.gfe-actions > .elementor-widget { width: 100%; flex: 1 1 100%; }
	.gfe-lx .gfe-btn .elementor-button { width: 100%; }
}

@media (max-width: 360px) {
	.gfe-lx { --gfe-lx-blur: 9px; }
	.gfe-sec .gfe-lx-h2 .elementor-heading-title { font-size: 30px; }
	.gfe-lx-dur { letter-spacing: .1em; }
}

/* --------------------------------------------------------------------------
   7. Reduced motion — belt and braces on top of the global rule
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.e-con.gfe-lx::before,
	.gfe-js .e-con.gfe-lx.is-in::before,
	.gfe-js .gfe-lx .gfe-lx-media.is-in .gfe-lx-img { animation: none !important; }
	.gfe-js .gfe-lx .gfe-lx-eyebrow,
	.gfe-js .gfe-lx .gfe-lx-h2,
	.gfe-js .gfe-lx .gfe-lx-sub,
	.gfe-js .gfe-lx .gfe-lx-body,
	.gfe-js .gfe-lx .gfe-lx-metaw,
	.gfe-js .gfe-lx .e-con.gfe-lx-actions,
	.gfe-js .gfe-lx .gfe-lx-media::before,
	.gfe-js .gfe-lx .gfe-lx-img img { opacity: 1 !important; transform: none !important; transition: none !important; }
	/* Final, crisp composition straight away — no blur to sharpen out of. */
	.gfe-js .gfe-lx .gfe-lx-img img {
		filter:
			drop-shadow(0 1px 1px rgba(72, 76, 58, .11))
			drop-shadow(0 15px 24px rgba(72, 76, 58, .17)) !important;
	}
	.gfe-js .gfe-lx .gfe-lx-eyebrow .elementor-heading-title::before { transform: scaleX(1) !important; }
}