/**
 * Site-wide animations – hero entrance + scroll reveal
 */

/* ══════════════════════════════════════
   HERO BANNER – entrance (keyframes)
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
	/* Ẩn nội dung trước khi JS thêm .is-ready */
	.cuuho-hero:not(.is-ready) .cuuho-hero__overlay {
		opacity: 0 !important;
	}
	.cuuho-hero:not(.is-ready) .cuuho-hero__main > *,
	.cuuho-hero:not(.is-ready) .cuuho-hero__card {
		opacity: 0 !important;
		visibility: hidden;
	}

	/* Ken Burns – zoom nền */
	.cuuho-hero::before {
		content: '';
		position: absolute;
		inset: -8%;
		z-index: 0;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		transform: scale(1.14);
		will-change: transform;
	}

	.cuuho-hero.is-ready::before {
		animation: cuuho-hero-bg-zoom 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.cuuho-hero.is-ready .cuuho-hero__overlay {
		animation: cuuho-hero-overlay-in 1s ease forwards;
	}

	/* Shimmer quét ngang */
	.cuuho-hero__overlay::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			105deg,
			transparent 38%,
			rgba(255, 255, 255, 0.12) 50%,
			transparent 62%
		);
		transform: translateX(-120%);
		pointer-events: none;
	}

	.cuuho-hero.is-ready .cuuho-hero__overlay::after {
		animation: cuuho-hero-shimmer 1.4s ease 0.55s forwards;
	}

	.cuuho-hero.is-ready .cuuho-hero__pattern {
		animation: cuuho-hero-pattern-in 1.2s ease 0.25s forwards;
		opacity: 0;
	}

	.cuuho-hero.is-ready .cuuho-hero__main > * {
		visibility: visible;
		animation: cuuho-hero-slide-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.cuuho-hero.is-ready .cuuho-hero__main > *:nth-child(1) { animation-delay: 0.15s; }
	.cuuho-hero.is-ready .cuuho-hero__main > *:nth-child(2) { animation-delay: 0.32s; }
	.cuuho-hero.is-ready .cuuho-hero__main > *:nth-child(3) { animation-delay: 0.48s; }
	.cuuho-hero.is-ready .cuuho-hero__main > *:nth-child(4) { animation-delay: 0.64s; }
	.cuuho-hero.is-ready .cuuho-hero__main > *:nth-child(5) { animation-delay: 0.8s; }
	.cuuho-hero.is-ready .cuuho-hero__main > *:nth-child(6) { animation-delay: 0.96s; }

	.cuuho-hero.is-ready .cuuho-hero__card {
		visibility: visible;
		animation:
			cuuho-hero-slide-right 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both,
			cuuho-hero-float 4.5s ease-in-out 1.8s infinite;
	}

	/* Orb sáng góc phải */
	.cuuho-hero::after {
		content: '';
		position: absolute;
		top: 8%;
		right: -8%;
		width: min(480px, 60vw);
		height: min(480px, 60vw);
		border-radius: 50%;
		background: radial-gradient(circle, rgba(245, 166, 35, 0.28) 0%, transparent 65%);
		pointer-events: none;
		z-index: 2;
		opacity: 0;
	}

	.cuuho-hero.is-ready::after {
		animation:
			cuuho-hero-glow 1.1s ease 0.45s forwards,
			cuuho-hero-glow-pulse 5s ease-in-out 1.8s infinite;
	}

	@keyframes cuuho-hero-bg-zoom {
		from { transform: scale(1.14); }
		to { transform: scale(1); }
	}

	@keyframes cuuho-hero-overlay-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes cuuho-hero-shimmer {
		from { transform: translateX(-120%); }
		to { transform: translateX(120%); }
	}

	@keyframes cuuho-hero-pattern-in {
		from { opacity: 0; transform: scale(1.08); }
		to { opacity: 0.04; transform: scale(1); }
	}

	@keyframes cuuho-hero-slide-up {
		from {
			opacity: 0;
			transform: translate3d(0, 72px, 0);
			filter: blur(10px);
		}
		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			filter: blur(0);
		}
	}

	@keyframes cuuho-hero-slide-right {
		from {
			opacity: 0;
			transform: translate3d(80px, 32px, 0) scale(0.88) rotate(4deg);
		}
		to {
			opacity: 1;
			transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
		}
	}

	@keyframes cuuho-hero-float {
		0%, 100% { transform: translate3d(0, 0, 0); }
		50% { transform: translate3d(0, -12px, 0); }
	}

	@keyframes cuuho-hero-glow {
		from { opacity: 0; transform: scale(0.5); }
		to { opacity: 1; transform: scale(1); }
	}

	@keyframes cuuho-hero-glow-pulse {
		0%, 100% { opacity: 0.75; transform: scale(1); }
		50% { opacity: 1; transform: scale(1.1); }
	}

	/* Badge + nút CTA */
	.hero-badge__dot {
		animation: cuuho-pulse-dot 1.6s ease-in-out infinite;
	}

	@keyframes cuuho-pulse-dot {
		0%, 100% {
			opacity: 1;
			transform: scale(1);
			box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.65);
		}
		50% {
			opacity: 0.65;
			transform: scale(1.35);
			box-shadow: 0 0 0 8px rgba(245, 166, 35, 0);
		}
	}

	.cuuho-hero.is-ready .hero-badge {
		animation: cuuho-badge-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
	}

	@keyframes cuuho-badge-pop {
		from { transform: scale(0.6); opacity: 0; }
		to { transform: scale(1); opacity: 1; }
	}

	.cuuho-hero.is-ready .cuuho-btn--primary {
		animation: cuuho-hero-btn-glow 2.2s ease-in-out 1.1s infinite;
	}

	@keyframes cuuho-hero-btn-glow {
		0%, 100% { box-shadow: 0 4px 18px rgba(245, 166, 35, 0.4); transform: scale(1); }
		50% { box-shadow: 0 8px 32px rgba(245, 166, 35, 0.65); transform: scale(1.03); }
	}

	.cuuho-hero__card-status {
		animation: cuuho-status-blink 2s ease-in-out infinite;
	}

	@keyframes cuuho-status-blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.45; }
	}

	.cuuho-hero.is-ready .cuuho-hero__hotline {
		animation: cuuho-hotline-pop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
	}

	@keyframes cuuho-hotline-pop {
		from { opacity: 0; transform: scale(0.85); letter-spacing: -0.05em; }
		to { opacity: 1; transform: scale(1); letter-spacing: normal; }
	}

	/* ══════════════════════════════════════
	   PAGE HERO – Trang Dịch vụ & trang con
	   ══════════════════════════════════════ */
	.cuuho-svc-page-hero:not(.is-ready) .cuuho-svc-page-hero__overlay {
		opacity: 0 !important;
	}
	.cuuho-svc-page-hero:not(.is-ready) .cuuho-svc-page-hero__inner > * {
		opacity: 0 !important;
		visibility: hidden;
	}

	.cuuho-svc-page-hero::before {
		content: '';
		position: absolute;
		inset: -8%;
		z-index: 0;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		transform: scale(1.12);
		will-change: transform;
	}

	.cuuho-svc-page-hero.is-ready::before {
		animation: cuuho-hero-bg-zoom 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__overlay {
		animation: cuuho-hero-overlay-in 1s ease forwards;
	}

	.cuuho-svc-page-hero__overlay::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			105deg,
			transparent 38%,
			rgba(255, 255, 255, 0.1) 50%,
			transparent 62%
		);
		transform: translateX(-120%);
		pointer-events: none;
	}

	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__overlay::after {
		animation: cuuho-hero-shimmer 1.4s ease 0.5s forwards;
	}

	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__pattern {
		animation: cuuho-hero-pattern-in 1.2s ease 0.2s forwards;
		opacity: 0;
	}

	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > * {
		visibility: visible;
		animation: cuuho-hero-slide-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > *:nth-child(1) { animation-delay: 0.12s; }
	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > *:nth-child(2) { animation-delay: 0.26s; }
	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > *:nth-child(3) { animation-delay: 0.4s; }
	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > *:nth-child(4) { animation-delay: 0.54s; }
	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > *:nth-child(5) { animation-delay: 0.68s; }
	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > *:nth-child(6) { animation-delay: 0.82s; }
	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > *:nth-child(7) { animation-delay: 0.96s; }

	.cuuho-svc-page-hero::after {
		content: '';
		position: absolute;
		top: 5%;
		right: -10%;
		width: min(400px, 50vw);
		height: min(400px, 50vw);
		border-radius: 50%;
		background: radial-gradient(circle, rgba(245, 166, 35, 0.22) 0%, transparent 68%);
		pointer-events: none;
		z-index: 2;
		opacity: 0;
	}

	.cuuho-svc-page-hero.is-ready::after {
		animation:
			cuuho-hero-glow 1.1s ease 0.4s forwards,
			cuuho-hero-glow-pulse 5s ease-in-out 1.6s infinite;
	}

	.cuuho-svc-page-hero.is-ready .cuuho-btn--primary {
		animation: cuuho-hero-btn-glow 2.2s ease-in-out 1s infinite;
	}

	/* Trang Giới thiệu – cùng hiệu ứng hero */
	.cuuho-about-page-hero:not(.is-ready) .cuuho-about-page-hero__overlay {
		opacity: 0 !important;
	}
	.cuuho-about-page-hero:not(.is-ready) .cuuho-about-page-hero__inner > * {
		opacity: 0 !important;
		visibility: hidden;
	}

	.cuuho-about-page-hero::before {
		content: '';
		position: absolute;
		inset: -8%;
		z-index: 0;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		transform: scale(1.12);
		will-change: transform;
	}

	.cuuho-about-page-hero.is-ready::before {
		animation: cuuho-hero-bg-zoom 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__overlay {
		animation: cuuho-hero-overlay-in 1s ease forwards;
	}

	.cuuho-about-page-hero__overlay::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			105deg,
			transparent 38%,
			rgba(255, 255, 255, 0.1) 50%,
			transparent 62%
		);
		transform: translateX(-120%);
		pointer-events: none;
	}

	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__overlay::after {
		animation: cuuho-hero-shimmer 1.4s ease 0.5s forwards;
	}

	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__pattern {
		animation: cuuho-hero-pattern-in 1.2s ease 0.2s forwards;
		opacity: 0;
	}

	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__inner > * {
		visibility: visible;
		animation: cuuho-hero-slide-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__inner > *:nth-child(1) { animation-delay: 0.12s; }
	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__inner > *:nth-child(2) { animation-delay: 0.26s; }
	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__inner > *:nth-child(3) { animation-delay: 0.4s; }
	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__inner > *:nth-child(4) { animation-delay: 0.54s; }
	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__inner > *:nth-child(5) { animation-delay: 0.68s; }
	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__inner > *:nth-child(6) { animation-delay: 0.82s; }
	.cuuho-about-page-hero.is-ready .cuuho-about-page-hero__inner > *:nth-child(7) { animation-delay: 0.96s; }

	.cuuho-about-page-hero.is-ready .cuuho-btn--primary {
		animation: cuuho-hero-btn-glow 2.2s ease-in-out 1s infinite;
	}

	/* Trang Liên hệ – hero animation */
	.cuuho-contact-page-hero:not(.is-ready) .cuuho-contact-page-hero__overlay {
		opacity: 0 !important;
	}
	.cuuho-contact-page-hero:not(.is-ready) .cuuho-contact-page-hero__inner > * {
		opacity: 0 !important;
		visibility: hidden;
	}
	.cuuho-contact-page-hero::before {
		content: '';
		position: absolute;
		inset: -8%;
		z-index: 0;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		transform: scale(1.12);
	}
	.cuuho-contact-page-hero.is-ready::before {
		animation: cuuho-hero-bg-zoom 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__overlay {
		animation: cuuho-hero-overlay-in 1s ease forwards;
	}
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__pattern {
		animation: cuuho-hero-pattern-in 1.2s ease 0.2s forwards;
		opacity: 0;
	}
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__inner > * {
		visibility: visible;
		animation: cuuho-hero-slide-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__inner > *:nth-child(1) { animation-delay: 0.12s; }
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__inner > *:nth-child(2) { animation-delay: 0.26s; }
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__inner > *:nth-child(3) { animation-delay: 0.4s; }
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__inner > *:nth-child(4) { animation-delay: 0.54s; }
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__inner > *:nth-child(5) { animation-delay: 0.68s; }
	.cuuho-contact-page-hero.is-ready .cuuho-contact-page-hero__hotline {
		animation: cuuho-hero-btn-glow 2.2s ease-in-out 1s infinite;
	}

	/* Trang Bảng giá – hero animation */
	.cuuho-pricing-page-hero:not(.is-ready) .cuuho-pricing-page-hero__overlay {
		opacity: 0 !important;
	}
	.cuuho-pricing-page-hero:not(.is-ready) .cuuho-pricing-page-hero__inner > * {
		opacity: 0 !important;
		visibility: hidden;
	}
	.cuuho-pricing-page-hero::before {
		content: '';
		position: absolute;
		inset: -8%;
		z-index: 0;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		transform: scale(1.12);
	}
	.cuuho-pricing-page-hero.is-ready::before {
		animation: cuuho-hero-bg-zoom 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.cuuho-pricing-page-hero.is-ready .cuuho-pricing-page-hero__overlay {
		animation: cuuho-hero-overlay-in 1s ease forwards;
	}
	.cuuho-pricing-page-hero.is-ready .cuuho-pricing-page-hero__pattern {
		animation: cuuho-hero-pattern-in 1.2s ease 0.2s forwards;
		opacity: 0;
	}
	.cuuho-pricing-page-hero.is-ready .cuuho-pricing-page-hero__inner > * {
		visibility: visible;
		animation: cuuho-hero-slide-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.cuuho-pricing-page-hero.is-ready .cuuho-pricing-page-hero__inner > *:nth-child(1) { animation-delay: 0.12s; }
	.cuuho-pricing-page-hero.is-ready .cuuho-pricing-page-hero__inner > *:nth-child(2) { animation-delay: 0.26s; }
	.cuuho-pricing-page-hero.is-ready .cuuho-pricing-page-hero__inner > *:nth-child(3) { animation-delay: 0.4s; }
	.cuuho-pricing-page-hero.is-ready .cuuho-pricing-page-hero__inner > *:nth-child(4) { animation-delay: 0.54s; }
	.cuuho-pricing-page-hero.is-ready .cuuho-pricing-page-hero__inner > *:nth-child(5) { animation-delay: 0.68s; }
	.cuuho-pricing-page-hero.is-ready .cuuho-btn--primary {
		animation: cuuho-hero-btn-glow 2.2s ease-in-out 1s infinite;
	}

	/* ── Scroll reveal ── */
	.cuuho-reveal {
		opacity: 0;
		transform: translate3d(0, 56px, 0);
		transition:
			opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: var(--reveal-delay, 0ms);
	}

	.cuuho-reveal--fade {
		transform: translate3d(0, 28px, 0);
	}

	.cuuho-reveal--scale {
		transform: scale(0.88);
	}

	.cuuho-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	.cuuho-svc-card,
	.cuuho-process__card,
	.why-item,
	.cuuho-reviews__card,
	.cuuho-stats .stat-box,
	.cuuho-svc-page-stats__item,
	.lh-card,
	.lh-project-single__img-item {
		transition:
			transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.lh-card.is-visible:hover,
	.lh-project-single__img-item.is-visible:hover {
		transform: translateY(-6px);
	}

	.cuuho-svc-card__media img {
		transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cuuho-process__connector svg {
		animation: cuuho-nudge-right 2.2s ease-in-out infinite;
	}

	@keyframes cuuho-nudge-right {
		0%, 100% { transform: translateX(0); opacity: 0.7; }
		50% { transform: translateX(5px); opacity: 1; }
	}

	.cuuho-cta {
		background-size: 200% 200%;
		animation: cuuho-cta-bg 10s ease infinite;
	}

	@keyframes cuuho-cta-bg {
		0%, 100% { background-position: 0% 50%; }
		50% { background-position: 100% 50%; }
	}

	.cuuho-section-head.is-visible .cuuho-label {
		animation: cuuho-label-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	@keyframes cuuho-label-pop {
		from { transform: scale(0.75); opacity: 0; }
		to { transform: scale(1); opacity: 1; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.cuuho-hero::before,
	.cuuho-hero::after,
	.cuuho-svc-page-hero::before,
	.cuuho-svc-page-hero::after {
		display: none;
	}
	.cuuho-hero.is-ready .cuuho-hero__main > *,
	.cuuho-hero.is-ready .cuuho-hero__card,
	.cuuho-svc-page-hero.is-ready .cuuho-svc-page-hero__inner > *,
	.cuuho-reveal {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		animation: none !important;
	}
}

.cuuho-about__content .about-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cuuho-amber);
	background: var(--cuuho-amber-soft);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.cuuho-area__icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cuuho-amber);
}

.cuuho-stats .stat-box.is-visible:hover {
	transform: translateY(-4px);
}

.cuuho-stats .stat-num {
	transition: color 0.3s ease;
}

.cuuho-stats .stat-box:hover .stat-num {
	color: var(--cuuho-amber);
}