/* ============================================================
   intro.css v4 — 开屏动画（滴管滴液视频版）
   序列：视频淡入播放 → 品牌文字浮现 → 滴落闪光 → 整体优雅淡出
   ============================================================ */

html.lab-lock,
html.lab-lock body {
	overflow: hidden;
	height: 100%;
}

#lab-intro {
	position: fixed;
	inset: 0;
	z-index: 9000;
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 60% at 50% 62%, #0a2b44 0%, #061625 55%, #040b13 100%);
	transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
	will-change: opacity, transform, filter;
}

#lab-intro.is-open {
	opacity: 0;
	transform: scale(1.055);
	filter: blur(8px);
	pointer-events: none;
}

/* --- 视频层 --- */
.lab-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity 1.1s ease;
}

#lab-intro.is-in .lab-video {
	opacity: 1;
}

/* --- 暗角遮罩：聚焦画面中心，保证文字可读 --- */
.lab-shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 55%, rgba(3, 10, 20, 0) 30%, rgba(3, 10, 20, 0.42) 72%, rgba(3, 10, 20, 0.78) 100%),
		linear-gradient(180deg, rgba(3, 10, 20, 0.5) 0%, rgba(3, 10, 20, 0) 26%, rgba(3, 10, 20, 0) 62%, rgba(3, 10, 20, 0.66) 100%);
}

/* --- 滴落闪光 --- */
.lab-flash {
	position: absolute;
	left: 50%;
	top: 56%;
	z-index: 3;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(150, 226, 255, 0.22) 34%, transparent 68%);
	opacity: 0;
}

#lab-intro.is-flash .lab-flash {
	animation: labFlash 0.6s ease forwards;
}

@keyframes labFlash {
	0% { opacity: 0; transform: scale(0.5); }
	30% { opacity: 1; transform: scale(1.1); }
	100% { opacity: 0; transform: scale(1.7); }
}

/* --- 品牌文字 --- */
.lab-brand {
	position: absolute;
	left: 50%;
	bottom: 13vh;
	z-index: 4;
	transform: translateX(-50%);
	text-align: center;
	color: #fff;
	pointer-events: none;
	text-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.5s ease;
}

#lab-intro.is-in .lab-brand {
	opacity: 1;
}

#lab-intro.is-open .lab-brand {
	opacity: 0;
}

.lab-brand em {
	display: block;
	font-style: normal;
	font-size: 42px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	text-indent: 0.75em;
	animation: labTrack 2.2s cubic-bezier(0.2, 0.6, 0.25, 1) 0.35s both;
}

@keyframes labTrack {
	0% { letter-spacing: 0.12em; opacity: 0; filter: blur(6px); }
	100% { letter-spacing: 0.75em; opacity: 1; filter: blur(0); }
}

.lab-brand i {
	display: block;
	width: 72px;
	height: 2px;
	margin: 16px auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, #7ee8fa, transparent);
	animation: labLine 1.4s ease 0.9s both;
}

@keyframes labLine {
	0% { width: 0; opacity: 0; }
	100% { width: 72px; opacity: 1; }
}

.lab-brand span {
	display: block;
	margin-top: 14px;
	font-size: 14px;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	color: rgba(160, 232, 250, 0.92);
	animation: labSub 1.6s ease 1.15s both;
}

@keyframes labSub {
	0% { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: none; }
}

/* --- 跳过按钮 --- */
.lab-skip {
	position: absolute;
	right: 28px;
	bottom: 28px;
	z-index: 7;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(6, 16, 28, 0.3);
	color: #fff;
	border-radius: 999px;
	padding: 8px 20px;
	font-size: 14px;
	letter-spacing: 0.14em;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.3s ease, border-color 0.3s ease;
	opacity: 0;
	animation: labSub 0.8s ease 1.4s both;
}

.lab-skip:hover {
	background: #1296db;
	border-color: #1296db;
}

/* --- 移动端 --- */
@media (max-width: 768px) {
	.lab-brand em { font-size: 28px; }
	.lab-brand { bottom: 16vh; }
	.lab-skip { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	#lab-intro { display: none !important; }
}