/* =========================================
   SOUKPRO MOTION EFFECTS
   Pure CSS scroll-driven animations.
   Progressive enhancement: browsers without
   animation-timeline support see static content.
   ========================================= */

/* --- Background layers (structural, always applied) --- */
.sp-hero__bg,
.sp-slider__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
}

.sp-hero__bg {
	border-radius: inherit;
}

.sp-slider__slide::before,
.sp-slider__slide > .sp-slider__bg {
	pointer-events: none;
}

.sp-slider__slide::before {
	z-index: 1;
}

.sp-slider__content {
	position: relative;
	z-index: 2;
}

@supports (animation-timeline: view()) {

	/* --- Section reveal on scroll --- */
	.sp-section,
	.sp-hero,
	.sp-banner {
		animation: sp-reveal 0.7s linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 60%;
	}

	/* Stagger children of card grids */
	.sp-products__grid > *,
	.sp-products__grid .sp-product-card,
	.sp-suppliers__grid > *,
	.sp-categories__grid > *,
	.sp-testimonials__grid > *,
	.sp-trust__grid > *,
	.sp-blog__grid > *,
	.sp-info-cards__grid > * {
		animation: sp-reveal 0.6s linear both;
		animation-timeline: view();
		animation-range: entry 12% entry 55%;
	}

	/* --- Ken Burns on hero/slider background layers --- */
	.sp-hero__bg,
	.sp-slider__bg {
		animation: sp-kenburns 9s linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 100%;
	}

	/* --- Section headers fade up --- */
	.sp-section__header {
		animation: sp-reveal 0.6s linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 50%;
	}
}

@keyframes sp-reveal {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sp-kenburns {
	from {
		opacity: 0.85;
		transform: scale(1);
	}
	to {
		opacity: 1;
		transform: scale(1.08);
	}
}

/* --- Hover lift (compositor-only) --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.sp-btn {
		transition: transform var(--sp-transition-fast);
	}
	.sp-btn:hover {
		transform: translateY(-2px);
	}
	.sp-product-card,
	.sp-supplier-card,
	.sp-category-card,
	.sp-blog-card,
	.sp-testimonial-card {
		transition: transform var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
	}
	.sp-product-card:hover,
	.sp-supplier-card:hover,
	.sp-category-card:hover,
	.sp-blog-card:hover,
	.sp-testimonial-card:hover {
		transform: translateY(-3px);
	}
}

/* --- Accessibility: kill all motion on request --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}