/* ==========================================================
   home-overlay.css
   CSS riêng cho màn hình Apple Hero (index.html only)
   ========================================================== */

/* --- Lớp rèm phủ toàn màn hình --- */
#home-landing {
	position: fixed; top: 0; left: 0;
	width: 100vw; height: 100vh;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	z-index: 10000; text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Nền: overlay texture + ảnh nền chính */
	background-color: #1f1815;
	background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url("images/overlay.png"), url("../../pictures/home/background_1.jpg");
	background-position: top left, top left, center center;
	background-repeat: repeat, repeat, no-repeat;
	background-size: auto, auto, cover;

	/* Curtain Reveal: mặc định bay lên ngoài màn hình */
	transform: translateY(-100vh);
	pointer-events: none;
	transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Khi body có class is-home: rèm hạ xuống, hiện màn hình chào */
body.is-home #home-landing {
	transform: translateY(0);
	pointer-events: auto;
}

/* Khi ở Home: ẩn nội dung Portfolio bên dưới */
#header, #main, #footer {
	transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) !important;
}
body.is-home #header { opacity: 0; transform: translateY(50px); pointer-events: none; }
body.is-home #main   { opacity: 0; transform: translateY(50px); pointer-events: none; }
body.is-home #footer { opacity: 0; pointer-events: none; }
body.is-home         { overflow: hidden; }

/* --- Avatar tròn trên màn hình chào --- */
.home-avatar-wrapper {
	width: 120px; height: 120px;
	border-radius: 50%;
	margin: 0 auto 1.5em auto;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.home-avatar {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 15%; /* Tiêu điểm vào mặt người */
	transform: scale(2.2);       /* Zoom cận mặt */
	display: block;
}

/* --- Typography --- */
.home-title {
	font-size: 5em; line-height: 1.1; font-weight: 700;
	letter-spacing: -0.04em; color: #ffffff; margin-bottom: 0.1em;
	text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.home-subtitle {
	font-size: 1.4em; line-height: 1.5;
	color: rgba(255, 255, 255, 0.92); /* Trắng đục, tương phản rõ hơn #a1a1a6 */
	font-weight: 400; max-width: 800px;
	margin: 0 auto 2.5em auto; letter-spacing: -0.01em;
	text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* --- Nút CTA: Liquid Glass Pill --- */
.big-project-btn {
	background: rgba(255,255,255,0.08);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border: 1px solid rgba(255,255,255,0.15) !important;
	color: #fff !important; font-size: 1.1em;
	padding: 1.2em 3em !important; border-radius: 50px;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	font-weight: 500; letter-spacing: 1px;
	display: inline-flex; align-items: center; gap: 12px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
.big-project-btn i { font-size: 1.1em; transition: transform 0.4s ease; }
.big-project-btn:hover {
	background: rgba(255,255,255,0.15) !important;
	border-color: rgba(255,255,255,0.3) !important;
	transform: scale(1.02);
	box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}
.big-project-btn:hover i { transform: translateX(4px); }

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
	.home-title { 
		font-size: min(3em, 12vw); 
		white-space: nowrap;
	}
	.home-subtitle { 
		font-size: min(1.1em, 3.8vw); 
		padding: 0; 
		margin-bottom: 2em; 
		white-space: nowrap;
	}
	.big-project-btn { font-size: 1em; padding: 1em 2em !important; }
}

@media (max-width: 480px) {
	.home-title { 
		font-size: min(2.5em, 12vw); 
	}
	.home-subtitle { 
		font-size: min(1em, 4vw); /* approx 12-15px depending on phone width */
	}
	.home-avatar-wrapper { width: 100px; height: 100px; }
}

/* --- Intro Preloader --- */
#intro-preloader {
	position: fixed;
	inset: 0;
	background-color: #151412;
	background-image:
		linear-gradient(rgba(0,0,0,0.68), rgba(0,0,0,0.78)),
		url("images/overlay.png"),
		url("../../pictures/home/background_1.jpg");
	background-position: top left, top left, center center;
	background-repeat: repeat, repeat, no-repeat;
	background-size: auto, auto, cover;
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: preloaderFadeOut 1.05s ease-in-out forwards;
	animation-delay: 2.35s;
	overflow: hidden;
}

#intro-preloader::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 52% 44%, rgba(255,255,255,0.10), transparent 22%),
		linear-gradient(115deg, rgba(255,255,255,0.05), transparent 42%, rgba(0,0,0,0.28));
	pointer-events: none;
}

.glitch-wrapper {
	position: relative;
	display: inline-block;
	padding: 0.2em 0.08em;
	perspective: 900px;
}

.glitch-text {
	position: relative;
	font-size: clamp(3rem, 8.5vw, 7.6rem);
	line-height: 1.05;
	font-weight: 900;
	color: #f7f7f3;
	font-family: 'Impact', 'Arial Black', sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-shadow:
		1px 1px 0 #d8d8d2,
		2px 2px 0 #bdbdb7,
		3px 3px 0 #979790,
		4px 4px 0 #6f6f69,
		8px 14px 24px rgba(0,0,0,0.68),
		0 0 34px rgba(255,255,255,0.12);
	transform-style: preserve-3d;
	animation:
		preloaderTextIn 0.78s cubic-bezier(0.16, 1, 0.3, 1) both,
		preloaderTextHold 2.15s ease-out both;
}

@media (max-width: 768px) {
	.glitch-text {
		font-size: clamp(2.2rem, 14vw, 4.8rem);
	}
}

.glitch-text::before,
.glitch-text::after {
	display: none;
}

@keyframes preloaderTextIn {
	0% { opacity: 0; transform: rotateX(18deg) translateY(24px) scale(0.92); filter: blur(4px); }
	100% { opacity: 1; transform: rotateX(0deg) translateY(0) scale(1); filter: blur(0); }
}

@keyframes preloaderTextHold {
	0%, 72% { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 0.82; transform: translateY(-4px) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
	#intro-preloader,
	.glitch-text {
		animation: none;
	}
	#intro-preloader {
		display: none;
	}
}

@keyframes preloaderFadeOut {
	0% { opacity: 1; visibility: visible; }
	100% { opacity: 0; visibility: hidden; }
}