/* Glitter Before & After Slider — v6 mobile fix */

.gba-outer {
	display: block;
	line-height: 0;
}

.gba-slider {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 400px;
	overflow: hidden;
	border-radius: 12px;
	box-sizing: border-box;
	cursor: ew-resize;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	/* BUG FIX: was pan-y — that tells the browser to swallow horizontal
	   touch events before JS ever sees them. none = JS handles everything. */
	touch-action: pan-y; /* vertical scroll allowed; horizontal claimed by JS */
	vertical-align: top;
	/* style containment only — layout containment broke getBCR on mobile */
	contain: style;
	/* Promote to own layer — prevents repaint bleed from images */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/* ── Image layers ─────────────────────────────────── */
.gba-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.gba-layer-after  { z-index: 1; }
.gba-layer-before { z-index: 2; }

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

/* ── Labels ───────────────────────────────────────── */
.gba-label {
	position: absolute;
	bottom: 14px;
	padding: 4px 13px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 10;
	white-space: nowrap;
	line-height: 1.4;
}
.gba-label-before { left: 14px; }
.gba-label-after  { right: 14px; }

/* ── Divider line ─────────────────────────────────── */
.gba-line {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 2px;
	background: #fff;
	z-index: 20;
	pointer-events: none;
	will-change: transform;
	transform: translateX(0);
}

/* ── Handle ───────────────────────────────────────── */
.gba-handle {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 52px; height: 52px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	pointer-events: none;
	box-shadow: 0 2px 12px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.25);
	animation: gba-pulse 2.8s ease-in-out infinite;
	flex-shrink: 0;
}

.gba-slider.is-active .gba-handle {
	animation: none;
	transform: translate(-50%,-50%) scale(1.1);
	box-shadow: 0 3px 18px rgba(0,0,0,.45), 0 0 0 5px rgba(255,255,255,.35);
}

.gba-arrow   { display: block; flex-shrink: 0; }

.gba-hdl-text {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	font-family: inherit;
}

/* ── Glitter canvas ───────────────────────────────── */
.gba-canvas {
	position: absolute;
	inset: 0;
	/* CSS size stays 100%x100% — JS sets pixel dimensions with DPR awareness */
	width: 100%; height: 100%;
	z-index: 30;
	pointer-events: none;
	display: block;
}

/* ── Hover mode ───────────────────────────────────── */
.gba-slider[data-mode="hover"] { cursor: crosshair; }

/* ── Pulse animation ──────────────────────────────── */
@keyframes gba-pulse {
	0%,100% { box-shadow: 0 2px 12px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.25); }
	50%      { box-shadow: 0 2px 12px rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.1), 0 0 20px 4px rgba(255,255,255,.18); }
}

/* ── Mobile overrides ─────────────────────────────── */
@media (max-width: 768px) {
	/* Larger handle — easier to grab on touchscreen */
	.gba-handle {
		width: 44px !important;
		height: 44px !important;
	}
	/* Slightly smaller labels on narrow screens */
	.gba-label {
		font-size: 9px;
		padding: 3px 10px;
	}
}