/* Site-wide motion (WEENVO-383, inc/motion.php + assets/js/motion.js).
   Only opacity and transform animate; everything is switched off for prefers-reduced-motion. */

/* ---------- Hero: content rises in, two soft lights drift over the violet ground ---------- */
.wv-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(28% 34% at 22% 30%, rgba(177, 66, 236, 0.45) 0%, rgba(177, 66, 236, 0) 100%),
		radial-gradient(30% 36% at 78% 38%, rgba(74, 66, 236, 0.55) 0%, rgba(74, 66, 236, 0) 100%);
	-webkit-mask: url("../images/hero-wave.svg") center bottom / cover no-repeat;
	mask: url("../images/hero-wave.svg") center bottom / cover no-repeat;
	background-size: 140% 140%, 140% 140%;
	background-repeat: no-repeat;
	animation: wv-hero-drift 18s ease-in-out infinite alternate;
}
/* Only the lights move (background-position); the wave mask stays where it is. */
@keyframes wv-hero-drift {
	0% { background-position: 0% 0%, 100% 20%; opacity: 0.85; }
	50% { background-position: 30% 40%, 60% 0%; opacity: 1; }
	100% { background-position: 10% 20%, 90% 50%; opacity: 0.9; }
}
.wv-hero > h1, .wv-hero > p, .wv-hero > .wp-block-buttons { animation: wv-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.wv-hero > p { animation-delay: 0.12s; }
.wv-hero > .wp-block-buttons { animation-delay: 0.24s; }
@keyframes wv-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal on scroll (classes added by home.js) ---------- */
.wv-js .wv-rv {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--wv-d, 0s), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--wv-d, 0s);
}
.wv-js .wv-rv.is-in { opacity: 1; transform: none; }
.wv-js .wv-panel li.wv-rv { transform: translateX(-12px); }
.wv-js .wv-panel li.wv-rv.is-in { transform: none; }

/* ---------- "Core features" panel: the gradient slowly moves ---------- */
.wv-section > .wv-panel { background-size: 180% 180%; animation: wv-panel-shift 14s ease-in-out infinite alternate; }
@keyframes wv-panel-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- Module rows: text and screenshot come in from their own side ---------- */
/* The offsets apply only until the column is in (.is-in), so the end state is always the plain `transform: none`. */
.wv-js .wv-feature .wp-block-column.wv-rv:not(.is-in):has(> .wp-block-image) { transform: translateX(48px) scale(0.97); }
.wv-js .wv-feature .wp-block-column.wv-rv:not(.is-in):not(:has(> .wp-block-image)) { transform: translateX(-32px); }
.wv-js .wv-feature .wp-block-columns > .wp-block-column.wv-rv:not(.is-in):first-child:has(> .wp-block-image) { transform: translateX(-48px) scale(0.97); }
.wv-js .wv-feature .wp-block-columns > .wp-block-column.wv-rv:not(.is-in):last-child:not(:has(> .wp-block-image)) { transform: translateX(32px); }
/* Rows sliding in from the side must not widen the page while they move. */
.wv-feature { overflow-x: clip; }
.wv-feature .wp-block-image img { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s; }
.wv-feature .wp-block-image img:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(42, 0, 96, 0.14); }
/* Phones: rows stack, so everything simply rises. */
@media (max-width: 781px) { .wv-js .wv-feature .wp-block-columns > .wp-block-column.wv-rv:not(.is-in) { transform: translateY(28px) !important; } }

/* ---------- Benefits: the icon answers the pointer ---------- */
:is(.wv-benefit-row, .wv-card, .wv-usecase) .wv-icon-block { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
:is(.wv-benefit-row, .wv-card, .wv-usecase):hover .wv-icon-block { transform: scale(1.08) rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
	.wv-hero::after, .wv-hero > *, .wv-section > .wv-panel { animation: none !important; }
	.wv-js .wv-rv, .wv-js .wv-feature .wp-block-column.wv-rv, .wv-feature .wp-block-image img, :is(.wv-benefit-row, .wv-card, .wv-usecase) .wv-icon-block {
		transition: none !important;
		transform: none !important;
	}
	.wv-js .wv-rv { opacity: 1 !important; }
}