/**
 * index.html 页面专用样式
 * 层级关系（从底到顶）：
 *   canvas(z:0) → 遮罩层(z:1) → 文字内容(z:2) → topbar(z:10001)
 * 布局：页面高度 = 100vh(page-content-area) + footer高度
 */

/* ====================
   页面内容占位容器 - 100vh，确保 footer 位于视窗下方
   ==================== */
.page-content-area {
    height: 100vh;
    flex-shrink: 0;
    pointer-events: none;
}

/* ====================
   Shader Park canvas 置于底层
   ==================== */
canvas.my-canvas {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 0;
}

/* ====================
   半透明白色遮罩层 - 填充满屏幕（纯背景层）
   ==================== */
.center-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: none;
}

/* ====================
   中部文字内容容器 - 独立于遮罩层，悬浮在其上方
   ==================== */
.center-content {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding-bottom: 16vh;
	box-sizing: border-box;
	pointer-events: none;
}

.center-content__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.2rem;
	pointer-events: auto;
	padding: 0;
	margin-left: 5vw;
	box-sizing: border-box;
	width: 320px;
	max-width: 90vw;
}

/* ====================
   统一文字颜色和字体 - 宽粗字体风格
   ==================== */
.center-content__title,
.center-content__subtitle,
.center-content__slogan {
	font-family: var(--font-family);
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* ====================
   第1行：大字体标题 "PureThought Lab"
   ==================== */
.center-content__title {
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: var(--line-height-heading);
	margin: 0;
}

/* ====================
   第2行：小字体 "空间智能服务设计" - 右侧对齐 + » 按钮
   ==================== */
.center-content__subtitle-row {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 2px;
	width: 100%;
}

.center-content__subtitle {
	display: block;
	width: 100%;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: normal;
	text-align: justify;
	text-align-last: left;
	line-height: var(--line-height-base);
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	border-radius: 4px;
	transition: color 0.25s ease, background 0.25s ease;
}


/* » 跳转按钮 */
.center-content__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	line-height: 48px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.8rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.center-content__nav-btn:hover {
	color: #ffffff;
	transform: scale(1.35);
	
}

.center-content__nav-btn:active {
	transform: scale(0.80);
	background: rgba(255, 255, 255, 0.25);
}

/* ====================
   第3行："让服务发生在需求之前"
   ==================== */
.center-content__slogan {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: var(--line-height-heading);
	margin: 0;
	text-align: left;
}

/* ====================
   响应式设计
   ==================== */

/* 平板端 */
@media (max-width: 768px) {
	.center-content {
		padding-bottom: 12vh;
	}

	.center-content__inner {
		gap: 0.9rem;
		width: 240px;
	}

	.center-content__title {
		font-size: 1.6rem;
	}

	.center-content__subtitle {
		font-size: 0.75rem;
		letter-spacing: normal;
	}

	.center-content__slogan {
		font-size: 1.1rem;
	}

	.center-content__nav-btn {
		width: 32px;
		height: 32px;
		font-size: 1rem;
	}
}

/* 移动端 */
@media (max-width: 480px) {
	.center-content {
		padding-bottom: 10vh;
	}

	.center-content__inner {
		gap: 0.7rem;
		width: 180px;
	}

	.center-content__title {
		font-size: 1.2rem;
	}

	.center-content__subtitle {
		font-size: 0.65rem;
		letter-spacing: normal;
	}

	.center-content__slogan {
		font-size: 0.85rem;
	}

	.center-content__nav-btn {
		width: 28px;
		height: 28px;
		font-size: 0.9rem;
	}
}