/**
 * Amitry Product & Category Slider Pro - Hover Effects & Entry Animations
 */

/* ═══════════════════════════════════════
   Card Hover Effects
   ═══════════════════════════════════════ */

/* Lift */
.wcsp-hover-lift .wcsp-card {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
.wcsp-hover-lift .wcsp-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Tilt */
.wcsp-hover-tilt .wcsp-card {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	transform-style: preserve-3d;
}
.wcsp-hover-tilt .wcsp-card:hover {
	transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) scale(1.02);
}

/* Shine */
.wcsp-hover-shine .wcsp-img-wrap {
	position: relative;
	overflow: hidden;
}
.wcsp-hover-shine .wcsp-img-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255, 255, 255, 0.3) 50%,
		transparent 100%
	);
	transform: skewX(-20deg);
	transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	z-index: 2;
}
.wcsp-hover-shine .wcsp-card:hover .wcsp-img-wrap::after {
	left: 125%;
}

/* Color Reveal */
.wcsp-hover-color-reveal .wcsp-img-wrap img {
	filter: grayscale(100%);
	transition: filter 0.4s ease;
}
.wcsp-hover-color-reveal .wcsp-card:hover .wcsp-img-wrap img {
	filter: grayscale(0%);
}

/* Image Swap (uses data-image-swap attribute if present; otherwise a subtle scale) */
.wcsp-hover-image-swap .wcsp-img-wrap {
	position: relative;
}
.wcsp-hover-image-swap .wcsp-img-wrap img {
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.wcsp-hover-image-swap .wcsp-card:hover .wcsp-img-wrap img {
	opacity: 0.85;
	transform: scale(1.04);
}

/* ═══════════════════════════════════════
   Entry Animations (applied when slider becomes visible)
   ═══════════════════════════════════════ */

.wcsp-entry-fade-in .wcsp-slide,
.wcsp-entry-slide-in .wcsp-slide,
.wcsp-entry-zoom-in .wcsp-slide,
.wcsp-entry-stagger .wcsp-slide {
	opacity: 0;
}

/* Triggered via JS: wrapper adds class "wcsp-entry-visible" once in viewport */

.wcsp-entry-fade-in.wcsp-entry-visible .wcsp-slide {
	animation: wcsp-fade-in-anim 0.6s ease forwards;
}

.wcsp-entry-slide-in.wcsp-entry-visible .wcsp-slide {
	animation: wcsp-slide-in-anim 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wcsp-entry-zoom-in.wcsp-entry-visible .wcsp-slide {
	animation: wcsp-zoom-in-anim 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide {
	animation: wcsp-fade-in-anim 0.6s ease forwards;
}
.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide:nth-child(1) { animation-delay: 0ms; }
.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide:nth-child(2) { animation-delay: 120ms; }
.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide:nth-child(3) { animation-delay: 240ms; }
.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide:nth-child(4) { animation-delay: 360ms; }
.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide:nth-child(5) { animation-delay: 480ms; }
.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide:nth-child(6) { animation-delay: 600ms; }
.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide:nth-child(7) { animation-delay: 720ms; }
.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide:nth-child(8) { animation-delay: 840ms; }

@keyframes wcsp-fade-in-anim {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wcsp-slide-in-anim {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes wcsp-zoom-in-anim {
	from { opacity: 0; transform: scale(0.88); }
	to   { opacity: 1; transform: scale(1); }
}

/* Accessibility: disable all effects for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
	.wcsp-hover-lift .wcsp-card,
	.wcsp-hover-tilt .wcsp-card,
	.wcsp-hover-shine .wcsp-img-wrap::after,
	.wcsp-hover-color-reveal .wcsp-img-wrap img,
	.wcsp-hover-image-swap .wcsp-img-wrap img {
		transition: none;
	}
	.wcsp-entry-fade-in.wcsp-entry-visible .wcsp-slide,
	.wcsp-entry-slide-in.wcsp-entry-visible .wcsp-slide,
	.wcsp-entry-zoom-in.wcsp-entry-visible .wcsp-slide,
	.wcsp-entry-stagger.wcsp-entry-visible .wcsp-slide {
		animation: none;
		opacity: 1;
	}
}
