/**
 * Featured sidebar product links – animation (site-wide).
 * Applied to .sidebar-element.gep-featured-sidebar-link
 */

.sidebar-main-con .sidebar-element.gep-featured-sidebar-link {
	position: relative;
	padding-left: 10px !important;
	border-left: 3px solid var(--gep-accent, #4db37c);
	border-radius: 10px;
	background: linear-gradient(90deg, var(--gep-accent-soft, rgba(77, 179, 124, 0.16)) 0%, rgba(255, 255, 255, 0) 82%);
	box-shadow: 0 0 0 1px rgba(77, 179, 124, 0.14), 0 6px 14px rgba(45, 138, 91, 0.1);
	animation: gepFeaturedSidebarMotion 3.6s ease-in-out infinite !important;
	animation-delay: calc(var(--gep-bounce-order, 0) * 0.2s) !important;
	transform-origin: left center;
	will-change: transform, box-shadow;
	overflow: hidden;
	isolation: isolate;
}

.sidebar-main-con .sidebar-element.gep-featured-sidebar-link::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 58%;
	height: 100%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 52%, rgba(255, 255, 255, 0) 100%);
	animation: gepFeaturedSidebarShine 3.2s ease-in-out infinite !important;
	animation-delay: calc(var(--gep-bounce-order, 0) * 0.2s) !important;
	pointer-events: none;
	z-index: 1;
}

.sidebar-main-con .sidebar-element.gep-featured-sidebar-link:hover {
	box-shadow: 0 0 0 1px rgba(77, 179, 124, 0.28), 0 10px 22px rgba(45, 138, 91, 0.2);
}

@keyframes gepFeaturedSidebarMotion {
	0%, 100% {
		transform: translate3d(0, 0, 0) scale(1);
		box-shadow: 0 0 0 1px rgba(77, 179, 124, 0.14), 0 6px 14px rgba(45, 138, 91, 0.1);
	}
	25% {
		transform: translate3d(0, -2px, 0) scale(1.012);
		box-shadow: 0 0 0 1px rgba(77, 179, 124, 0.22), 0 10px 18px rgba(45, 138, 91, 0.16);
	}
	50% {
		transform: translate3d(4px, 0, 0) scale(1.02);
		box-shadow: 0 0 0 1px rgba(77, 179, 124, 0.26), 0 12px 22px rgba(45, 138, 91, 0.18);
	}
	75% {
		transform: translate3d(-1px, -1px, 0) scale(1.008);
	}
}

@keyframes gepFeaturedSidebarShine {
	0%, 55% {
		left: -120%;
	}
	78%, 100% {
		left: 140%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sidebar-main-con .sidebar-element.gep-featured-sidebar-link,
	.sidebar-main-con .sidebar-element.gep-featured-sidebar-link::after {
		animation: none !important;
	}
}