/**
 * Cinematic splash screen — logo option S4 "Hoàng Kim Điện Ảnh".
 * Timeline: content completes at 2.7s, the overlay opens (clip wipe) from
 * 2.7s and is fully gone by 3.15s. Without JS the overlay still removes
 * itself via the forwards-filled exit animation.
 */

.vp-splash {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: grid;
	place-items: center;
	background: radial-gradient(120% 90% at 50% 42%, #2b2f33 0%, #232629 55%, #1a1c1e 100%);
	pointer-events: none;
	overflow: hidden;
	animation: vp-splash-out 0.45s cubic-bezier(0.7, 0, 0.3, 1) 2.7s forwards;
}

@keyframes vp-splash-out {
	0% { clip-path: inset(0 0 0 0); opacity: 1; }
	99.9% { clip-path: inset(0 0 100% 0); opacity: 1; }
	100% { clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; }
}

.vp-splash--gone { display: none; }

.vp-splash__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
}

.vp-splash__svg,
.vp-splash__text,
.vp-splash__bar {
	display: block;
}

.vp-splash__svg {
	width: clamp(120px, 16vw, 168px);
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5));
}

.vp-splash__text {
	text-align: center;
	color: #f5f1e8;
	font-family: var(--vp-font-display, 'Playfair Display', Georgia, serif);
}

.vp-splash__name {
	font-weight: 700;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.06;
	letter-spacing: 0.04em;
	white-space: nowrap;
	opacity: 0;
	animation: vp-sp-text 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.7s both;
}

.vp-splash__name span {
	color: #d4af37;
	background: linear-gradient(120deg, #d4af37 0%, #fff2b2 40%, #d4af37 80%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: vp-sp-gold 1.1s ease-in-out 1.85s both;
}

.vp-splash__tag {
	margin-top: 12px;
	font-family: var(--vp-font-body, 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif);
	font-weight: 600;
	font-size: clamp(9px, 1.2vw, 12px);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #efe9de;
	opacity: 0;
	animation: vp-sp-tag 0.7s cubic-bezier(0.16, 1, 0.3, 1) 2s both;
}

.vp-splash__bar {
	width: clamp(180px, 24vw, 260px);
	height: 2px;
	background: rgba(212, 175, 55, 0.18);
	border-radius: 1px;
	overflow: hidden;
}

.vp-splash__bar i {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #ab8652, #d4af37);
	transform: scaleX(0);
	transform-origin: 0 50%;
	animation: vp-sp-bar 2.65s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Mode 4 choreography (Cinematic Gold & Pearl Reveal), stretched to ~2.7s. */
.vp-sp-ball,
.vp-sp-ring,
.vp-sp-hook-top,
.vp-sp-hook-bot,
.vp-sp-p1,
.vp-sp-p2,
.vp-sp-p3,
.vp-sp-gleam {
	transform-box: view-box;
	transform-origin: 50px 54px;
}

.vp-sp-ball {
	animation: vp-sp-ball 1s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.vp-sp-ring { animation: vp-sp-ring 1.3s ease-out 0.45s both; }
.vp-sp-p1 { animation: vp-sp-plank-top 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
.vp-sp-p3 { animation: vp-sp-plank-bot 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.62s both; }
.vp-sp-p2 { animation: vp-sp-plank-mid 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both; }
.vp-sp-hook-top { animation: vp-sp-hook-top 1s cubic-bezier(0.25, 1, 0.5, 1) 1.1s both; }
.vp-sp-hook-bot { animation: vp-sp-hook-bot 1s cubic-bezier(0.25, 1, 0.5, 1) 1.3s both; }
.vp-sp-gleam { animation: vp-sp-gleam 0.9s ease-out 1.85s both; stroke-dasharray: 100; }

@keyframes vp-sp-ball {
	0% { transform: scale(0.1) translateY(20px); opacity: 0; filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.95)); }
	50% { transform: scale(1.22) translateY(-4px); opacity: 1; filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.7)); }
	72% { filter: drop-shadow(0 0 7px rgba(212, 175, 55, 0.45)); }
	100% { transform: none; opacity: 1; filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.28)); }
}

@keyframes vp-sp-ring {
	0% { r: 6px; opacity: 0.95; stroke-width: 3px; stroke: #d4af37; }
	100% { r: 36px; opacity: 0; stroke-width: 0.5px; stroke: #ab8652; }
}

@keyframes vp-sp-plank-top {
	0% { transform: translate(50px, -40px) scale(0.7) rotate(15deg); opacity: 0; }
	60% { opacity: 1; }
	85% { transform: translate(-1.5px, 1px) scale(1.02) rotate(-0.5deg); }
	100% { transform: none; opacity: 1; }
}

@keyframes vp-sp-plank-mid {
	0% { transform: translate(0, 45px) scale(0.65); opacity: 0; }
	60% { opacity: 1; }
	85% { transform: translate(0, -1.5px) scale(1.02); }
	100% { transform: none; opacity: 1; }
}

@keyframes vp-sp-plank-bot {
	0% { transform: translate(-50px, 40px) scale(0.7) rotate(-15deg); opacity: 0; }
	60% { opacity: 1; }
	85% { transform: translate(1.5px, -1px) scale(1.02) rotate(0.5deg); }
	100% { transform: none; opacity: 1; }
}

@keyframes vp-sp-hook-top {
	0% { transform: translate(-35px, -25px) scale(0.8); opacity: 0; }
	50% { opacity: 1; }
	85% { transform: translate(1px, 1px) scale(1.01); }
	100% { transform: none; opacity: 1; }
}

@keyframes vp-sp-hook-bot {
	0% { transform: translate(35px, 25px) scale(0.8); opacity: 0; }
	50% { opacity: 1; }
	85% { transform: translate(-1px, -1px) scale(1.01); }
	100% { transform: none; opacity: 1; }
}

@keyframes vp-sp-gleam {
	0% { opacity: 0; stroke-dashoffset: 100; }
	20% { opacity: 0.8; }
	60% { opacity: 0.8; }
	100% { opacity: 0; stroke-dashoffset: -100; }
}

@keyframes vp-sp-text {
	0% { opacity: 0; transform: scale(0.92) translateY(12px); letter-spacing: 0.1em; }
	100% { opacity: 1; transform: none; letter-spacing: 0.04em; }
}

@keyframes vp-sp-gold {
	0% { background-position: 100% 0%; }
	100% { background-position: -100% 0%; }
}

@keyframes vp-sp-tag {
	0% { opacity: 0; letter-spacing: 0.48em; transform: translateY(6px); }
	100% { opacity: 0.9; letter-spacing: 0.32em; transform: none; }
}

@keyframes vp-sp-bar {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.vp-splash { display: none; }
}