:root{
	--nal-motion-distance:18px;
	--nal-motion-duration:.72s;
	--nal-motion-ease:cubic-bezier(.22,.75,.2,1);
	--nal-motion-card-lift:-7px;
}

body.nal-motion-standard{
	--nal-motion-distance:28px;
	--nal-motion-duration:.86s;
	--nal-motion-card-lift:-10px;
}

body.nal-motion-ready .nal-reveal{
	opacity:0;
	translate:0 var(--nal-motion-distance);
	scale:1;
	transition:
		opacity var(--nal-motion-duration) var(--nal-motion-ease),
		translate var(--nal-motion-duration) var(--nal-motion-ease),
		scale var(--nal-motion-duration) var(--nal-motion-ease);
	will-change:opacity,translate,scale;
}

body.nal-motion-ready .nal-reveal.nal-reveal-left{
	translate:calc(var(--nal-motion-distance) * -1) 0;
}

body.nal-motion-ready .nal-reveal.nal-reveal-right{
	translate:var(--nal-motion-distance) 0;
}

body.nal-motion-ready .nal-reveal.nal-reveal-scale{
	translate:0 0;
	scale:.975;
}

body.nal-motion-ready .nal-reveal.is-visible{
	opacity:1;
	translate:0 0;
	scale:1;
}

/*
 * Quan trọng:
 * Không dùng thuộc tính transform cho reveal.
 * Theme dùng transform: translateX(-50%) để căn giữa alignwide/alignfull.
 * Dùng CSS individual properties (translate/scale) giúp animation không
 * ghi đè phép căn giữa và không tạo tràn ngang trên desktop.
 */
.entry-content .alignwide.nal-reveal,
.entry-content .alignwide.nal-reveal.is-visible,
.entry-content .alignfull.nal-reveal,
.entry-content .alignfull.nal-reveal.is-visible{
	/* Giữ nguyên transform do theme quy định. */
}

/* Ngăn thanh cuộn ngang do sai số làm tròn viewport nhưng không che nội dung. */
html,
body{
	overflow-x:clip;
}

/* Header thu gọn */
.site-header,
.topbar{
	transition:
		background-color .3s ease,
		box-shadow .3s ease,
		backdrop-filter .3s ease,
		height .3s ease,
		transform .3s ease;
}

body.nal-page-scrolled .site-header,
body.nal-page-scrolled .topbar{
	background:color-mix(in srgb,var(--nal-bg,#f3efe9) 92%,transparent);
	-webkit-backdrop-filter:blur(18px);
	backdrop-filter:blur(18px);
	box-shadow:0 10px 34px rgba(18,18,18,.07);
}

/* Card và ảnh */
.nal-motion-hover,
.project-card,
.course-card,
.trend-item,
.gallery figure,
.wp-block-image,
.wp-block-cover{
	transform:translateZ(0);
	transition:
		transform .42s var(--nal-motion-ease),
		box-shadow .42s var(--nal-motion-ease),
		border-color .3s ease;
}

@media (hover:hover) and (pointer:fine){
	.nal-motion-hover:hover,
	.project-card:hover,
	.course-card:hover,
	.trend-item:hover{
		transform:translateY(var(--nal-motion-card-lift));
		box-shadow:0 24px 60px rgba(18,18,18,.11);
	}

	.project-card img,
	.course-card img,
	.gallery figure img,
	.wp-block-image img,
	.hero-media img,
	.detail-media img,
	.split-media img{
		transition:
			transform .8s cubic-bezier(.2,.7,.2,1),
			filter .5s ease;
	}

	.project-card:hover img,
	.course-card:hover img,
	.gallery figure:hover img,
	.wp-block-image:hover img{
		transform:scale(1.035);
	}

	.btn,
	.wp-block-button__link,
	button[type="submit"],
	input[type="submit"]{
		transition:
			transform .24s ease,
			background-color .24s ease,
			border-color .24s ease,
			color .24s ease,
			box-shadow .24s ease;
	}

	.btn:hover,
	.wp-block-button__link:hover,
	button[type="submit"]:hover,
	input[type="submit"]:hover{
		transform:translateY(-2px);
		box-shadow:0 12px 28px rgba(18,18,18,.12);
	}
}

/* Hero parallax */
.nal-parallax-media{
	overflow:hidden;
}

.nal-parallax-media img{
	transform:translate3d(0,var(--nal-parallax-y,0px),0) scale(1.045);
	will-change:transform;
}

/* Underline menu */
.primary-navigation a,
.menu a{
	transition:color .25s ease,opacity .25s ease;
}

/* Link arrow movement */
a .arrow,
.btn .arrow,
.project-card .arrow{
	display:inline-block;
	transition:transform .25s ease;
}

a:hover .arrow,
.btn:hover .arrow{
	transform:translate(3px,-3px);
}

/* Mobile */
@media(max-width:900px){
	:root{
		--nal-motion-distance:12px;
		--nal-motion-card-lift:-3px;
	}

	.nal-parallax-media img{
		transform:none!important;
	}
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
	html{
		scroll-behavior:auto!important;
	}
	*,
	*::before,
	*::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
		scroll-behavior:auto!important;
	}
	body.nal-motion-ready .nal-reveal{
		opacity:1!important;
		translate:0 0!important;
		scale:1!important;
	}
	.nal-parallax-media img{
		transform:none!important;
	}
}