/**
 * Wedwebs Natural Motion
 *
 * Pure-CSS, transform-only looping animations for the Natural Motion Image
 * widget. The loop runs on the inner wrapper layers (.ww-nm-motion /
 * .ww-nm-motion-inner), never on the Elementor widget element, so it never
 * collides with Elementor's entrance-animation transforms. All keyframes and
 * classes are namespaced "ww-nm-" to avoid clashing with Elementor's animation
 * library (fadeIn, etc.).
 *
 * CSS custom properties (set per-instance via the widget's controls):
 *   --ww-nm-amount    movement multiplier (default 1)
 *   --ww-nm-duration  loop length        (default 4s)
 *   --ww-nm-delay     start delay        (default 0s)
 *   --ww-nm-ease      timing function    (default ease-in-out)
 */

.ww-nm {
	display: inline-block;
	line-height: 0;
	max-width: 100%;
}

.ww-nm-link {
	display: inline-block;
	line-height: 0;
}

.ww-nm-asset {
	display: block;
	max-width: 100%;
	height: auto;
}

.ww-nm-motion,
.ww-nm-motion-inner {
	display: inline-block;
	will-change: transform;
}

/* Pivot for rotation / scale. The Anchor control sets --ww-nm-origin; when it
   is left on "Auto" the per-preset fallback below applies. */
.ww-nm-motion {
	transform-origin: var(--ww-nm-origin, center);
}

/* Shared timing applied to the primary motion layer. */
.ww-nm-motion {
	animation-duration: var(--ww-nm-duration, 4s);
	animation-timing-function: var(--ww-nm-ease, ease-in-out);
	animation-delay: var(--ww-nm-delay, 0s);
	animation-iteration-count: infinite;
}

/* ---------------------------------------------------------------------------
 * Single-axis presets (alternate back and forth)
 * ------------------------------------------------------------------------- */

.ww-nm--sway .ww-nm-motion {
	transform-origin: var(--ww-nm-origin, bottom center);
	animation-name: ww-nm-sway;
	animation-direction: alternate;
}

.ww-nm--bob .ww-nm-motion {
	animation-name: ww-nm-bob;
	animation-direction: alternate;
}

.ww-nm--pendulum .ww-nm-motion {
	transform-origin: var(--ww-nm-origin, top center);
	animation-name: ww-nm-pendulum;
	animation-direction: alternate;
}

.ww-nm--breathe .ww-nm-motion {
	animation-name: ww-nm-breathe;
	animation-direction: alternate;
}

.ww-nm--drift .ww-nm-motion {
	animation-name: ww-nm-drift;
	animation-direction: normal;
}

/* ---------------------------------------------------------------------------
 * Compound presets: outer and inner layers run on different periods so the
 * combined path never looks like an obvious, single repeating loop.
 * ------------------------------------------------------------------------- */

.ww-nm--flutter .ww-nm-motion {
	animation-name: ww-nm-flutter-rot;
	animation-direction: alternate;
}
.ww-nm--flutter .ww-nm-motion-inner {
	animation: ww-nm-flutter-y calc(var(--ww-nm-duration, 4s) * 0.66) ease-in-out var(--ww-nm-delay, 0s) infinite alternate;
}

.ww-nm--glide .ww-nm-motion {
	animation-name: ww-nm-bob;
	animation-direction: alternate;
}
.ww-nm--glide .ww-nm-motion-inner {
	animation: ww-nm-tilt calc(var(--ww-nm-duration, 4s) * 1.3) ease-in-out var(--ww-nm-delay, 0s) infinite alternate;
}

.ww-nm--fall .ww-nm-motion {
	animation-name: ww-nm-fall;
	animation-direction: normal;
	animation-timing-function: linear;
}
.ww-nm--fall .ww-nm-motion-inner {
	animation: ww-nm-wobble calc(var(--ww-nm-duration, 4s) * 0.5) ease-in-out var(--ww-nm-delay, 0s) infinite alternate;
}

/* ---------------------------------------------------------------------------
 * Keyframes (transform only — GPU-composited, no layout reflow)
 * ------------------------------------------------------------------------- */

@keyframes ww-nm-sway {
	from { transform: rotate(calc(var(--ww-nm-amount, 1) * -3deg)); }
	to   { transform: rotate(calc(var(--ww-nm-amount, 1) * 3deg)); }
}

@keyframes ww-nm-bob {
	from { transform: translateY(calc(var(--ww-nm-amount, 1) * -8px)); }
	to   { transform: translateY(calc(var(--ww-nm-amount, 1) * 8px)); }
}

@keyframes ww-nm-pendulum {
	from { transform: rotate(calc(var(--ww-nm-amount, 1) * -6deg)); }
	to   { transform: rotate(calc(var(--ww-nm-amount, 1) * 6deg)); }
}

@keyframes ww-nm-breathe {
	from { transform: scale(1); }
	to   { transform: scale(calc(1 + var(--ww-nm-amount, 1) * 0.06)); }
}

@keyframes ww-nm-drift {
	from { transform: translateX(calc(var(--ww-nm-amount, 1) * -14px)) translateY(0); }
	50%  { transform: translateX(0) translateY(calc(var(--ww-nm-amount, 1) * -6px)); }
	to   { transform: translateX(calc(var(--ww-nm-amount, 1) * 14px)) translateY(0); }
}

@keyframes ww-nm-flutter-rot {
	from { transform: rotate(calc(var(--ww-nm-amount, 1) * -8deg)); }
	to   { transform: rotate(calc(var(--ww-nm-amount, 1) * 8deg)); }
}

@keyframes ww-nm-flutter-y {
	from { transform: translateY(calc(var(--ww-nm-amount, 1) * -6px)); }
	to   { transform: translateY(calc(var(--ww-nm-amount, 1) * 6px)); }
}

@keyframes ww-nm-tilt {
	from { transform: rotate(-2deg); }
	to   { transform: rotate(2deg); }
}

@keyframes ww-nm-fall {
	from { transform: translateY(-10%) rotate(0deg); }
	to   { transform: translateY(110%) rotate(calc(var(--ww-nm-amount, 1) * 40deg)); }
}

@keyframes ww-nm-wobble {
	from { transform: translateX(calc(var(--ww-nm-amount, 1) * -10px)); }
	to   { transform: translateX(calc(var(--ww-nm-amount, 1) * 10px)); }
}

/* ---------------------------------------------------------------------------
 * Hover behaviors
 * ------------------------------------------------------------------------- */

.ww-nm--pause-hover:hover .ww-nm-motion,
.ww-nm--pause-hover:hover .ww-nm-motion-inner {
	animation-play-state: paused;
}

.ww-nm--hover-only .ww-nm-motion,
.ww-nm--hover-only .ww-nm-motion-inner {
	animation-play-state: paused;
}
.ww-nm--hover-only:hover .ww-nm-motion,
.ww-nm--hover-only:hover .ww-nm-motion-inner {
	animation-play-state: running;
}

/* ---------------------------------------------------------------------------
 * Accessibility: honor a reduced-motion preference.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ww-nm-motion,
	.ww-nm-motion-inner {
		animation: none !important;
	}
}