/**
 * Page-load and Scroll-reveal animations.
 *
 * 1. Scroll Reveal (opacity 0.14 -> 1, translateY 28px -> 0, blur 2px -> 0 in 520ms)
 * 2. Loading Sweep (diagonal gradient sweep while in is-scroll-loading)
 * 3. Skeleton Shimmer (horizontal shimmer for async content placeholders)
 *
 * @package Vitratecom
 */

/* ==========================================================================
   Hiệu ứng 1 — Scroll Reveal
   ========================================================================== */
.has-scroll-reveal {
	opacity: 0.14;
	transform: translateY(28px);
	filter: blur(2px);
	transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
	            filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform, filter;
}

.has-scroll-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0px);
	will-change: auto;
}

/* ==========================================================================
   Hiệu ứng 2 — Loading Sweep (Vệt sáng chéo chạy lướt mỗi ~1s)
   ========================================================================== */
.is-scroll-loading {
	position: relative;
	overflow: hidden;
}

.is-scroll-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 25%,
		rgba(255, 255, 255, 0.42) 50%,
		rgba(255, 255, 255, 0) 75%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 200% 100%;
	animation: vitratecomLoadingSweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes vitratecomLoadingSweep {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   Hiệu ứng 3 — Skeleton Shimmer
   ========================================================================== */
.vitratecom-skeleton {
	min-width: 0;
	pointer-events: none;
}

.vitratecom-skeleton-shimmer,
.vitratecom-skeleton__media,
.vitratecom-skeleton__meta,
.vitratecom-skeleton__line {
	display: block;
	background: linear-gradient(
		90deg,
		#e5e9ed 0%,
		#f8fafc 40%,
		#e5e9ed 80%
	);
	background-size: 200% 100%;
	animation: vitratecomSkeletonShimmer 1.25s ease-in-out infinite;
}

@keyframes vitratecomSkeletonShimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   Accessibility: Prefers Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.has-scroll-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
	.is-scroll-loading::after {
		display: none !important;
		animation: none !important;
	}
	.vitratecom-skeleton-shimmer,
	.vitratecom-skeleton__media,
	.vitratecom-skeleton__meta,
	.vitratecom-skeleton__line {
		animation: none !important;
		background: #e5e9ed !important;
	}
}