/* HT Three Motion — lớp hiệu ứng phủ lên giao diện Oxygen hiện có */

.ht-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.ht-canvas.ht-ready { opacity: 1; }

/* Quầng sáng đi theo con trỏ */
.ht-cursor {
	position: fixed;
	left: 0;
	top: 0;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease;
	background: radial-gradient(circle, rgba(99, 102, 241, .13) 0%, rgba(59, 130, 246, .06) 35%, transparent 70%);
	will-change: transform;
}

/* Thanh tiến độ cuộn */
.ht-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 99999;
	pointer-events: none;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, #60a5fa, #818cf8, #c084fc);
	box-shadow: 0 0 12px rgba(129, 140, 248, .8);
}

/* Hiện dần khi cuộn tới */
.ht-reveal {
	opacity: 0;
	transform: translate3d(0, 44px, 0) scale(.98);
	filter: blur(8px);
	transition:
		opacity 1s cubic-bezier(.2, .7, .2, 1) var(--ht-delay, 0ms),
		transform 1s cubic-bezier(.2, .7, .2, 1) var(--ht-delay, 0ms),
		filter 1s cubic-bezier(.2, .7, .2, 1) var(--ht-delay, 0ms);
}
.ht-reveal.ht-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Thẻ bài viết nghiêng 3D + ánh sáng theo chuột */
.ht-tilt {
	position: relative;
	will-change: transform;
	isolation: isolate;
}
.ht-tilt:not(.ht-reveal) {
	transition:
		transform .35s cubic-bezier(.2, .7, .2, 1),
		background-color .3s ease,
		border-color .3s ease,
		box-shadow .5s ease !important;
}
.ht-tilt::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, .16), rgba(167, 139, 250, .06) 30%, transparent 55%);
}
.ht-tilt:hover::before { opacity: 1; }
.ht-tilt:hover {
	border-color: rgba(129, 140, 248, .35) !important;
	box-shadow: 0 30px 80px -30px rgba(99, 102, 241, .45), 0 0 0 1px rgba(129, 140, 248, .08);
}

@media (prefers-reduced-motion: reduce) {
	.ht-reveal { opacity: 1; transform: none; filter: none; transition: none; }
	.ht-cursor { display: none; }
}