/* ============================================================
   WoonWonder — Elementor motion layer
   Adds tasteful animation to native Elementor pages without
   requiring any per-widget setup. All motion is gated behind
   prefers-reduced-motion and applied via JS-added classes, so
   if JS is disabled the content stays fully visible.
============================================================ */

/* --- Scroll reveal / hero entrance (class added by JS; runs on all
   devices, including mobile in battery-saver where motion is reduced) --- */
.ww-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .85s cubic-bezier(.16, 1, .3, 1),
	            transform .85s cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform;
}
.ww-reveal.is-in {
	opacity: 1;
	transform: none;
}
/* Reduce-motion / battery-saver: keep a gentle fade, drop the movement. */
html.ww-reduced .ww-reveal {
	transform: none;
	transition: opacity .6s ease;
}

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

	/* --- Hero parallax: keep the background smooth while JS shifts it --- */
	#home-hero,
	#veranda-hero {
		background-attachment: scroll;
		transition: background-position-y .05s linear;
		will-change: background-position;
	}

	/* --- Image zoom on hover (content images) --- */
	.elementor-widget-image .elementor-widget-container {
		overflow: hidden;
	}
	.elementor-widget-image img {
		transition: transform .8s cubic-bezier(.16, 1, .3, 1);
		will-change: transform;
	}
	.elementor-widget-image:hover img {
		transform: scale(1.05);
	}

	/* --- Image gallery zoom on hover --- */
	.elementor-image-gallery .gallery-icon,
	.elementor-image-gallery .gallery-item a {
		overflow: hidden;
		display: block;
	}
	.elementor-image-gallery .gallery-item img {
		transition: transform .8s cubic-bezier(.16, 1, .3, 1) !important;
		will-change: transform;
	}
	.elementor-image-gallery .gallery-item:hover img {
		transform: scale(1.06);
	}

	/* --- Button micro-lift --- */
	.elementor-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 28px rgba(156, 24, 96, .28);
	}

	/* --- Veranda system cards: lift on hover (class added by JS) --- */
	.elementor-column.ww-card > .elementor-widget-wrap,
	.elementor-column.ww-card > .elementor-element-populated {
		transition: transform .45s cubic-bezier(.16, 1, .3, 1),
		            box-shadow .45s cubic-bezier(.16, 1, .3, 1),
		            border-color .45s;
		will-change: transform;
	}
	.elementor-column.ww-card:hover > .elementor-widget-wrap,
	.elementor-column.ww-card:hover > .elementor-element-populated {
		transform: translateY(-7px);
		box-shadow: 0 20px 46px rgba(28, 25, 23, .15);
		border-color: #9C1860;
	}
}

/* Buttons keep their colour transition even with reduced motion */
.elementor-button {
	transition: background-color .3s, color .3s, transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s;
}