/* LuxeBeauty before / after sliders. Front page only, loaded after main.css.
 * Everything is scoped to .luxe-ba. luxe-ba.js writes one number (--p, 0..1) per card; all visuals follow it.
 *   p = 0   -> only the "before" photo
 *   p = 1   -> only the "after" photo (handle at the right edge)
 * In between the "after" photo emerges through a soft, feathered edge, so nothing ever jumps.
 */

.luxe-ba {
	position: relative;
	padding-block: 6rem;
	background:
		radial-gradient(ellipse 60% 40% at 50% 0%, oklch(0.78 0.09 75 / 0.08), transparent 70%),
		var(--background);
	border-top: 1px solid var(--border-gold);
}

.ba-grid {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	justify-items: center;
}

.ba {
	--p: 0.5;
	width: 100%;
	max-width: 26rem;
	margin: 0;
}

/* Same frame as the gallery cards: 4 / 5, 0.75rem corners. */
.ba-stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 0.75rem;
	border: 1px solid var(--border-gold);
	background: var(--card);
	direction: ltr;                 /* left = before, right = after, whatever the page direction */
	touch-action: pan-y;            /* vertical scroll still works, horizontal drag is ours */
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
	isolation: isolate;
	transition: border-color 0.3s, box-shadow 0.4s;
}
.ba-stage:hover, .ba.is-drag .ba-stage { border-color: color-mix(in oklch, var(--gold) 60%, transparent); box-shadow: var(--shadow-gold); }
.ba-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.ba-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* Per-photo alignment (--bo/--bt for before, --ao/--at for after): the two photos of a pair were not shot
 * at exactly the same scale, so a small transform lines up the faces. Nothing is animated on the photos
 * themselves any more, that is what made features drift apart in the middle position.
 * --f is the width of the soft edge: wide for well aligned pairs, narrow where the pose differs. */
.ba { --f: 35%; }
.ba-before { transform-origin: var(--bo, 50% 50%); transform: var(--bt, none); }

/* The "after" appears through a feathered mask: fully hidden at p = 0, fully visible at p = 1. */
.ba-after {
	transform-origin: var(--ao, 50% 50%);
	transform: var(--at, none);
	-webkit-mask-image: linear-gradient(to right, #000 calc(var(--p) * (100% + var(--f)) - var(--f)), transparent calc(var(--p) * (100% + var(--f))));
	mask-image: linear-gradient(to right, #000 calc(var(--p) * (100% + var(--f)) - var(--f)), transparent calc(var(--p) * (100% + var(--f))));
}

/* Soft shade at the bottom so the caption stays readable. */
.ba-stage::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 32%;
	pointer-events: none;
	background: linear-gradient(to top, oklch(0.12 0.01 260 / 0.85), transparent);
}

/* Handle: its position runs from 7% to 93% so it never gets cut at the edges. */
.ba-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc((0.07 + var(--p) * 0.86) * 100%);
	width: 2px;
	margin-left: -1px;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(to bottom, transparent, oklch(0.9 0.05 78) 18%, oklch(0.82 0.08 76) 82%, transparent);
	box-shadow: 0 0 18px oklch(0.78 0.09 75 / 0.7);
}
.ba-handle {
	position: absolute;
	top: 50%;
	left: calc((0.07 + var(--p) * 0.86) * 100%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: -1.5rem 0 0 -1.5rem;
	border-radius: 9999px;
	pointer-events: none;
	color: oklch(0.2 0.02 60);
	background-image: var(--gradient-gold);
	box-shadow: var(--shadow-gold), 0 0 0 6px oklch(0.78 0.09 75 / 0.18);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ba-handle::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid oklch(0.88 0.05 78);
	animation: ba-ping 2.6s ease-out infinite;
}
.ba.is-drag .ba-handle { transform: scale(1.14); }
.ba.is-touched .ba-handle::before { animation: none; opacity: 0; }
@keyframes ba-ping {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* Labels: each one follows the photo it names. */
.ba-tag {
	position: absolute;
	top: 0.9rem;
	z-index: 2;
	padding: 0.2rem 0.8rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--cream);
	background: oklch(0.14 0.01 260 / 0.6);
	border: 1px solid var(--border-gold);
	pointer-events: none;
}
.ba-tag-before { left: 0.9rem; opacity: calc(1 - var(--p) * 1.6); }
.ba-tag-after { right: 0.9rem; opacity: calc(var(--p) * 1.6 - 0.6); color: oklch(0.2 0.02 60); background: var(--gold); border-color: transparent; font-weight: 700; }

.ba-cap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 1rem;
	font-size: 0.875rem;
	color: var(--cream);
	pointer-events: none;
	direction: rtl;
	text-align: right;
}

.ba-hint {
	position: absolute;
	left: 50%;
	bottom: 3.2rem;
	z-index: 2;
	transform: translateX(-50%);
	font-size: 0.7rem;
	color: var(--gold-soft);
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 0.5s;
}
.ba.is-touched .ba-hint { opacity: 0; }

@media (min-width: 640px) {
	.ba-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.ba-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ba-handle::before { animation: none; }
	.ba-handle { transition: none; }
}