/**
 * TTPixel Scroll Reveal Animation System
 *
 * Pure GPU-composited animations (transform + opacity only -> 0 CLS, 60fps).
 * Safely gated behind html.ttp-has-scroll-anim to guarantee 0 hidden content
 * if JS or reduced-motion disables animations.
 *
 * @package TTPixel_Child_Theme
 * @version 1.0.0
 */

/* Prevent horizontal scrollbar flash from horizontal slide animations without breaking sticky elements */
body.ttp-scroll-anim-enabled {
	overflow-x: clip;
}

/* Pre-paint hidden state (active ONLY before reveal and while animation hasn't completed) */
html.ttp-has-scroll-anim .ttp-home-builder-section:not(.ttp-sec-hero):not([data-ttp-sec-anim="none"]) .ttp-custom-grid-item:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-builder-section:not(.ttp-sec-hero):not([data-ttp-sec-anim="none"]) .ttp-cat-carousel-wrap .ttp-cat-carousel__slide:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-builder-section:not(.ttp-sec-hero):not([data-ttp-sec-anim="none"]) .ttp-promo-card:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-builder-section:not(.ttp-sec-hero):not([data-ttp-sec-anim="none"]) .ttp-grid-cat-item:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-builder-section:not(.ttp-sec-hero):not([data-ttp-sec-anim="none"]) .ttp-circle-cat-item:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-builder-section:not(.ttp-sec-hero):not([data-ttp-sec-anim="none"]) .ttp-home-cat-header:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-builder-section:not(.ttp-sec-hero):not([data-ttp-sec-anim="none"]) .ttp-cat-section-header:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-builder-section:not(.ttp-sec-hero):not([data-ttp-sec-anim="none"]) .ttp-widget-heading-wrap:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-style-2-wrap .ttp-promo-card:not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-style-2-wrap .ttp-cat-carousel__slide:not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-style-2-wrap .ttp-grid-cat-item:not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-style-2-wrap .ttp-circle-cat-item:not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-style-3-wrap .ttp-promo-card:not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-style-3-wrap .ttp-cat-carousel__slide:not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-style-3-wrap .ttp-grid-cat-item:not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-home-style-3-wrap .ttp-circle-cat-item:not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim ul.products > li.product:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-related-carousel-wrap .ttp-related-carousel__slide:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done),
html.ttp-has-scroll-anim .ttp-scroll-reveal:not([data-ttp-anim="none"]):not(.ttp-revealed):not(.ttp-anim-done) {
	opacity: 0;
}

/* Explicit opt-outs: never hide section-disabled or item-disabled elements */
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] .ttp-custom-grid-item,
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] li.product,
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] .ttp-cat-carousel__slide,
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] .ttp-promo-card,
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] .ttp-grid-cat-item,
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] .ttp-circle-cat-item,
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] .ttp-home-cat-header,
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] .ttp-cat-section-header,
html.ttp-has-scroll-anim [data-ttp-sec-anim="none"] .ttp-widget-heading-wrap,
html.ttp-has-scroll-anim [data-ttp-anim="none"] {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

/* Revealed Animation Triggers */
html.ttp-has-scroll-anim .ttp-revealed:not(.ttp-anim-done):not([data-ttp-anim="none"]) {
	will-change: transform, opacity;
}

html.ttp-has-scroll-anim .ttp-revealed[data-ttp-anim="fade_up"]:not(.ttp-anim-done) {
	animation: ttpAnimFadeUp var(--ttp-anim-dur, 650ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ttp-anim-delay, 0ms) both;
}

html.ttp-has-scroll-anim .ttp-revealed[data-ttp-anim="fade_down"]:not(.ttp-anim-done) {
	animation: ttpAnimFadeDown var(--ttp-anim-dur, 650ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ttp-anim-delay, 0ms) both;
}

html.ttp-has-scroll-anim .ttp-revealed[data-ttp-anim="slide_left"]:not(.ttp-anim-done) {
	animation: ttpAnimSlideLeft var(--ttp-anim-dur, 650ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ttp-anim-delay, 0ms) both;
}

html.ttp-has-scroll-anim .ttp-revealed[data-ttp-anim="slide_right"]:not(.ttp-anim-done) {
	animation: ttpAnimSlideRight var(--ttp-anim-dur, 650ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ttp-anim-delay, 0ms) both;
}

html.ttp-has-scroll-anim .ttp-revealed[data-ttp-anim="zoom_in"]:not(.ttp-anim-done) {
	animation: ttpAnimZoomIn var(--ttp-anim-dur, 650ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ttp-anim-delay, 0ms) both;
}

html.ttp-has-scroll-anim .ttp-revealed[data-ttp-anim="scale_up"]:not(.ttp-anim-done) {
	animation: ttpAnimScaleUp var(--ttp-anim-dur, 650ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ttp-anim-delay, 0ms) both;
}

html.ttp-has-scroll-anim .ttp-revealed[data-ttp-anim="flip_up"]:not(.ttp-anim-done) {
	animation: ttpAnimFlipUp var(--ttp-anim-dur, 700ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ttp-anim-delay, 0ms) both;
	transform-origin: center bottom;
}

html.ttp-has-scroll-anim .ttp-revealed[data-ttp-anim="bounce_in"]:not(.ttp-anim-done) {
	animation: ttpAnimBounceIn var(--ttp-anim-dur, 720ms) cubic-bezier(0.22, 1.28, 0.36, 1) var(--ttp-anim-delay, 0ms) both;
}

/* Completed state: release transform/animation back to CSS so hover effects work cleanly */
.ttp-anim-done {
	animation: none !important;
	opacity: 1 !important;
	will-change: auto;
}

/* GPU-Accelerated Keyframes */
@keyframes ttpAnimFadeUp {
	from {
		opacity: 0;
		transform: translate3d(0, 32px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ttpAnimFadeDown {
	from {
		opacity: 0;
		transform: translate3d(0, -28px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ttpAnimSlideLeft {
	from {
		opacity: 0;
		transform: translate3d(42px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ttpAnimSlideRight {
	from {
		opacity: 0;
		transform: translate3d(-42px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ttpAnimZoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.88, 0.88, 1);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@keyframes ttpAnimScaleUp {
	from {
		opacity: 0;
		transform: translate3d(0, 26px, 0) scale3d(0.92, 0.92, 1);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
}

@keyframes ttpAnimFlipUp {
	from {
		opacity: 0;
		transform: perspective(900px) rotateX(16deg) translate3d(0, 28px, 0);
	}
	to {
		opacity: 1;
		transform: perspective(900px) rotateX(0deg) translate3d(0, 0, 0);
	}
}

@keyframes ttpAnimBounceIn {
	0% {
		opacity: 0;
		transform: translate3d(0, 34px, 0) scale3d(0.94, 0.94, 1);
	}
	65% {
		opacity: 1;
		transform: translate3d(0, -5px, 0) scale3d(1.01, 1.01, 1);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
}

/* Lighter motion distance on mobile viewports */
@media (max-width: 768px) {
	@keyframes ttpAnimFadeUp {
		from { opacity: 0; transform: translate3d(0, 20px, 0); }
		to   { opacity: 1; transform: translate3d(0, 0, 0); }
	}
	@keyframes ttpAnimFadeDown {
		from { opacity: 0; transform: translate3d(0, -18px, 0); }
		to   { opacity: 1; transform: translate3d(0, 0, 0); }
	}
	@keyframes ttpAnimSlideLeft {
		from { opacity: 0; transform: translate3d(24px, 0, 0); }
		to   { opacity: 1; transform: translate3d(0, 0, 0); }
	}
	@keyframes ttpAnimSlideRight {
		from { opacity: 0; transform: translate3d(-24px, 0, 0); }
		to   { opacity: 1; transform: translate3d(0, 0, 0); }
	}
}

/* Accessibility: honor OS Reduced Motion preference */
@media (prefers-reduced-motion: reduce) {
	html.ttp-has-scroll-anim *,
	.ttp-scroll-reveal,
	.ttp-revealed {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}