/**
 * JWolfe footer section - settle-in + floating flowers (v1.11.0).
 *
 * Loaded site-wide (tiny, no GSAP) because the footer section is meant to
 * be saved as the default footer template and appear on every page. The
 * section's LOOK is built with native Elementor settings, so it renders
 * correctly even without this file; this only adds motion + polish.
 *
 * Markup contract (CSS classes set in Elementor):
 *   .jwolfe-footer            section root (background + overlay)
 *   .jwolfe-footer__flowers   the floating foreground PNG (Image widget)
 *   .jwolfe-footer__card      the frosted card; its widgets settle in
 *   .jwolfe-footer__nav       footer menu links
 *
 * Motion (transform/opacity only, all composited):
 *   1. Flowers rise from below and settle as the footer scrolls in - a
 *      scroll-linked CSS animation (animation-timeline: view()) where
 *      supported, otherwise a one-shot transition when it comes into view.
 *   2. Once settled, the flowers "breathe": a slow, bottom-anchored
 *      scale so they feel alive without ever lifting off the edge.
 *      Paused while the footer is off-screen (.is-visible toggled by JS).
 *   3. The card fades up and its contents settle in a gentle stagger.
 */

.jwolfe-footer {
	isolation: isolate;
}

/* Elementor's "Overflow: hidden" makes the section a scroll container,
 * which would pin the flowers' scroll-linked animation (view()) to a box
 * that never scrolls. `clip` crops identically without that side effect. */
@supports (overflow: clip) {
	body .jwolfe-footer {
		overflow: clip !important;
	}
}

.jwolfe-footer .jwolfe-footer__flowers {
	pointer-events: none;
}

/* v1.12.1 - no big empty band between the WORK section and the footer.
 * The footer was 56vw tall (1075px at 1920) with a half-strength overlay
 * (Elementor's default overlay opacity is 0.5), leaving a wide pale strip.
 * Desktop now: shorter footer, a full-strength but short cream fade so it
 * still blends into the section above, more of the image's soft upper
 * sky, and the daisies sunk slightly past the bottom edge (as in the
 * mockup) so they frame the card instead of towering over it.
 * Tablet/phone keep their native Elementor heights. */
@media (min-width: 1025px) {
	body .jwolfe-footer.e-con {
		min-height: clamp(700px, 40vw, 820px) !important;
		background-position: 50% 62% !important;
	}

	body .jwolfe-footer .jwolfe-footer__flowers.elementor-element {
		bottom: -14% !important;
	}
}

body .jwolfe-footer.e-con::before {
	opacity: 1 !important;
	background-image: linear-gradient(180deg, #FAF7F1 0%, rgba(250, 247, 241, 0.85) 8%, rgba(250, 247, 241, 0) 30%) !important;
}

.jwolfe-footer .jwolfe-footer__flowers .elementor-widget-container {
	transform-origin: 50% 100%;
}

.jwolfe-footer .jwolfe-footer__flowers img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

.jwolfe-footer .jwolfe-footer__card {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.jwolfe-footer .jwolfe-footer__nav a {
	transition: color 0.3s ease;
}

.jwolfe-footer .jwolfe-footer__nav a:hover,
.jwolfe-footer .jwolfe-footer__nav a:focus-visible,
.jwolfe-footer .jwolfe-footer__card a:hover {
	color: #0F5C63 !important;
}

@media (prefers-reduced-motion: no-preference) {

	/* ---- 1. Flowers rise + settle ------------------------------------ */
	@supports (animation-timeline: view()) {
		.jwolfe-footer .jwolfe-footer__flowers {
			animation: jwFootRise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
	}

	@supports not (animation-timeline: view()) {
		.jwolfe-footer.jw-foot-ready .jwolfe-footer__flowers img {
			transform: translate3d(0, 14%, 0);
			transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
		}

		.jwolfe-footer.jw-foot-ready.is-in .jwolfe-footer__flowers img {
			transform: none;
		}
	}

	/* ---- 2. Idle breathing (bottom-anchored, never lifts) ------------ */
	.jwolfe-footer.is-in .jwolfe-footer__flowers .elementor-widget-container {
		animation: jwFootBreathe 9s ease-in-out 1.6s infinite;
		animation-play-state: paused;
	}

	.jwolfe-footer.is-in.is-visible .jwolfe-footer__flowers .elementor-widget-container {
		animation-play-state: running;
	}

	/* ---- 3. Card settle ---------------------------------------------- */
	.jwolfe-footer.jw-foot-ready .jwolfe-footer__card {
		opacity: 0;
		transform: translate3d(0, 44px, 0) scale(0.985);
		transition:
			opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
			transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.jwolfe-footer.jw-foot-ready .jwolfe-footer__card > .elementor-element {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
		transition:
			opacity 0.9s ease,
			transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.jwolfe-footer.jw-foot-ready.is-in .jwolfe-footer__card,
	.jwolfe-footer.jw-foot-ready.is-in .jwolfe-footer__card > .elementor-element {
		opacity: 1;
		transform: none;
	}

	.jwolfe-footer.is-in .jwolfe-footer__card > .elementor-element:nth-child(1) { transition-delay: 0.30s; }
	.jwolfe-footer.is-in .jwolfe-footer__card > .elementor-element:nth-child(2) { transition-delay: 0.38s; }
	.jwolfe-footer.is-in .jwolfe-footer__card > .elementor-element:nth-child(3) { transition-delay: 0.48s; }
	.jwolfe-footer.is-in .jwolfe-footer__card > .elementor-element:nth-child(4) { transition-delay: 0.58s; }
	.jwolfe-footer.is-in .jwolfe-footer__card > .elementor-element:nth-child(5) { transition-delay: 0.64s; }
	.jwolfe-footer.is-in .jwolfe-footer__card > .elementor-element:nth-child(6) { transition-delay: 0.72s; }
	.jwolfe-footer.is-in .jwolfe-footer__card > .elementor-element:nth-child(7) { transition-delay: 0.80s; }
}

@keyframes jwFootRise {
	from {
		transform: translate3d(0, 22%, 0);
	}

	to {
		transform: none;
	}
}

@keyframes jwFootBreathe {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.018);
	}
}