/* WP Expert Lab - Motion Effects Frontend Styles (Lite) */

.wpel-motion-el {
	--wpel-duration: 800ms;
	--wpel-delay: 0ms;
	--wpel-easing: cubic-bezier(.16,.84,.44,1);
	transition-duration: var(--wpel-duration);
	transition-delay: var(--wpel-delay);
	transition-timing-function: var(--wpel-easing);
	will-change: transform, opacity, clip-path, filter;
}

.wpel-motion-el.wpel-reduced-motion,
.wpel-motion-el.wpel-reduced-motion * {
	transition: none !important;
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
}

/* Fade family */
.wpel-fx-fade { opacity: 0; transition-property: opacity; }
.wpel-fx-fade.wpel-in-view { opacity: 1; }

.wpel-fx-fade-up { opacity: 0; transform: translateY(40px); transition-property: opacity, transform; }
.wpel-fx-fade-up.wpel-in-view { opacity: 1; transform: translateY(0); }

.wpel-fx-fade-down { opacity: 0; transform: translateY(-40px); transition-property: opacity, transform; }
.wpel-fx-fade-down.wpel-in-view { opacity: 1; transform: translateY(0); }

.wpel-fx-fade-left { opacity: 0; transform: translateX(40px); transition-property: opacity, transform; }
.wpel-fx-fade-left.wpel-in-view { opacity: 1; transform: translateX(0); }

.wpel-fx-fade-right { opacity: 0; transform: translateX(-40px); transition-property: opacity, transform; }
.wpel-fx-fade-right.wpel-in-view { opacity: 1; transform: translateX(0); }

/* Zoom / blur */
.wpel-fx-zoom-in { opacity: 0; transform: scale(.85); transition-property: opacity, transform; }
.wpel-fx-zoom-in.wpel-in-view { opacity: 1; transform: scale(1); }

.wpel-fx-zoom-out { opacity: 0; transform: scale(1.15); transition-property: opacity, transform; }
.wpel-fx-zoom-out.wpel-in-view { opacity: 1; transform: scale(1); }

.wpel-fx-blur-in { opacity: 0; filter: blur(12px); transition-property: opacity, filter; }
.wpel-fx-blur-in.wpel-in-view { opacity: 1; filter: blur(0); }

/* Slide family (no fade, hard translate) */
.wpel-fx-slide-up { transform: translateY(60px); transition-property: transform; }
.wpel-fx-slide-up.wpel-in-view { transform: translateY(0); }
.wpel-fx-slide-down { transform: translateY(-60px); transition-property: transform; }
.wpel-fx-slide-down.wpel-in-view { transform: translateY(0); }
.wpel-fx-slide-left { transform: translateX(60px); transition-property: transform; }
.wpel-fx-slide-left.wpel-in-view { transform: translateX(0); }
.wpel-fx-slide-right { transform: translateX(-60px); transition-property: transform; }
.wpel-fx-slide-right.wpel-in-view { transform: translateX(0); }

/* Reveal family (clip-path curtain style) */
.wpel-fx-reveal-left { clip-path: inset(0 100% 0 0); transition-property: clip-path; }
.wpel-fx-reveal-left.wpel-in-view { clip-path: inset(0 0 0 0); }
.wpel-fx-reveal-right { clip-path: inset(0 0 0 100%); transition-property: clip-path; }
.wpel-fx-reveal-right.wpel-in-view { clip-path: inset(0 0 0 0); }
.wpel-fx-reveal-top { clip-path: inset(0 0 100% 0); transition-property: clip-path; }
.wpel-fx-reveal-top.wpel-in-view { clip-path: inset(0 0 0 0); }
.wpel-fx-reveal-bottom { clip-path: inset(100% 0 0 0); transition-property: clip-path; }
.wpel-fx-reveal-bottom.wpel-in-view { clip-path: inset(0 0 0 0); }

/* Rotate / bounce / float / pulse / shake (keyframe based, run once revealed) */
.wpel-fx-rotate-in { opacity: 0; transform: rotate(-12deg) scale(.9); transition-property: opacity, transform; }
.wpel-fx-rotate-in.wpel-in-view { opacity: 1; transform: rotate(0) scale(1); }

.wpel-fx-bounce.wpel-in-view { animation: wpel-kf-bounce var(--wpel-duration) var(--wpel-delay) 1 both; }
.wpel-fx-pulse.wpel-in-view { animation: wpel-kf-pulse var(--wpel-duration) var(--wpel-delay) infinite; }
.wpel-fx-shake.wpel-in-view { animation: wpel-kf-shake var(--wpel-duration) var(--wpel-delay) 1 both; }
.wpel-fx-float.wpel-in-view { animation: wpel-kf-float 3s ease-in-out infinite; }

@keyframes wpel-kf-bounce {
	0% { transform: translateY(0); opacity: 0; }
	40% { opacity: 1; }
	50% { transform: translateY(-20px); }
	70% { transform: translateY(0); }
	85% { transform: translateY(-8px); }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes wpel-kf-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}
@keyframes wpel-kf-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(-6px); }
	80% { transform: translateX(6px); }
}
@keyframes wpel-kf-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

/* ------------------------------------------------------------------ */
/* Split text units */
.wpel-split-unit {
	display: inline-block;
	opacity: 0;
	transform: translateY(.6em);
	transition: opacity var(--wpel-duration, 500ms) var(--wpel-easing, ease) var(--wpel-delay, 0ms),
	            transform var(--wpel-duration, 500ms) var(--wpel-easing, ease) var(--wpel-delay, 0ms);
}
.wpel-motion-el.wpel-in-view .wpel-split-unit { opacity: 1; transform: translateY(0); }
.wpel-split-space { transition: none !important; }

.wpel-typing-cursor {
	display: inline-block;
	width: .06em;
	margin-left: 2px;
	background: currentColor;
	animation: wpel-blink 1s steps(1) infinite;
	height: 1em;
	vertical-align: -0.1em;
}
@keyframes wpel-blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ */
/* Image Reveal */
.wpel-image-reveal { position: relative; overflow: hidden; }
.wpel-image-reveal img { display: block; width: 100%; height: auto; }
.wpel-image-reveal .wpel-reveal-overlay {
	position: absolute; inset: 0;
	background: var(--wpel-overlay-color, rgba(0,0,0,.6));
	opacity: var(--wpel-overlay-opacity, 1);
	transform-origin: left center;
	transition: transform var(--wpel-duration) var(--wpel-easing) var(--wpel-delay);
}
.wpel-image-reveal[data-wpel-direction="right"] .wpel-reveal-overlay { transform-origin: right center; }
.wpel-image-reveal[data-wpel-direction="top"] .wpel-reveal-overlay { transform-origin: center top; }
.wpel-image-reveal[data-wpel-direction="bottom"] .wpel-reveal-overlay { transform-origin: center bottom; }
.wpel-image-reveal.wpel-in-view .wpel-reveal-overlay { transform: scaleX(0); }
.wpel-image-reveal[data-wpel-direction="top"].wpel-in-view .wpel-reveal-overlay,
.wpel-image-reveal[data-wpel-direction="bottom"].wpel-in-view .wpel-reveal-overlay { transform: scaleY(0); }
.wpel-image-reveal[data-wpel-direction="circle"] .wpel-reveal-overlay { clip-path: circle(150% at center); transition-property: clip-path; }
.wpel-image-reveal[data-wpel-direction="circle"].wpel-in-view .wpel-reveal-overlay { clip-path: circle(0% at center); }
.wpel-image-reveal[data-wpel-direction="diagonal"] .wpel-reveal-overlay { clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%); transition-property: clip-path; }
.wpel-image-reveal[data-wpel-direction="diagonal"].wpel-in-view .wpel-reveal-overlay { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }

/* ------------------------------------------------------------------ */
/* Scroll Progress */
.wpel-scroll-progress { position: fixed; z-index: 9999; background: var(--wpel-track-bg, rgba(0,0,0,.08)); }
.wpel-scroll-progress .wpel-progress-bar { height: 100%; width: 0%; background: var(--wpel-progress-color, #6d28d9); transition: width .1s linear; }

/* ------------------------------------------------------------------ */
/* Marquee */
.wpel-marquee { overflow: hidden; display: flex; width: 100%; }
.wpel-marquee-track {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--wpel-gap, 40px);
	animation: wpel-marquee-scroll var(--wpel-marquee-speed, 20s) linear infinite;
	padding-right: var(--wpel-gap, 40px);
}
.wpel-marquee[data-wpel-reverse="yes"] .wpel-marquee-track { animation-direction: reverse; }
.wpel-marquee:hover .wpel-marquee-track[data-wpel-pause="yes"] { animation-play-state: paused; }
.wpel-marquee img { max-height: var(--wpel-marquee-img-height, 60px); width: auto; }
@keyframes wpel-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}
.wpel-marquee.wpel-reduced-motion .wpel-marquee-track { animation: none; }

/* ------------------------------------------------------------------ */
/* Hover Image */
.wpel-hover-image { overflow: hidden; position: relative; display: inline-block; width: 100%; }
.wpel-hover-image img {
	display: block; width: 100%; height: auto;
	transition: transform var(--wpel-hi-duration, 400ms) ease, filter var(--wpel-hi-duration, 400ms) ease;
	filter: grayscale(var(--wpel-hi-grayscale, 0)) blur(var(--wpel-hi-blur, 0)) brightness(var(--wpel-hi-brightness, 1)) saturate(var(--wpel-hi-saturate, 1));
}
.wpel-hover-image[data-wpel-effect~="zoom"]:hover img { transform: scale(var(--wpel-hi-zoom, 1.1)); }
.wpel-hover-image[data-wpel-effect~="lift"] { transition: transform var(--wpel-hi-duration, 400ms) ease, box-shadow var(--wpel-hi-duration, 400ms) ease; }
.wpel-hover-image[data-wpel-effect~="lift"]:hover { transform: translateY(-8px); }
.wpel-hover-image[data-wpel-effect~="tilt"]:hover img { transform: rotate3d(1,1,0,6deg) scale(1.03); }
.wpel-hover-image[data-wpel-effect~="grayscale"]:hover img { filter: grayscale(1); }
.wpel-hover-image[data-wpel-effect~="blur"]:hover img { filter: blur(4px); }
.wpel-hover-image[data-wpel-effect~="rotate"]:hover img { transform: rotate(var(--wpel-hi-rotate, 5deg)); }
.wpel-hover-image .wpel-hover-overlay {
	position: absolute; inset: 0; opacity: 0;
	background: var(--wpel-hi-overlay-color, rgba(0,0,0,.4));
	transition: opacity var(--wpel-hi-duration, 400ms) ease;
}
.wpel-hover-image[data-wpel-effect~="overlay"]:hover .wpel-hover-overlay { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Floating Element */
.wpel-floating-element { display: inline-block; }
.wpel-floating-element[data-wpel-float="yes"] {
	animation: wpel-float-custom var(--wpel-float-speed, 4s) var(--wpel-easing, ease-in-out) infinite;
}
@keyframes wpel-float-custom {
	0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); }
	50% {
		transform: translate(var(--wpel-float-x, 0), var(--wpel-float-y, -20px)) rotate(var(--wpel-float-rotate, 0deg)) scale(var(--wpel-float-scale, 1));
	}
}
.wpel-floating-element.wpel-reduced-motion { animation: none; }

/* ------------------------------------------------------------------ */
/* Animated Button */
.wpel-animated-button { display: inline-flex; }
.wpel-btn {
	position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5em;
	cursor: pointer; border: none; text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.wpel-btn[data-wpel-fx~="lift"]:hover { transform: translateY(-4px); }
.wpel-btn[data-wpel-fx~="pulse"] { animation: wpel-kf-pulse 1.8s ease-in-out infinite; }
.wpel-btn[data-wpel-fx~="glow"]:hover { box-shadow: 0 0 24px var(--wpel-btn-glow, rgba(109,40,217,.6)); }
.wpel-btn .wpel-btn-icon { display: inline-flex; transition: transform .3s ease; }
.wpel-btn[data-wpel-fx~="icon"]:hover .wpel-btn-icon { transform: translateX(4px); }

.wpel-btn[data-wpel-fx~="shine"] { isolation: isolate; }
.wpel-btn[data-wpel-fx~="shine"]::before {
	content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
	transform: skewX(-20deg); transition: left .6s ease; z-index: 1; pointer-events: none;
}
.wpel-btn[data-wpel-fx~="shine"]:hover::before { left: 125%; }

.wpel-btn[data-wpel-fx~="sweep"] { z-index: 0; }
.wpel-btn[data-wpel-fx~="sweep"]::after {
	content: ""; position: absolute; inset: 0; background: var(--wpel-btn-sweep-color, rgba(0,0,0,.15));
	transform: scaleX(0); transform-origin: left; transition: transform .4s ease; z-index: -1;
}
.wpel-btn[data-wpel-fx~="sweep"]:hover::after { transform: scaleX(1); }

.wpel-btn[data-wpel-fx~="border"] {
	background-clip: padding-box;
}
.wpel-btn[data-wpel-fx~="border"]::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
	background: conic-gradient(var(--wpel-btn-border-color, #6d28d9), transparent 40%, var(--wpel-btn-border-color, #6d28d9));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .3s ease, transform 2s linear; animation: wpel-spin 3s linear infinite paused;
}
.wpel-btn[data-wpel-fx~="border"]:hover::before { opacity: 1; animation-play-state: running; }
@keyframes wpel-spin { to { transform: rotate(360deg); } }

.wpel-ripple {
	position: absolute; border-radius: 50%; background: rgba(255,255,255,.55);
	transform: scale(0); animation: wpel-ripple-anim .6s ease-out; pointer-events: none;
}
@keyframes wpel-ripple-anim {
	to { transform: scale(2.5); opacity: 0; }
}

/* Responsive helper - hidden utility classes used by widgets when a
   "disable on mobile/tablet" style control is checked. */
@media (max-width: 767px) {
	.wpel-hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.wpel-hide-tablet { display: none !important; }
}
