/* Midgard 开场序列 —— RhineLabUI boot sequence 的纯 CSS 复刻。
   主体替换为本站 logo；原片 22s / 25fps 的时间轴压缩为 6.4s。
   所有运动由 @keyframes + steps() 驱动，JS 只负责触发、重播、跳过与收尾。 */

.boot {
	--boot-duration: 6.4s;
	--boot-ink: #ededf0;
	--boot-dim: #6b6b75;
	--boot-line: #242429;
	--boot-gold: #c5a16b;
	/* 白场由暖白降为柔和纸白，保持不透明以免透出底下内容混成灰幕 */
	--boot-paper: #e4e1db;
	--boot-flash-soft: 0.3;
	--boot-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	color: var(--boot-ink);
	font-family: var(--boot-mono);
	font-size: 13px;
	line-height: 1.6;
}

.boot.is-playing {
	display: block;
}

body.boot-active {
	overflow: hidden;
}

.boot__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #0c0c0f;
}

/* 细扫描线，模拟 HUD 底纹 */
.boot__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		transparent 0 3px,
		rgba(237, 237, 240, 0.016) 3px 4px
	);
}

/* ---------- 四角取景框 ---------- */
.boot__frame {
	position: absolute;
	inset: clamp(16px, 3.2vw, 42px);
	pointer-events: none;
}

.boot__corner {
	position: absolute;
	width: 22px;
	height: 22px;
	border: 1px solid var(--boot-line);
	opacity: 0;
}

.boot__corner--tl {
	top: 0;
	left: 0;
	border-right: 0;
	border-bottom: 0;
}
.boot__corner--tr {
	top: 0;
	right: 0;
	border-left: 0;
	border-bottom: 0;
}
.boot__corner--bl {
	bottom: 0;
	left: 0;
	border-right: 0;
	border-top: 0;
}
.boot__corner--br {
	bottom: 0;
	right: 0;
	border-left: 0;
	border-top: 0;
}

.boot.is-playing .boot__corner {
	animation: boot-corner 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.boot.is-playing .boot__corner--tr { animation-delay: 0.16s; }
.boot.is-playing .boot__corner--bl { animation-delay: 0.22s; }
.boot.is-playing .boot__corner--br { animation-delay: 0.28s; }

@keyframes boot-corner {
	from { opacity: 0; transform: scale(1.8); }
	to { opacity: 1; transform: scale(1); }
}

/* ---------- 左上角品牌三行（错开出现，先加速后减速） ---------- */
.boot__brand {
	position: absolute;
	left: clamp(28px, 7vw, 96px);
	top: clamp(64px, 13vh, 132px);
	line-height: 1.15;
	pointer-events: none;
}

.boot__brand-line {
	display: block;
	opacity: 0;
	white-space: nowrap;
}

.boot__brand-line--1 {
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 700;
	letter-spacing: 0.09em;
}

.boot.is-playing .boot__brand-line {
	animation: boot-brand 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.boot.is-playing .boot__brand-line--1 { animation-delay: 2.05s; }

@keyframes boot-brand {
	from { opacity: 0; transform: translateX(-26px); letter-spacing: 0.6em; }
	to { opacity: 1; transform: translateX(0); }
}

/* ---------- 中央标志：logo + 双环 + 反向内弧 + 节点 ---------- */
.boot__center {
	position: absolute;
	left: 50%;
	top: 48%;
	width: min(340px, 72vw);
	height: min(340px, 72vw);
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
}

.boot__mark {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}

.boot__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(237, 237, 240, 0.34);
	opacity: 0;
}

.boot__ring--outer {
	inset: 0;
	border-left-color: transparent;
	border-right-color: transparent;
}

.boot__ring--inner {
	inset: 17%;
	border: 1px dashed rgba(237, 237, 240, 0.2);
	border-top-color: transparent;
	border-bottom-color: transparent;
}

.boot__arc {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	border: 1px solid transparent;
	opacity: 0;
}

.boot__arc--left {
	border-left-color: var(--boot-gold);
	border-bottom-color: var(--boot-gold);
}
.boot__arc--right {
	inset: 25%;
	border-right-color: var(--boot-ink);
	border-top-color: var(--boot-ink);
}

.boot__node {
	position: absolute;
	left: 50%;
	top: 0;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border-radius: 50%;
	background: var(--boot-gold);
	opacity: 0;
}

.boot__logo {
	position: relative;
	width: 56%;
	height: 56%;
	object-fit: contain;
	clip-path: inset(0 0 100% 0);
	filter: blur(9px);
	transform: scale(1.16);
	opacity: 0;
}

/* 环与标志共用一条 4.75s 轨道：收拢 → 常转 → 四帧缩放跳变 → 缩小失焦 */
.boot.is-playing .boot__ring--outer {
	animation: boot-ring-outer 4.75s linear 1.3s both;
}
.boot.is-playing .boot__ring--inner {
	animation: boot-ring-inner 4.75s linear 1.3s both;
}
.boot.is-playing .boot__logo {
	animation: boot-logo 4.75s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}

@keyframes boot-ring-outer {
	0%   { opacity: 0; transform: scale(2.3) rotate(0deg); }
	4%   { opacity: 0.55; }
	22%  { opacity: 0.55; transform: scale(1) rotate(70deg); }
	72%  { opacity: 0.55; transform: scale(1) rotate(300deg); }
	76%  { opacity: 0.32; transform: scale(1.94) rotate(318deg); filter: blur(2.2px); }
	78%  { opacity: 0.55; transform: scale(1) rotate(328deg); filter: blur(0); }
	92%  { opacity: 0.55; transform: scale(1) rotate(360deg); }
	100% { opacity: 0; transform: scale(0.6) rotate(380deg); filter: blur(8px); }
}

@keyframes boot-ring-inner {
	0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
	22%  { opacity: 0.42; transform: scale(1) rotate(-80deg); }
	72%  { opacity: 0.42; transform: scale(1) rotate(-320deg); }
	76%  { opacity: 0.18; transform: scale(1.94) rotate(-338deg); }
	92%  { opacity: 0.42; transform: scale(1) rotate(-370deg); }
	100% { opacity: 0; transform: scale(0.6) rotate(-390deg); }
}

/* 每一帧都显式写出 clip-path：缺失时浏览器会合成使用元素初始值的隐式
   100% 关键帧，导致揭示完成后 logo 又被重新裁掉。 */
@keyframes boot-logo {
	0%   { clip-path: inset(0 0 100% 0); filter: blur(9px); transform: scale(1.16); opacity: 0; }
	3%   { opacity: 0.9; }
	26%  { clip-path: inset(0 0 0 0); filter: blur(0); transform: scale(1); opacity: 1; }
	74%  { clip-path: inset(0 0 0 0); filter: blur(0); transform: scale(1); opacity: 1; }
	76%  { clip-path: inset(0 0 0 0); filter: blur(2.2px); transform: scale(1.94); opacity: 0.32; }
	78%  { clip-path: inset(0 0 0 0); filter: blur(0); transform: scale(1); opacity: 1; }
	90%  { clip-path: inset(0 0 0 0); filter: blur(0); transform: scale(1); opacity: 1; }
	100% { clip-path: inset(0 0 0 0); filter: blur(8px); transform: scale(0.54); opacity: 0; }
}

/* 授权段：短弧反向旋转并减速、中心节点四帧跳变 */
.boot.is-playing .boot__arc--left {
	animation: boot-arc-left 0.75s cubic-bezier(0.16, 1, 0.3, 1) 5s both;
}
.boot.is-playing .boot__arc--right {
	animation: boot-arc-right 0.75s cubic-bezier(0.16, 1, 0.3, 1) 5s both;
}
.boot.is-playing .boot__node {
	animation: boot-node 0.75s steps(1, end) 5s both;
}

@keyframes boot-arc-left {
	0%   { opacity: 0; transform: rotate(-70deg) scale(1.5); }
	20%  { opacity: 0.85; }
	100% { opacity: 0; transform: rotate(332deg) scale(1); }
}
@keyframes boot-arc-right {
	0%   { opacity: 0; transform: rotate(70deg) scale(1.5); }
	20%  { opacity: 0.6; }
	100% { opacity: 0; transform: rotate(339deg) scale(1); }
}
/* 0% 必须隐藏：animation-fill-mode: both 会在 5s 的 delay 期间就应用 0% 帧 */
@keyframes boot-node {
	0%        { opacity: 0; transform: scale(3.2); }
	1%, 18%   { opacity: 1; transform: scale(3.2); }
	19%, 42%  { opacity: 0.3; transform: scale(1); }
	43%, 62%  { opacity: 1; transform: scale(2.1); }
	63%, 84%  { opacity: 0.12; transform: scale(0.8); }
	85%, 100% { opacity: 0; transform: scale(1); }
}

/* ---------- 中央逐字状态行 ---------- */
.boot__copy {
	position: absolute;
	left: 12px;
	right: 12px;
	top: calc(48% + min(190px, 25vh));
	height: 2em;
	text-align: center;
	pointer-events: none;
}

.boot__slot {
	position: absolute;
	inset: 0;
	margin: 0;
	font-size: clamp(10px, 1.35vw, 14px);
	letter-spacing: 0.16em;
	white-space: nowrap;
	opacity: 0;
}

.boot__type {
	display: inline-block;
	clip-path: inset(0 100% 0 0);
	white-space: nowrap;
	font-variant-ligatures: none;
}

.boot.is-playing .boot__slot {
	animation: boot-slot 1s steps(1, end) both;
}
.boot.is-playing .boot__slot--access   { animation-duration: 1.3s;  animation-delay: 0.2s; }
.boot.is-playing .boot__slot--granted  { animation-duration: 0.78s; animation-delay: 4.98s; }

@keyframes boot-slot {
	0%        { opacity: 0; }
	2%, 90%   { opacity: 1; }
	91%, 100% { opacity: 0; }
}

/* 从固定左端逐字输入，字符数写进 steps() 保留 25fps 的离散感 */
.boot.is-playing .boot__slot--access .boot__type { animation: boot-type 0.95s steps(25, end) 0.24s both; }

@keyframes boot-type {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

/* 授权提示：字距由 40px 逐步收拢到 0（对应 scanTracking 轨迹） */
.boot.is-playing .boot__slot--granted .boot__type {
	animation: boot-tracking 0.58s cubic-bezier(0.16, 1, 0.3, 1) 5s both;
}
@keyframes boot-tracking {
	from { clip-path: inset(0 100% 0 0); letter-spacing: 40px; opacity: 0; }
	to   { clip-path: inset(0 0 0 0); letter-spacing: 2px; opacity: 1; }
}

/* ---------- 底部 HUD ---------- */
.boot__hud {
	position: absolute;
	left: clamp(28px, 7vw, 96px);
	right: clamp(28px, 7vw, 96px);
	bottom: clamp(28px, 6vh, 62px);
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	opacity: 0;
}

.boot.is-playing .boot__hud {
	animation: boot-hud 5.85s steps(1, end) 0.2s both;
}
@keyframes boot-hud {
	0%        { opacity: 0; }
	2%, 94%   { opacity: 1; }
	95%, 100% { opacity: 0; }
}

.boot__progress {
	position: relative;
	display: block;
	width: clamp(90px, 18vw, 190px);
	height: 1px;
	background: var(--boot-line);
	overflow: hidden;
}
.boot__progress::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--boot-gold);
}
.boot.is-playing .boot__progress::after {
	animation: boot-progress var(--boot-duration) linear both;
}
@keyframes boot-progress {
	from { width: 0; }
	to   { width: 100%; }
}

/* ---------- 跳过 ---------- */
.boot__skip {
	position: absolute;
	right: clamp(28px, 7vw, 96px);
	top: clamp(64px, 13vh, 132px);
	appearance: none;
	background: none;
	border: 0;
	padding: 4px 0;
	color: var(--boot-dim);
	font: inherit;
	font-size: 10px;
	letter-spacing: 0.2em;
	cursor: pointer;
	opacity: 0;
}
.boot__skip:hover,
.boot__skip:focus-visible {
	color: var(--boot-ink);
}
.boot__skip:focus-visible {
	outline: 1px solid var(--boot-dim);
	outline-offset: 4px;
}
.boot.is-playing .boot__skip {
	animation: boot-skip 5.9s steps(1, end) 0.2s both;
}
@keyframes boot-skip {
	0%        { opacity: 0; }
	2%, 92%   { opacity: 1; }
	93%, 100% { opacity: 0; }
}

/* ---------- 白场（已减弱）：一次短起场 + 一次轻闪 + 短定格 ----------
   原先 4 段纯白闪切合并为 2 段；起场由 90ms 缩到 58ms、定格由 256ms 缩到 192ms；
   白场色值调柔且保持不透明，过渡闪切降到 0.3；仍用 steps(1, end) 硬切。 */
.boot__flash {
	position: absolute;
	inset: 0;
	background: var(--boot-paper);
	opacity: 0;
	pointer-events: none;
}
.boot.is-playing .boot__flash {
	animation: boot-flash var(--boot-duration) steps(1, end) both;
}
@keyframes boot-flash {
	0%, 0.9%      { opacity: 1; }                        /* 起场：短白场 */
	1%, 89.7%     { opacity: 0; }
	89.8%, 90.4%  { opacity: var(--boot-flash-soft); }  /* 单次轻闪 */
	90.5%, 96.9%  { opacity: 0; }                       /* logo 缩小失焦可见 */
	97%, 100%     { opacity: 1; }                        /* 短定格，遮挡跳转 */
}

/* ---------- 小屏与减少动态效果 ---------- */
@media (max-width: 600px) {
	.boot__brand { top: 76px; }
	.boot__skip { top: 76px; }
	.boot__copy { top: calc(46% + min(140px, 20vh)); }
}

@media (prefers-reduced-motion: reduce) {
	.boot.is-playing { display: none; }
}