/* Nghiền Học — hiệu ứng chuyển động (tương tự nghienhoc.com) */

/* 1. Nền gradient chuyển màu chậm */
body.nh-anim-bg {
	background: linear-gradient(-45deg, #060918, #0f1238, #1e1b4b, #060918);
	background-size: 400% 400%;
	animation: nhGradientBG 15s ease infinite;
}
@keyframes nhGradientBG {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* 2. Hạt bay lên */
.nh-particles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.nh-particle {
	position: absolute; bottom: 0; width: 6px; height: 6px; border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6, #8b5cf6);
	opacity: 0; will-change: transform, opacity;
	animation: nhParticleFloat 20s ease-in-out infinite;
}
@keyframes nhParticleFloat {
	0% { transform: translateY(10vh) rotate(0deg); opacity: 0; }
	10% { opacity: .35; }
	90% { opacity: .35; }
	100% { transform: translateY(-105vh) rotate(720deg); opacity: 0; }
}
#brx-header, #brx-content, #brx-footer { position: relative; z-index: 1; }
#brx-header { position: sticky; z-index: 50; }

/* 3. Vòng sáng tỏa quanh nút chính */
.nh-pulse { position: relative; }
.nh-pulse::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	animation: nhPulseRing 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
.nh-pulse-pink::after { animation-name: nhPulseRingPink; }
@keyframes nhPulseRing {
	0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .45); }
	50% { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0); }
}
@keyframes nhPulseRingPink {
	0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, .45); }
	50% { box-shadow: 0 0 0 14px rgba(236, 72, 153, 0); }
}

/* 4. Thẻ ở Hero trôi lên xuống */
.nh-float { animation: nhFloat 5s ease-in-out infinite; will-change: transform; }
.nh-float-2 { animation-delay: -1.7s; animation-duration: 6s; }
.nh-float-3 { animation-delay: -3.2s; animation-duration: 5.5s; }
@keyframes nhFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* 5. Hiện dần khi tải trang */
.nh-js .nh-intro { opacity: 0; transform: translateY(24px); animation: nhIntro .8s cubic-bezier(.22, 1, .36, 1) forwards; }
.nh-js #brx-header.nh-intro { transform: translateY(-20px); }
@keyframes nhIntro { to { opacity: 1; transform: none; } }

/* 6. Hiện dần khi cuộn tới */
.nh-js .nh-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.nh-js .nh-reveal.nh-in { opacity: 1; transform: none; }

/* Người dùng bật "giảm chuyển động" */
@media (prefers-reduced-motion: reduce) {
	body.nh-anim-bg, .nh-particle, .nh-pulse::after, .nh-float, .nh-js .nh-intro { animation: none !important; }
	.nh-particles { display: none; }
	.nh-js .nh-intro, .nh-js .nh-reveal { opacity: 1 !important; transform: none !important; }
}