/*
	gemxin.com — 阿鑫个人主页
	基于 Aerial by HTML5 UP (html5up.net | @ajlkn) 深度定制
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

	设计调性：蓝天 + 纯白文字，清爽开阔、克制精致

	阅读顺序：
	  1. Reset / Basic        基础复位与排版
	  2. Accessibility        焦点环、降低动效
	  3. Icon / Preload       字体图标、首屏防闪烁
	  4. Layout               wrapper / overlay / main / header / footer
	  5. Modal                弹窗骨架 + 公众号二维码弹窗
	  6. Modal (mail)         邮箱弹窗与一键复制按钮
	  7. Responsive           断点收敛（宽屏 / 常规 / 移动端 / 窄屏）

	约定：现代浏览器(Chrome 88+ / Safari 15.4+ / Firefox 89+)，
	      已移除 -moz-* 与无必要的 -webkit-* 前缀；backdrop-filter 保留双写。
	      Google Fonts 由 index.html 的 <link> 引入，避免 @import 串行阻塞渲染。
*/

/* ═══════════════════════════════  1. Reset  ═══════════════════════════════ */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

body { -webkit-text-size-adjust: none; }

mark { background-color: transparent; color: inherit; }

input::-moz-focus-inner { border: 0; padding: 0; }

img { max-width: 100%; height: auto; display: block; }

/* ═══════════════════════════════  Basic  ═══════════════════════════════ */

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
	color: #fff;
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	font-size: 15pt;
	font-weight: 300;
	letter-spacing: 0.005em;
	line-height: 1.75em;

	/* 纯净蓝天渐变（无云层，保持清爽） */
	background-color: #348cb2;
	background-image: linear-gradient(180deg, #2a7ea9 0%, #3a95c0 38%, #68b9e0 70%, #a7d8f1 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;

	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a {
	transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	border-bottom: dotted 1px;
	color: inherit;
	outline: 0;
	text-decoration: none;
}
a:hover { border-color: transparent; }

/* ═══════════════════════════  2. Accessibility  ═══════════════════════════ */

/* 键盘可达性：统一可见焦点环 */
:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 4px;
	border-radius: 2px;
}

/* 尊重系统「降低动态效果」设置：动画与过渡立即结束，且不留初始透明态 */
@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	#wrapper, #overlay, #header, #header nav li { opacity: 1 !important; }
}

/* ════════════════════════════  3. Icon  ════════════════════════════ */

.icon {
	text-decoration: none;
	position: relative;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}

.icon > .label { display: none; }
.icon.solid:before { font-weight: 900; }
.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }

/* Preload 防闪烁：JS 就绪后移除 body.is-preload（见 assets/js/main.js），
   元素随即按各自动画出现；无 JS 时由 noscript.css 强制显示。 */
.is-preload #header,
.is-preload #header nav li { opacity: 0; }

/* ════════════════════════════  4. Layout  ════════════════════════════ */

#wrapper {
	animation: wrapper 1.1s forwards;
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

@keyframes wrapper {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 装饰层，两层叠加：细颗粒纹理 + 三道斜线光带；另加一层上下暗角，
   让顶部标题与底部版权在白字背景下更清晰。

   它是 fixed 定位 + background-attachment: fixed 的大面积矢量背景（overlay.svg 里还有
   0.5px 的细线），鼠标交互引发的重绘会把它整体重新栅格化，边缘/细线容易瞬间变强或出现
   接缝。这里沿用 #header 与 nav li 的既有写法（translate3d + backface-visibility）把它钉
   成独立图层，重绘时复用已有栅格而不再重新采样。
   注：translate3d(0,0,0) 会让它自成包含块，但本层尺寸就等于视口，fixed 背景停在同一位置；
   已在 1699x901@1.5 视口逐像素比对，改动前后渲染完全一致（0 像素差异）。 */
#overlay {
	animation: overlay 1.4s 0.5s forwards;
	backface-visibility: hidden;
	background-attachment: fixed, fixed, fixed;
	background-image:
		linear-gradient(180deg, rgba(16,52,74,0.26) 0%, rgba(16,52,74,0) 30%, rgba(16,52,74,0) 62%, rgba(16,52,74,0.32) 100%),
		url("images/overlay-pattern.png"),
		url("images/overlay.svg");
	background-position: center center, top left, center center;
	background-repeat: no-repeat, repeat, no-repeat;
	background-size: cover, auto, cover;
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transform: translate3d(0, 0, 0);
	width: 100%;
	pointer-events: none;
}

@keyframes overlay {
	from { opacity: 0; }
	to { opacity: 1; }
}

#main {
	height: 100%;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
}

/* 用 1px 高的幽灵行盒配合 vertical-align 实现垂直居中 */
#main:before {
	content: '';
	display: inline-block;
	height: 100%;
	margin-right: 0;
	vertical-align: middle;
	width: 1px;
}

#header {
	animation: header 0.9s 0.9s forwards;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	cursor: default;
	display: inline-block;
	opacity: 0;
	position: relative;
	text-align: center;
	top: -1em;
	vertical-align: middle;
	width: 90%;
	max-width: 46em;
}

@keyframes header {
	from { transform: translate3d(0, 0.9em, 0); opacity: 0; }
	to   { transform: translate3d(0, 0, 0);     opacity: 1; }
}

@keyframes nav-icons {
	from { transform: translate3d(0, 0.9em, 0); opacity: 0; }
	to   { transform: translate3d(0, 0, 0);     opacity: 1; }
}

	#header h1 {
		font-size: 4.35em;
		font-weight: 900;
		letter-spacing: -0.035em;
		line-height: 1.02em;
		text-shadow: 0 2px 26px rgba(16, 52, 74, 0.30);
	}

	#header p {
		font-size: 1.25em;
		font-weight: 300;
		margin: 0.7em 0 0.25em;
		opacity: 0.94;
		letter-spacing: 0.06em;
		text-shadow: 0 1px 18px rgba(16, 52, 74, 0.28);
	}

		/* 标语两侧的装饰圆点 */
		#header p .dot {
			display: inline-block;
			color: rgba(255, 255, 255, 0.72);
			font-size: 0.62em;
			vertical-align: 0.16em;
			letter-spacing: 0;
		}

	#header nav { margin: 1.7em 0 0; }

		#header nav li {
			animation: nav-icons 0.55s ease-in-out forwards;
			backface-visibility: hidden;
			transform: translate3d(0, 0, 0);
			display: inline-block;
			height: 5.35em;
			line-height: 5.885em;
			opacity: 0;
			position: relative;
			top: 0;
			width: 5.35em;
		}

			#header nav li:nth-child(1) { animation-delay: 1.15s; }
			#header nav li:nth-child(2) { animation-delay: 1.30s; }
			#header nav li:nth-child(3) { animation-delay: 1.45s; }

		#header nav a,
		#header nav button {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-touch-callout: none;
			border: 0;
			display: inline-block;
			cursor: pointer;
		}

		/* button 复位成与 a 一致的外观 */
		#header nav button {
			appearance: none;
			background: none;
			font: inherit;
			color: inherit;
			padding: 0;
		}

			#header nav a:before,
			#header nav button:before {
				transition: all 0.24s ease-in-out;
				-webkit-backdrop-filter: blur(2px);
				backdrop-filter: blur(2px);
				border-radius: 100%;
				border: solid 1px rgba(255, 255, 255, 0.72);
				background-color: rgba(255, 255, 255, 0.06);
				display: block;
				font-size: 1.75em;
				height: 2.5em;
				line-height: 2.5em;
				position: relative;
				text-align: center;
				top: 0;
				width: 2.5em;
				box-shadow: 0 6px 20px -10px rgba(16, 52, 74, 0.55);
			}

			#header nav a:hover:before,
			#header nav button:hover:before {
				background-color: rgba(255, 255, 255, 0.22);
				border-color: #fff;
				color: #fff;
				transform: translateY(-2px);
				box-shadow: 0 12px 26px -10px rgba(16, 52, 74, 0.7);
			}

			#header nav a:active:before,
			#header nav button:active:before {
				background-color: rgba(255, 255, 255, 0.35);
				color: #fff;
				transform: translateY(0);
			}

			/* 图标由 :before 呈现，文字标签仅供读屏 */
			#header nav a span,
			#header nav button span { display: none; }

#footer {
	background-image: linear-gradient(180deg, rgba(16, 52, 74, 0) 0%, rgba(16, 52, 74, 0.34) 75%);
	bottom: 0;
	cursor: default;
	height: 6em;
	left: 0;
	line-height: 8em;
	position: absolute;
	text-align: center;
	width: 100%;
	pointer-events: none;
}

	#footer .copyright {
		font-size: 0.62em;
		font-weight: 300;
		letter-spacing: 0.22em;
		opacity: 0.72;
	}

/* ═══════════════════════════  5. Modal  ═══════════════════════════ */

/*
	可见性由两段控制：hidden 属性决定「是否渲染」，.is-open 类决定「是否显示」。
	两者都在 assets/js/main.js 中同步维护。

	刻意不用 backdrop-filter 做磨砂玻璃：全屏 backdrop-filter 是 Chromium 已知的绘制
	不一致/闪烁来源（crbug.com/366415129、crbug.com/448789651），在 1.5 倍缩放（Windows
	150%）的显示器上，模糊区域会出现一道横贯全屏的接缝，鼠标一动就闪现；它同时还是整页最
	贵的一次合成。实测去掉后背景平均亮度只差 0.02 灰阶（模糊并不改变均值），只是颗粒纹理
	不再被糊平；0.72 的深色蒙层本身已足够压住背景。
*/
.modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100;
	overflow: auto;
	background-color: rgba(10, 34, 48, 0.72);
	justify-content: center;
	align-items: center;
	animation: fadeIn 0.26s ease;
}

/* hidden 属性优先级兜底：即使被其它 display 规则命中也要隐藏 */
.modal[hidden] { display: none !important; }

.modal.is-open { display: flex; }

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.modal-box {
	position: relative;                 /* 让 .close 相对弹窗定位 */
	margin: auto;
	padding: 1.5em 1.5em 1.25em;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 30px 70px -22px rgba(8, 26, 38, 0.75);
	animation: liftIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes liftIn {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

	.modal-box .mt {
		margin: 0 0 0.9em;
		font-size: 0.6em;
		font-weight: 600;
		letter-spacing: 0.34em;
		text-indent: 0.34em;             /* 抵消末字符的字距，视觉居中 */
		text-transform: uppercase;
		color: #4a8fb5;
	}

	.modal-content {
		display: block;
		margin: 0 auto;
		background: #fff;
		border-radius: 10px;
	}

	.modal-box .mhint {
		margin: 0.95em 0 0;
		font-size: 0.62em;
		font-weight: 400;
		letter-spacing: 0.04em;
		color: #6b7f8b;
		line-height: 1.6;                /* 覆盖继承自 body 的 1.75em 行盒：
		                                    小字号配大行盒会让文字周边出现不对称留白 */
	}

	.modal .close {
		position: absolute;
		top: -12px;
		right: -12px;
		width: 38px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		color: #4a8fb5;
		background: #fff;
		border: 1px solid rgba(74, 143, 181, 0.28);
		border-radius: 50%;
		font-family: inherit;
		font-size: 1.4em;
		font-weight: 400;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 6px 18px -8px rgba(8, 26, 38, 0.5);
		transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
	}

	.modal .close:hover,
	.modal .close:focus-visible {
		background: #4a8fb5;
		border-color: #4a8fb5;
		color: #fff;
		transform: rotate(90deg);
	}

/* ═══════════════════════  6. Modal (mail)  ═══════════════════════ */

.modal-box .mail-addr {
	margin: 0 0 1.1em;
	padding: 0.85em 1em;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #2a5f7d;
	background: #f2f8fc;
	border: 1px dashed rgba(74, 143, 181, 0.45);
	border-radius: 10px;
	text-align: center;
	word-break: break-all;
	user-select: all;                   /* 便于手动三击全选 */
}

.mail-copy {
	display: block;
	width: 100%;
	margin: 0 0 0.9em;
	padding: 0.72em 1em;
	font-family: inherit;
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #fff;
	background: #4a8fb5;
	border: 1px solid #4a8fb5;
	border-radius: 9px;
	cursor: pointer;
	transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.16s ease;
}
.mail-copy:hover,
.mail-copy:focus-visible {
	background: #3c7b9c;
	border-color: #3c7b9c;
	transform: translateY(-1px);
}
.mail-copy:active { transform: translateY(0); }
.mail-copy.is-done {
	background: #3f9e6a;
	border-color: #3f9e6a;
}
.mail-copy.is-fail {
	background: #b5563f;
	border-color: #b5563f;
}

.modal-box .mail-alt {
	margin: 0.55em 0 0;
	font-size: 0.6em;
	letter-spacing: 0.04em;
	color: #6b7f8b;
	text-align: center;
	line-height: 1.6;                    /* 同 .mhint：小字号用小行盒收尾更紧凑 */
}
.modal-box .mail-alt a {
	color: #4a8fb5;
	text-decoration: none;
	border-bottom: 1px solid rgba(74, 143, 181, 0.4);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.modal-box .mail-alt a:hover,
.modal-box .mail-alt a:focus-visible {
	color: #2a5f7d;
	border-bottom-color: #2a5f7d;
}

/* ═══════════════════════════  7. Responsive  ═══════════════════════════ */

/* 宽屏：固定二维码尺寸；用 min() 保证矮视口下不被切掉 */
@media screen and (min-width: 768px) {
	.modal-content {
		/* 10cm 优先，但高度不得超过视口的 62% */
		width: min(10cm, 62vh);
		height: min(10cm, 62vh);
		object-fit: contain;
	}

	/* 邮箱弹窗不需要二维码的大尺寸约束：宽度对齐公众号弹窗基准（430px），
	   保持两个弹窗视觉一致；内容紧凑所以用 max-width 而非固定 width */
	#myModal3 .modal-box { width: min(20cm, 78vw, 430px); }
}

/* 窄屏 / 矮屏：自适应尺寸并收紧间距。
   上界 767.99px 与上面的 768px 无缝衔接，避免 767.5px 落在两段之间。 */
@media screen and (max-width: 767.99px), (max-height: 520px) {
	.modal-content {
		width: min(82vw, 320px, 62vh);
		height: auto;
	}
	.modal-box { padding: 1em 1em 0.9em; }
	.modal-box .mt { margin-bottom: 0.6em; font-size: 0.54em; }
	.modal-box .mhint { margin-top: 0.6em; font-size: 0.56em; }
}

/* 极矮屏：进一步收紧，并隐藏非必要说明文字 */
@media (max-height: 420px) {
	.modal-content { width: min(76vw, 62vh); }
	.modal-box { padding: 0.8em 0.9em 0.7em; }
	.modal-box .mhint { display: none; }
	.modal .close { top: -10px; right: -10px; width: 32px; height: 32px; }
}

@media screen and (max-width: 1680px) {
	body { font-size: 13pt; }
}

@media screen and (max-width: 1280px) {
	body { font-size: 12pt; }
}

@media screen and (max-width: 736px) {
	body {
		min-width: 320px;
		font-size: 11pt;
	}

	#header { width: 94%; }
	#header h1 {
		font-size: 2.6em;
		letter-spacing: -0.02em;
	}
	#header p { font-size: 1em; }

	#header nav { font-size: 1em; margin-top: 1.4em; }
	#header nav li {
		height: 4.6em;
		line-height: 5.0em;
		width: 4.6em;
	}
	/* 圆形图标是 1.75em 的 :before，比 li 的 4.6em 外框还宽 —— 相邻圆几乎贴在一起
	   （实测仅 3px）。窄屏收一档字级，让圆回到外框之内并拉开间距。 */
	#header nav a:before,
	#header nav button:before { font-size: 1.5em; }

	#footer .copyright { font-size: 0.6em; }
}

@media screen and (max-width: 480px) {
	#header nav { padding: 0 0.6em; }
	#header nav li {
		width: 4.2em;
		height: 4.2em;
		line-height: 4.6em;
	}
	/* 同上一档：4.2em 外框对应 1.35em 圆形，相邻圆之间留出约 12px 间隔 */
	#header nav a:before,
	#header nav button:before { font-size: 1.35em; }
}