/* ==========================================================================
   THẦY KHÔI - ANIMATIONS
   Hiệu ứng nhẹ nhàng, tôn trọng prefers-reduced-motion
   ========================================================================== */

@keyframes tk-fade-up {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes tk-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes tk-slide-left {
	from {
		opacity: 0;
		transform: translateX(32px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes tk-float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes tk-pulse-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.45);
	}
	70% {
		box-shadow: 0 0 0 16px rgba(245, 166, 35, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
	}
}

/* --------------------------------------------------------------------------
   Scroll reveal - được kích hoạt bằng JS (class .is-visible)
   -------------------------------------------------------------------------- */
.tk-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s var(--tk-ease), transform 0.7s var(--tk-ease);
	will-change: opacity, transform;
}

.tk-reveal--left {
	transform: translateX(-26px);
}

.tk-reveal--right {
	transform: translateX(26px);
}

.tk-reveal--zoom {
	transform: scale(0.95);
}

.tk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger cho các phần tử con */
.tk-reveal-group > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s var(--tk-ease), transform 0.6s var(--tk-ease);
}

.tk-reveal-group.is-visible > * {
	opacity: 1;
	transform: none;
}

.tk-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.tk-reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.09s; }
.tk-reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.tk-reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.23s; }
.tk-reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.30s; }
.tk-reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.37s; }
.tk-reveal-group.is-visible > *:nth-child(7) { transition-delay: 0.44s; }
.tk-reveal-group.is-visible > *:nth-child(8) { transition-delay: 0.51s; }

/* --------------------------------------------------------------------------
   Hero entrance
   -------------------------------------------------------------------------- */
.tk-hero__content > * {
	opacity: 0;
	animation: tk-fade-up 0.8s var(--tk-ease) forwards;
}

.tk-hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.tk-hero__content > *:nth-child(2) { animation-delay: 0.14s; }
.tk-hero__content > *:nth-child(3) { animation-delay: 0.23s; }
.tk-hero__content > *:nth-child(4) { animation-delay: 0.32s; }
.tk-hero__content > *:nth-child(5) { animation-delay: 0.41s; }
.tk-hero__content > *:nth-child(6) { animation-delay: 0.50s; }

.tk-hero__media {
	opacity: 0;
	animation: tk-slide-left 0.9s var(--tk-ease) 0.25s forwards;
}

.tk-hero__badge {
	animation: tk-float 4.5s ease-in-out infinite;
}

.tk-hero__stats {
	animation: tk-float 5s ease-in-out 0.6s infinite;
}

/* --------------------------------------------------------------------------
   Hover helpers
   -------------------------------------------------------------------------- */
.tk-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	color: var(--tk-accent-dark);
	font-size: 0.9rem;
}

.tk-link-arrow svg,
.tk-link-arrow span[aria-hidden] {
	transition: transform 0.25s var(--tk-ease);
}

.tk-link-arrow:hover svg,
.tk-link-arrow:hover span[aria-hidden] {
	transform: translateX(4px);
}

/* Nút gọi nhanh có viền nhấp nháy nhẹ */
.tk-hotline--pulse .tk-hotline__icon {
	animation: tk-pulse-ring 2.4s ease-out infinite;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.tk-reveal,
	.tk-reveal--left,
	.tk-reveal--right,
	.tk-reveal--zoom,
	.tk-reveal-group > * {
		opacity: 1 !important;
		transform: none !important;
	}

	.tk-hero__content > *,
	.tk-hero__media {
		opacity: 1;
		animation: none;
	}

	.tk-hero__badge,
	.tk-hero__stats {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
	.tk-site-header,
	.tk-mobile-cta,
	.tk-topbar,
	.tk-cta,
	.tk-site-footer,
	.tk-lightbox {
		display: none !important;
	}
}
