/**
 * WT Wave Section Widget – Stylesheet
 *
 * Provides the core layout and animation for the animated multi-layer
 * SVG wave widget. All colours, opacity, height, and speeds are applied
 * via Elementor control-generated inline CSS variables / selectors.
 *
 * Architecture notes:
 * ─────────────────────────────────────────────────────────────────────
 * • .wt-wave-section          – Outer container (height set by control).
 * • .wt-wave-layer            – One wave layer; positioned absolutely.
 * • .wt-wave-svg              – The inline SVG; fills half the layer width.
 * • .wt-wave-svg--clone       – Duplicate SVG placed right of the first.
 * • Two keyframes handle forward and reverse animation directions.
 *
 * The seamless loop works by:
 *  1. Each layer is 200% wide (two SVG copies side-by-side).
 *  2. The keyframe slides the layer from translateX(0) → translateX(-50%).
 *  3. Because the two SVG copies are identical, the transition is invisible.
 *
 * @package WT\ElementorWidgets\Widgets\WaveSection
 * @version 1.0.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.wt-wave-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* clip the 200%-wide layer strips */
	line-height: 0;
	/* prevent phantom space below SVGs */

	/* Default height – overridden by Elementor slider control */
	height: 120px;
}

/* Flip variant – waves point downward */
.wt-wave-section--flipped {
	transform: scaleY(-1);
}

/* ==========================================================================
   Wave Layers
   ========================================================================== */

.wt-wave-layer {
	/* Stretch the layer to the full container height */
	position: absolute;
	inset: 0;
	/* top/right/bottom/left: 0 */

	/* 200% width so both SVG copies (each 100%) sit side-by-side */
	width: 201%;
	height: 100%;

	/* Default animation; name overridden by inline style from PHP */
	animation-name: wt-wave-move-fwd;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	/* Duration is set via inline style from PHP */
	animation-duration: 8s;

	/* Prevent flicker on GPU-composited elements */
	will-change: transform;
	backface-visibility: hidden;
	display: flex;
}

/* ==========================================================================
   SVG Elements
   ========================================================================== */

.wt-wave-svg {
	display: block;
	/* removes inline-block baseline gap */
	width: 50%;
	/* each SVG is half the 200%-wide layer */
	height: 100%;
	float: left;
	/* place clone immediately to the right */
}

.wt-wave-svg--clone {
	/* Inherits width: 50% and float: left from .wt-wave-svg */
}

.wt-wave-svg--clone {
	margin: 0 -3px;
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

/**
 * Forward (left-to-right) wave motion.
 * Layer moves from its natural position to -50% (one full SVG width),
 * at which point the animation seamlessly repeats.
 */
@keyframes wt-wave-move-fwd {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/**
 * Reverse (right-to-left) wave motion.
 * Used for alternating layers to add depth / parallax feel.
 */
@keyframes wt-wave-move-rev {
	0% {
		transform: translateX(-50%);
	}

	100% {
		transform: translateX(0);
	}
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
	.wt-wave-section {
		/* Slightly reduce default height on mobile;
		   the Elementor responsive control will override when explicitly set */
		height: 80px;
	}

	.wt-wave-svg {
		width: 50%;
		margin: 0 -1px;
	}
}

@media (max-width: 480px) {
	.wt-wave-section {
		height: 60px;
	}

	.wt-wave-svg {
		width: 100%;
	}
}

/* ==========================================================================
   Accessibility – Respect reduced-motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wt-wave-layer {
		animation-play-state: paused;
	}
}