.home-intro {
	position: fixed;
	inset: 0;
	z-index: 9999;

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
	pointer-events: none;
}

html.hd-intro-locked {
	overflow: hidden !important;
	height: 100% !important;
	/* Giữ chỗ scrollbar để tránh layout shift khi intro kết thúc */
	scrollbar-gutter: stable;
}

html.hd-intro-locked body {
	overflow: hidden !important;
	height: 100% !important;
}

.home-intro ._rows {
	position: absolute;
	inset: -1px 0;

	display: flex;
	flex-direction: column;
}

.home-intro ._row {
	flex: 1 1 0;
	width: 100%;
	height: calc(100% + 2px);
	margin-top: -1px;

	background-color: var(--hd-intro-row-color, #000);
	backface-visibility: hidden;
	transform: translateZ(0);
	will-change: transform;

	transition:
		transform 1.25s cubic-bezier(0.76, 0, 0.24, 1),
		background-color 0.9s ease-in-out;
}

.home-intro ._row:first-child {
	margin-top: 0;
}

.home-intro ._logo {
	position: relative;
	z-index: 2;

	width: min(460px, 85vw);

	opacity: 1;
	transform: scale(1);
}

.home-intro ._logo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.home-intro ._logo path,
.home-intro ._logo polygon,
.home-intro ._logo polyline {
	fill: var(--hd-intro-svg-color, #fff);
	fill-opacity: 0;

	stroke: var(--hd-intro-svg-color, #fff);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-intro.is-ready ._logo path,
.home-intro.is-ready ._logo polygon,
.home-intro.is-ready ._logo polyline {
	animation:
		home-intro-logo-draw 1.45s ease-in-out forwards,
		home-intro-logo-fill 0.7s ease-in-out 1.05s forwards;
}

.home-intro.is-leaving ._row {
	background-color: var(--hd-intro-leaving-color, rgba(0, 0, 0, 0.5));
}

.home-intro.is-leaving ._row:nth-child(odd) {
	transform: translateX(-105%);
}

.home-intro.is-leaving ._row:nth-child(even) {
	transform: translateX(105%);
}

.home-intro.is-leaving ._logo {
	opacity: 0;
	transform: scale(0.97);

	transition:
		opacity 1.05s ease-in-out,
		transform 1.15s cubic-bezier(0.76, 0, 0.24, 1);
}

@keyframes home-intro-logo-draw {
	from {
		stroke-dashoffset: var(--path-length);
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes home-intro-logo-fill {
	0% {
		fill-opacity: 0;
		stroke-opacity: 1;
	}

	100% {
		fill-opacity: 1;
		stroke-opacity: 0;
	}
}

section[class^='home-'],
section[class*=' home-'] {
	overflow-x: hidden;
	overflow-x: clip;
}