/* Meridian 开机动画：样式与时间轴。
   时间轴全部写在 --kb-t-* 上（JS 的 setTimeout 在主线程忙时会迟到，退场靠 CSS）。
   ⚠️ 片子长度是 5.2s：改片长要同时改这里的 --kb-t-exit 和 boot.js 的 EXIT_AT，
      改漏了的表现是"字标在画面还没落定时就浮出来"，一句报错都没有。 */

/* 状态键是 html[data-kb="run"] 而**不是**一个 class：镜像站的 React 在水合时会把
   <html> 的 class 整条写成 SSR 里那份（bg-bg-canvas labs_dark），挂在 class 上的
   状态会被抹掉 —— 实测：闸门加了、boot.js 看不到、页面永远不播。data-* 它不碰。
   所以状态**只走这个属性，一个 class 都不碰**（跟站上互写 class 会锁死主线程）。 */
html[data-kb="run"]::before {
	/* 不闪的全部机制：闸门脚本挂上状态的这一瞬间就铺一层底色，
	   在视频第一帧画出来之前，用户看到的是它，不是正在加载的真实页面。 */
	content: '';
	position: fixed;
	inset: 0;
	background: #05070a;
	z-index: 2147483001;
}

html[data-kb="run"] {
	overflow: hidden;
}

.kboot {
	/* 盖过站上自带的一切浮层（这个家族里每个站的浮层都把 z-index 顶到
	   2147483000 那一档，所以取"再高一位"，不是找个看起来很大的数）。 */
	position: fixed;
	inset: 0;
	z-index: 2147483002;
	background: #05070a;
	overflow: hidden;
}
/* 时间轴**从片子真正起播那一刻**开始（kb-go），不是从覆盖层建好那一刻：
   2.6MB 的片子在慢网络上要好几秒，按墙上时钟走的话字标会在片头还没放完时浮出来、
   而且到点就把还在播的片子拆掉。 */
.kboot.kb-go {
	animation: kb-exit 560ms cubic-bezier(0.4, 0, 0.2, 1) var(--kb-t-exit, 5460ms) forwards;
}
.kboot.kb-skip {
	/* 跳过要能**从任何状态**立刻收场（片子在等、在放、还是起不来）——
	   所以它自己带一份退场动画，而不是只改 delay。文件里必须排在 kb-go 之后。 */
	animation: kb-exit 560ms cubic-bezier(0.4, 0, 0.2, 1) 0ms forwards;
}

.kb-film {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 400ms linear;
	transform: scale(1);
	animation: kb-film-zoom 6.1s cubic-bezier(0.32, 0, 0.6, 1) forwards;
}

@keyframes kb-film-zoom {
	from { transform: scale(1.015); }
	to   { transform: scale(1.0); }
}

/* 起播前先给一张成型的画（海报 = 落定那一帧），别让用户对着黑屏等 */
.kboot.kb-wait .kb-film,
.kboot.kb-go .kb-film {
	opacity: 1;
}

.kb-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 86% 54% at 50% 62%, rgba(5, 7, 10, 0.80), rgba(5, 7, 10, 0.25) 58%, rgba(5, 7, 10, 0) 78%),
		linear-gradient(to bottom, rgba(5, 7, 10, 0.10) 30%, rgba(5, 7, 10, 0.52) 100%);
}

.kb-word {
	position: absolute;
	left: 50%;
	top: 59%;
	width: min(42vw, 470px);
	transform: translate(-50%, -50%);
	opacity: 0;
	filter: drop-shadow(0 0 26px rgba(242, 163, 60, 0.34));
}
.kboot.kb-go .kb-word {
	animation: kb-word-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--kb-t-word, 4150ms) forwards;
}

.kb-tagline {
	position: absolute;
	left: 50%;
	top: 68.2%;
	transform: translate(-50%, -50%);
	font: 500 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(233, 238, 247, 0.92);
	text-shadow: 0 1px 3px rgba(5, 7, 10, 0.95), 0 2px 18px rgba(5, 7, 10, 0.95);
	white-space: nowrap;
	opacity: 0;
}
.kboot.kb-go .kb-tagline {
	animation: kb-tag-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--kb-t-tagline, 4560ms) forwards;
}

.kb-skip {
	position: absolute;
	right: 22px;
	bottom: 18px;
	font: 500 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(233, 238, 247, 0.34);
	opacity: 0;
}
.kboot.kb-go .kb-skip,
.kboot.kb-wait .kb-skip {
	animation: kb-skip-in 600ms ease var(--kb-t-skip, 1150ms) forwards;
}

@keyframes kb-word-in {
	from { opacity: 0; transform: translate(-50%, -46%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes kb-tag-in {
	from { opacity: 0; transform: translate(-50%, -42%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes kb-skip-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* 退场：整层淡出并轻微推近，真实的页面在下面已经就位 */
@keyframes kb-exit {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(1.018); }
}

@media (max-width: 720px) {
	.kb-word { width: min(62vw, 360px); top: 58.5%; }
	/* 标语在窄屏上**允许折行**：8868 那句 48 个字符，390px 视口实测溢出 8px（被裁掉）。
	   ⚠️ 光允许折行还不够：元素是 left:50% + translateX(-50%) 定位的，右半边只剩
	   50% 宽，48 个字会折成 3–4 行。窄屏改成**整宽居中**，配一份只动 Y 的入场动画。 */
	.kb-tagline {
		left: 0;
		right: 0;
		box-sizing: border-box;   /* 不加这句 padding 会加在 100% 宽之外（实测右溢 24px） */
		font-size: 11px;
		letter-spacing: 0.26em;
		top: 64%;
		transform: translateY(-50%);
		padding: 0 7vw;
		white-space: normal;
		text-align: center;
		line-height: 1.8;
	}
	.kboot.kb-go .kb-tagline {
		animation: kb-tag-in-m 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--kb-t-tagline, 4560ms) forwards;
	}
}

@keyframes kb-tag-in-m {
	from { opacity: 0; transform: translateY(-42%); }
	to   { opacity: 1; transform: translateY(-50%); }
}