/**
 * Super Elementor Pack — Animated Divider: Linear Shimmer.
 *
 * SCOPED TO THIS WIDGET ONLY. Does not touch, extend, or replace
 * includes/core/animated-border.css — that shared core file keeps powering
 * the rotating conic-gradient beam on buttons/cards, unchanged.
 *
 * WHY THIS TECHNIQUE:
 * The original code used a CSS mask-composite border trick that reveals only
 * the border stroke (2–10 px wide). On a thin divider bar (e.g. 6 px tall)
 * the visible stroke area is almost non-existent, so the shimmer was present
 * in the DOM but effectively invisible.
 *
 * NEW APPROACH: a semi-transparent gradient band slides left→right across the
 * full bar face using translateX animation. The bar's own `overflow: hidden`
 * clips the band to the bar shape, so border-radius is respected automatically.
 * No mask-composite, no nested calc() quirks, no border-box edge cases.
 *
 * CSS custom properties consumed (set inline by widget.php via get_shimmer_data()):
 *   --sep-shimmer-color-from   Beam start / edge colour.
 *   --sep-shimmer-color-to     Beam centre colour.
 *   --sep-shimmer-base-color   Optional subtle tint across the full bar.
 *   --sep-shimmer-band         Width of the bright centre zone (%, with unit).
 *   --sep-shimmer-duration     Animation cycle length (seconds).
 *   --sep-shimmer-direction    normal | reverse.
 *
 * (--sep-shimmer-width is still emitted by PHP but not consumed here; it is
 *  kept in the inline style so older cached markup stays forward-compatible.)
 */

/* ─── Bar wrapper ─────────────────────────────────────────────────────────── */

/* The bar element must be the clipping context for the shimmer band.
 * `overflow: hidden` clips the translateX animation to the bar's bounds
 * while honouring its border-radius via `border-radius: inherit` on children. */
.sep-has-divider-shimmer {
	position: relative;
	overflow: hidden;
}

/* ─── Shimmer overlay ─────────────────────────────────────────────────────── */

/* Full-coverage overlay that sits above the bar's background-color.
 * No border, no mask — just a transparent wrapper that inherits border-radius
 * and passes custom properties down to its children. */
.sep-divider-shimmer {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}

/* Optional subtle base tint across the entire bar face.
 * Mirrors the "base track" concept from the border-stroke approach:
 * a faint wash visible while the bright band is off-screen. */
.sep-divider-shimmer::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var( --sep-shimmer-base-color, transparent );
	pointer-events: none;
}

/* ─── Sliding light band ──────────────────────────────────────────────────── */

/* The element is 100% wide and starts fully off the left edge (left: -100%).
 * translateX(300%) moves it to the right edge and beyond (net travel 400%).
 * `overflow: hidden` on .sep-has-divider-shimmer clips it cleanly.
 *
 * Gradient shape: transparent wings → colour-from → colour-to centre → transparent.
 * The band width is controlled by --sep-shimmer-band (e.g. "25%"), which
 * shifts the colour stops symmetrically around the 50% midpoint. */
.sep-divider-shimmer__light {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent                                                       0%,
		var( --sep-shimmer-color-from, #6C5CE7 ) calc( 50% - var( --sep-shimmer-band, 25% ) ),
		var( --sep-shimmer-color-to,   #00CEC9 ) 50%,
		var( --sep-shimmer-color-from, #6C5CE7 ) calc( 50% + var( --sep-shimmer-band, 25% ) ),
		transparent                                                       100%
	);
	animation-name: sep-divider-shimmer-slide;
	animation-duration: var( --sep-shimmer-duration, 4s );
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: var( --sep-shimmer-direction, normal );
	will-change: transform;
}

/* From left:-100% + translateX(0) → left:-100% + translateX(300%)
 * Net travel: from -100% to 200% of the bar width — fully off left to fully off right. */
@keyframes sep-divider-shimmer-slide {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( 300% ); }
}

/* ─── Trigger: On Hover Only ─────────────────────────────────────────────── */

.sep-has-shimmer-hover .sep-divider-shimmer {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.sep-has-shimmer-hover .sep-divider-shimmer__light {
	animation-play-state: paused;
}

.sep-has-shimmer-hover:hover .sep-divider-shimmer {
	opacity: 1;
}

.sep-has-shimmer-hover:hover .sep-divider-shimmer__light {
	animation-play-state: running;
}

/* ─── Reduced-motion accessibility ───────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.sep-divider-shimmer__light {
		animation: none;
	}
}