/*
Lamy LP — Mobile Sticky CTA (Phase 8)

Strategy SC3 — IntersectionObserver-based smart show/hide:
visible only at <768px, and only when both #hero AND #final-form
are out of view. lp.js IIFE toggles the [hidden] attribute.

Purple Accent G — upward purple glow box-shadow.

Implementation note: native [hidden] attribute has UA `display: none`.
We override to `display: flex` and use opacity + transform for a smooth
slide-up animation when JS removes [hidden].
*/

/* ============================================================
   Base mobile state — fixed bottom bar
   ============================================================ */
.lp-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	background: rgba(17, 17, 17, 0.95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 12px clamp(16px, 4vw, 24px);
	padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* iPhone notch */
	/* Purple Accent G — upward purple glow */
	box-shadow:
		0 -4px 32px rgba(138, 79, 255, 0.25),
		0 -1px 4px rgba(0, 0, 0, 0.6);

	/* Visible state */
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hidden state — override UA [hidden] display:none so we can animate.
   The class+attribute selector beats the UA [hidden] specificity. */
.lp-sticky-cta[hidden] {
	display: flex;
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
}

/* Button fills the bar */
.lp-sticky-cta__button {
	width: 100%;
	text-align: center;
	font-size: 16px; /* touch-friendly */
}

/* ============================================================
   Desktop — hide sticky CTA entirely at >= 768px
   ============================================================ */
@media (min-width: 768px) {
	.lp-sticky-cta,
	.lp-sticky-cta[hidden] {
		display: none !important;
	}
}

/* ============================================================
   Reduced motion — disable slide transition
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.lp-sticky-cta {
		transition: none;
	}
}