/* Micro-interaction animations — theo nhịp độ khảo sát ở docs/DESIGN-AUDIT.md §4
   (transition 150–250ms, animation nhẹ không kéo dài, không cản trở thao tác mua hàng). */

:root {
	--bjj-transition-fast: 150ms;
	--bjj-transition-base: 200ms;
	--bjj-transition-slow: 250ms;
}

/* Fade-in khi section vào viewport (kết hợp với IntersectionObserver ở JS nếu cần sau này) */
@keyframes bjj-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.bjj-fade-in {
	animation: bjj-fade-in 400ms ease-out both;
}

/* Nút "Thêm vào giỏ" nhấp nháy nhẹ khi đang xử lý (loading state) */
@keyframes bjj-pulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}
.bjj-pulse,
.wc-block-components-button.loading,
.single_add_to_cart_button.loading {
	animation: bjj-pulse 1.2s ease-in-out infinite;
	pointer-events: none;
}

/* Skeleton loading cho ảnh sản phẩm chưa tải xong */
@keyframes bjj-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
.bjj-skeleton {
	background: linear-gradient(90deg, #f5f5f8 25%, #ebebf0 37%, #f5f5f8 63%);
	background-size: 400% 100%;
	animation: bjj-shimmer 1.4s ease infinite;
}

/* Hover scale nhẹ — dùng cho thẻ sản phẩm, logo dải đối tác, ảnh danh mục */
.bjj-hover-scale {
	transition: transform var(--bjj-transition-base) ease;
}
.bjj-hover-scale:hover {
	transform: scale(1.05);
}

/* Nút bấm nói chung: transition nhanh, không delay cảm giác chậm */
.wp-block-button__link,
.wc-block-components-button,
button,
input[type="submit"] {
	transition: background-color var(--bjj-transition-base) ease, transform var(--bjj-transition-fast) ease;
}