/**
 * glass.css —— 玻璃拟态（glass morphism）token 与组件
 *
 * 层叠位置：链尾（在 motion.css 之后），只加新类，**不覆盖** components.css
 * 里已有的 .btn / .hero / .section 等类。所有新类都带 nv- 前缀或带
 * --glass 修饰符，避免和既有 BEM 名撞车。
 *
 * 设计语言（与设计原型页一致）：
 *   底：白 → 极浅冰蓝渐变
 *   卡：半透明白 + 20px backdrop blur + 1px 白边 + 淡蓝阴影
 *   字：#1d2327 主 / #5c6670 次
 *   点缀：孔雀绿 #0E7C6B 只做按钮/链接/强调词，香槟金 #C8A96A 只做细线/角标
 *
 * @package NUOWEIEN
 */

:root {
	--nv-glass-bg: rgba(255, 255, 255, 0.55);
	--nv-glass-border: rgba(255, 255, 255, 0.65);
	--nv-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
	--nv-glass-radius: 24px;

	--nv-ice-1: #ffffff;
	--nv-ice-2: #eef3f8;
	--nv-ice-3: #e3ecf3;

	--nv-ink: #1d2327;
	--nv-ink-soft: #5c6670;
	--nv-green: #0e7c6b;
	--nv-gold: #c8a96a;
}

/* =========================================================
 * 1. 玻璃卡片
 * ========================================================= */

.nv-glass-card {
	background: var(--nv-glass-bg);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	backdrop-filter: blur(20px) saturate(140%);
	border: 1px solid var(--nv-glass-border);
	border-radius: var(--nv-glass-radius);
	box-shadow: var(--nv-glass-shadow);
	color: var(--nv-ink);
}

/* 轻量变体：更小的圆角与阴影，用于统计条小卡、角标 */
.nv-glass-card--sm {
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(31, 38, 135, 0.06);
}

/* =========================================================
 * 2. 玻璃按钮
 * ========================================================= */

.nv-glass-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 1.9rem;
	border-radius: 14px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease,
		background-color 0.3s ease;
}

/* 主按钮：孔雀绿实心 */
.nv-glass-btn--primary {
	background: var(--nv-green);
	color: #fff;
	border: 1px solid transparent;
	box-shadow: 0 10px 26px rgba(14, 124, 107, 0.24);
}
.nv-glass-btn--primary:hover,
.nv-glass-btn--primary:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px rgba(14, 124, 107, 0.32);
	color: #fff;
}

/* 副按钮：玻璃 */
.nv-glass-btn--ghost {
	background: var(--nv-glass-bg);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid var(--nv-glass-border);
	color: var(--nv-ink);
}
.nv-glass-btn--ghost:hover,
.nv-glass-btn--ghost:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(31, 38, 135, 0.14);
	color: var(--nv-ink);
}

.nv-glass-btn:focus-visible {
	outline: 2px solid var(--nv-gold);
	outline-offset: 3px;
}

/* =========================================================
 * 3. 玻璃钟罩（纯 CSS，不引图片）
 *
 * 罩体：半透明圆弧 + 顶部椭圆高光 + 内侧 1px 白反光线 + 底部椭圆投影。
 * 3D canvas 挂在 .nv-glass-dome__stage 里，由 scene-rose.js 注入。
 * ========================================================= */

.nv-glass-dome {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
}

.nv-glass-dome__stage {
	position: relative;
	height: clamp(360px, 46vw, 480px);
	border-radius: 50% 50% 18px 18px / 55% 55% 18px 18px;
	overflow: hidden;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.42) 0%,
		rgba(233, 241, 247, 0.3) 62%,
		rgba(214, 229, 238, 0.38) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -30px 60px rgba(120, 150, 170, 0.12),
		0 26px 60px rgba(31, 38, 135, 0.1);
}

/* 罩内 1px 白色反光线：贴着罩体内壁走一圈 */
.nv-glass-dome__stage::after {
	content: "";
	position: absolute;
	inset: 12px;
	border-radius: 50% 50% 14px 14px / 52% 52% 14px 14px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

/* 顶部椭圆高光 */
.nv-glass-dome__shine,
.nv-glass-dome__shine2 {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(2px);
	z-index: 2;
}
.nv-glass-dome__shine {
	left: 14%;
	top: 7%;
	width: 38%;
	height: 15%;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}
.nv-glass-dome__shine2 {
	right: 11%;
	top: 14%;
	width: 12%;
	height: 26%;
	transform: rotate(18deg);
	filter: blur(3px);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}

/* 底座 + 椭圆投影 */
.nv-glass-dome__base {
	position: relative;
	z-index: 2;
	margin: -6px auto 0;
	width: 78%;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(200, 214, 224, 0.75));
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 12px 26px rgba(31, 38, 135, 0.12);
}
.nv-glass-dome__shadow {
	margin: 10px auto 0;
	width: 62%;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(31, 38, 135, 0.14) 0%, rgba(31, 38, 135, 0) 72%);
	filter: blur(2px);
}

/* 罩旁短标注（如 "Drag to rotate"）+ 香槟金角标 */
.nv-glass-dome__note {
	position: absolute;
	right: -6px;
	top: 18%;
	z-index: 4;
	padding: 0.42rem 0.95rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--nv-green);
	box-shadow: 0 10px 24px rgba(14, 124, 107, 0.28);
	white-space: nowrap;
}

/* 3D 挂载点：canvas 由 JS 注入，CSS 只负责撑满。
 *
 * 注意这里**不能**沿用 .hero__scene：pages.css 里它是 `position:absolute; inset:0;
 * z-index:-1; pointer-events:none` 的全屏背景层 —— 塞进罩子里会跑版，
 * 而 pointer-events:none 会直接废掉罩内的拖拽旋转。所以另起一个类，
 * 只保留 data-scene-id 作为 JS 的挂载钩子。
 */
.nv-glass-dome__scene {
	position: absolute;
	inset: 0;
	z-index: 1;
	touch-action: pan-y; /* 触屏保留页面纵向滚动，不劫持 */
}
.nv-glass-dome__scene canvas,
.nv-glass-dome__stage canvas {
	width: 100%;
	height: 100%;
	display: block;
}

/* WebGL 没起来 / tier 太低时罩子只剩玻璃底，不留空洞也不留黑块 */
.nv-glass-dome__stage:empty {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.5) 0%,
		rgba(233, 241, 247, 0.36) 60%,
		rgba(214, 229, 238, 0.42) 100%
	);
}

/* =========================================================
 * 4. 滚动淡入
 *
 * 注意：**不要**用在 H1 上。Hero 的 LCP 是 H1，加了 opacity:0 的初始态
 * 会让首屏文字在 JS 跑起来之前是不可见的（hero.php 文件头约束 1）。
 * ========================================================= */

.nv-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.nv-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.nv-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.nv-glass-btn {
		transition: none;
	}
	.nv-glass-btn--primary:hover,
	.nv-glass-btn--ghost:hover {
		transform: none;
	}
}

/* =========================================================
 * 5. Hero 玻璃版式（只加修饰类，不动 .hero 本体的既有规则）
 * ========================================================= */

.hero.hero--glass {
	background: linear-gradient(160deg, var(--nv-ice-1) 0%, var(--nv-ice-2) 55%, var(--nv-ice-3) 100%);
	overflow: hidden;
}

/* 标题：细体超大字距，强调词孔雀绿 600
 *
 * 必须显式清掉 pages.css 里 .hero__title em 的 `background-clip:text; color:transparent`：
 * 不清的话那条渐变文字规则会把颜色抠成透明，孔雀绿就不见了。
 */
.hero--glass .hero__title {
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.1;
}
.hero--glass .hero__title em {
	font-style: normal;
	font-weight: 600;
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: var(--nv-green);
	color: var(--nv-green);
}

.hero--glass .hero__lede {
	color: var(--nv-ink-soft);
	max-width: 34rem;
	line-height: 1.7;
}

/* 统计条改成玻璃小卡 */
.hero--glass .hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.hero--glass .hero__stat {
	background: var(--nv-glass-bg);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	backdrop-filter: blur(20px) saturate(140%);
	border: 1px solid var(--nv-glass-border);
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(31, 38, 135, 0.06);
	padding: 12px 18px;
	min-width: 92px;
	position: relative;
	padding-inline-start: 18px;
}
/* pages.css 里 .hero__stat::before 是一条渐变竖线，玻璃小卡上不要它 */
.hero--glass .hero__stat::before {
	display: none;
}
.hero--glass .hero__stat b {
	display: block;
	font-size: 1.55rem;
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--nv-ink);
}
.hero--glass .hero__stat span {
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nv-ink-soft);
}

/* 右侧视觉面板：玻璃版卸掉 pages.css 的 4:3 卡片外框，交给 .nv-glass-dome 撑版 */
.hero__panel--dome {
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}
/* 徽章从绝对定位改成正常流（玻璃版下面是证据带，不能压上去） */
.hero__panel--dome .hero__panel-badge {
	position: static;
	margin: 14px auto 0;
	inline-size: fit-content;
}
/* pages.css 给 .hero__panel img 加了 mix-blend-mode:multiply，实拍小样上会发脏 */
.nv-proof img,
.hero__panel--dome .hero__panel-img {
	mix-blend-mode: normal;
	opacity: 1;
}
.hero__panel--dome .hero__panel-img {
	margin: 18px auto 0;
	inline-size: min(280px, 70%);
	block-size: auto;
	border-radius: 14px;
}

/* 卖点行 */
.nv-points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nv-points li {
	position: relative;
	padding-inline-start: 18px;
	font-size: 0.94rem;
	color: var(--nv-ink-soft);
	line-height: 1.6;
}
.nv-points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.62em;
	width: 8px;
	height: 1px;
	background: var(--nv-gold);
}

/* 罩下的实拍小样（原 hero mosaic 保留输出，压成一条证据带） */
.nv-proof {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.nv-proof img {
	width: 86px;
	height: 58px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--nv-glass-border);
	background: var(--nv-glass-bg);
}

/* 手机：单列，罩子在文案之后 */
@media (max-width: 860px) {
	.hero--glass .hero__grid {
		gap: 34px;
	}
	.nv-glass-dome__note {
		right: 8px;
	}
}