/**
 * Motion Catalog — 视觉精修层
 *
 * 加载在 base.css 之后，只做「打磨」：材质、排版张力、动效与间距节奏。
 * 结构（布局骨架、栅格、组件边界）仍在 base.css 里，本层不重复定义。
 *
 * 全部数值走 --ms-* 变量，主题设置面板依然完全有效。
 *
 * ── 这一层在做什么（工艺底线）──────────────────────────────────────────
 * · 分层深度：纹理(z1) 与内容(z5) 分开，页面不再是单张平面
 * · 排版张力：大标题紧字距、压行高、高字重；标签反过来放宽字距
 * · 材质：整页一层 SVG 噪点，去掉「扁平矢量」的塑料感
 * · 动效：更慢（700ms 级）、更陡的减速曲线，克制而不是热闹
 * · 首屏不再用渐变光团充当视觉 —— 那属于廉价套路
 */

/* ── 间距节奏 ──────────────────────────────────────────────────────────── */
/*
 * 三级间距表达从属关系：区块之间 > 区块内分组 > 分组内元素。
 * 之前各处直接写 calc(Nrem * density)，N 值在 3/2/4/6/2.5 之间乱跳，
 * 那才是「排版不整齐」的根因。
 */

:root {
	--ms-gap-section: calc(var(--ms-space-24) * var(--ms-density));
	--ms-gap-block: calc(var(--ms-space-12) * var(--ms-density));
	--ms-gap-item: var(--ms-space-3);
}

.section { padding-block: var(--ms-gap-section); }
.section--tight { padding-block: var(--ms-gap-block); }

/* ── 分层深度 ──────────────────────────────────────────────────────────── */

body {
	position: relative;
	isolation: isolate;
}

/*
 * 噪点纹理层。
 *
 * 这是「这不是扁平矢量」最有效的单一信号：固定覆盖、不吃事件、
 * 透明度压到几乎看不见。亮色页面用 .03，暗色页面更低。
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--ms-z-texture);
	pointer-events: none;
	opacity: .028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 内容层压在纹理之上 */
.wp-site-blocks {
	position: relative;
	z-index: var(--ms-z-content);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body::before { opacity: .022; }
}

:root[data-theme="dark"] body::before { opacity: .022; }

/* 减少透明度偏好下不铺噪点 */
@media (prefers-reduced-transparency: reduce) {
	body::before { display: none; }
}

/* ── 排版张力 ──────────────────────────────────────────────────────────── */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/*
 * 大标题：紧字距 + 压低行高 + 高字重。
 * 「紧、大、自信」几乎全靠这三个值，而不是靠颜色或阴影。
 */
h1,
.ms-hero__title,
.ms-panel-card__title,
.ms-archive-title {
	letter-spacing: var(--ms-tracking-display);
	line-height: var(--ms-leading-display);
	font-weight: 800;
}

h2,
h3 {
	letter-spacing: var(--ms-tracking-title);
}

/*
 * 标签反过来：小字放宽字距 + 大写，和 display 形成对照。
 * 中文不适合大写，所以只放宽字距。
 */
.ms-badge,
.ms-chip,
.ms-filters__label,
.ms-panel-card__eyebrow,
.ms-detail-meta__label,
.ms-footer-nav__title,
.ms-site-footer__heading {
	letter-spacing: var(--ms-tracking-label);
}

/* 统计、价格、计数、日期统一等宽数字 */
.ms-num,
.ms-stats__value,
.ms-result-count,
.ms-plan__price b,
.ms-detail-meta__value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ── 首屏 ──────────────────────────────────────────────────────────────── */
/*
 * 刻意不用「文字 + 渐变光团」那套 —— 那是最典型的 AI 廉价套路。
 * 这里的视觉由排版本身承担：超大字、极紧字距、压扁行高，加上
 * 真实数据（统计条）和一层噪点材质。
 */

.ms-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--ms-line);
	background: var(--ms-canvas);
}

/* 一条贴着顶部的品牌色细线，代替任何装饰性图形 */
.ms-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ms-accent) 0%, transparent 62%);
}

.ms-hero__inner {
	position: relative;
	z-index: var(--ms-z-content);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ms-space-5);
	padding-block: var(--ms-gap-section);
	max-width: 52rem;
	margin-inline: auto;
	text-align: left;
}

/* 顶部小标签做成胶囊，代替每节都出现的 uppercase eyebrow */
.ms-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-space-2);
	margin: 0;
	padding: var(--ms-space-1) var(--ms-space-3);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: var(--ms-surface);
	color: var(--ms-muted);
}

.ms-hero__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ms-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-accent) 30%, transparent);
}

.ms-hero__title {
	margin: 0;
	max-width: 18ch;
	font-size: var(--ms-text-hero);
}

/* 关键词用品牌色下划线强调，是整页唯一的"高亮动作" */
.ms-hero__title em {
	font-style: normal;
	background-image: linear-gradient(transparent 66%, color-mix(in srgb, var(--ms-accent) 72%, transparent) 66%);
	background-repeat: no-repeat;
}

.ms-hero__lede {
	margin: 0;
	max-width: var(--ms-measure);
	color: var(--ms-muted);
	font-size: var(--ms-text-panel);
	line-height: var(--ms-leading-body);
}

.ms-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-space-3);
	margin-block-start: var(--ms-space-2);
}

/* ── 按钮质感 ──────────────────────────────────────────────────────────── */

.ms-action,
.wp-block-button__link,
.ms-btn {
	position: relative;
	overflow: hidden;
	transition:
		transform var(--ms-dur-micro) var(--ms-ease-out),
		background var(--ms-dur-micro) var(--ms-ease-out),
		border-color var(--ms-dur-micro) var(--ms-ease-out),
		box-shadow var(--ms-dur-base) var(--ms-ease-out);
}

.ms-action--primary,
.wp-block-button.is-style-ms-primary .wp-block-button__link {
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ms-accent) 40%, transparent);
}

@media (hover: hover) {
	.ms-action--primary:hover,
	.wp-block-button.is-style-ms-primary .wp-block-button__link:hover {
		box-shadow: var(--ms-glow);
		transform: translateY(-1px);
	}
}

.ms-action:active,
.wp-block-button__link:active { transform: translateY(1px) scale(.99); }

/*
 * 高光扫过：只在主按钮、只在 hover 设备、只在允许动效时。
 * 属点缀，不参与信息传达。
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ms-action--primary::after,
	.wp-block-button.is-style-ms-primary .wp-block-button__link::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .34) 50%, transparent 68%);
		transform: translateX(-130%);
		transition: transform 680ms var(--ms-ease-out);
		pointer-events: none;
	}

	.ms-action--primary:hover::after,
	.wp-block-button.is-style-ms-primary .wp-block-button__link:hover::after {
		transform: translateX(130%);
	}
}

/* ── 卡片质感 ──────────────────────────────────────────────────────────── */

.ms-card {
	position: relative;
	background: var(--ms-surface);
	box-shadow: var(--ms-shadow-sm);
}

/*
 * 缩略图底部压一层渐变，让角标与悬停按钮在任何画面上都读得清。
 * 这也是「海报」和「卡片」之间的过渡，避免图片像贴上去的。
 */
.ms-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--ms-ink) 34%, transparent) 0%, transparent 44%);
	opacity: 0;
	transition: opacity var(--ms-dur-base) var(--ms-ease-out);
	pointer-events: none;
}

@media (hover: hover) {
	.ms-card:hover .ms-card__media::after { opacity: 1; }
}

.ms-card__media img {
	transition: transform 520ms var(--ms-ease-out);
}

@media (hover: hover) {
	.ms-card:hover .ms-card__media img { transform: scale(1.035); }
}

/*
 * 图片加载完成后淡入。
 *
 * 初始隐藏态挂在 .js-images 下 —— 由脚本确认可用后才加到 <html>。
 * 直接写 img[loading]{opacity:0} 是危险的：脚本一旦失败，所有图片
 * 都会永久不可见。
 */
.js-images .ms-card__media img,
.js-images .ms-detail__media img,
.js-images .ms-term-card__media img {
	opacity: 0;
	transition: transform 520ms var(--ms-ease-out), opacity 420ms var(--ms-ease-out);
}

.js-images .ms-card__media img.is-loaded,
.js-images .ms-detail__media img.is-loaded,
.js-images .ms-term-card__media img.is-loaded {
	opacity: 1;
}

/* 生成的海报不需要再缩放，它本身就是图形 */
.ms-card__media img.ms-poster { transform: none; }

.ms-card__title a {
	background-image: linear-gradient(var(--ms-ink), var(--ms-ink));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--ms-dur-base) var(--ms-ease-out);
}

@media (hover: hover) {
	.ms-card:hover .ms-card__title a { background-size: 100% 1px; }
}

/* 角标浮在图上时加一点模糊底，避免和图片对比度不足 */
.ms-card__badge-wrap .ms-badge,
.ms-card__badge {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* ── 区块标题 ──────────────────────────────────────────────────────────── */

.ms-archive-head,
.ms-explore {
	max-width: var(--ms-container);
	margin-inline: auto;
}

.ms-detail-section-title {
	display: flex;
	align-items: center;
	gap: var(--ms-space-3);
	margin-block-end: var(--ms-space-6);
}

/* 品牌色短竖线，统一区块视觉起点 */
.ms-detail-section-title::before {
	content: "";
	width: 3px;
	height: 1em;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-accent);
}

/* ── 信息卡 ────────────────────────────────────────────────────────────── */

.ms-panel-card {
	box-shadow: var(--ms-shadow-sm);
}

/* ── 空态 ──────────────────────────────────────────────────────────────── */

.ms-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ms-space-3);
	padding-block: var(--ms-gap-block);
	border: 1px dashed var(--ms-line);
	border-radius: var(--ms-radius-lg);
	background: color-mix(in srgb, var(--ms-surface) 60%, transparent);
}

/* ── 滚动条与焦点 ──────────────────────────────────────────────────────── */

@media (min-width: 40rem) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--ms-line-strong) transparent;
	}

	::-webkit-scrollbar { width: 10px; height: 10px; }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-thumb {
		border: 3px solid transparent;
		border-radius: var(--ms-radius-pill);
		background-clip: content-box;
		background-color: var(--ms-line-strong);
	}

	::-webkit-scrollbar-thumb:hover { background-color: var(--ms-muted); }
}

:focus-visible {
	outline: 2px solid var(--ms-focus);
	outline-offset: 2px;
}

.ms-card:focus-within {
	outline: 2px solid var(--ms-focus);
	outline-offset: 2px;
}

/* 表单控件的占位符对比度：默认值往往偏浅 */
::placeholder {
	color: var(--ms-muted);
	opacity: 1;
}

/* ── 入场编排 ──────────────────────────────────────────────────────────── */
/*
 * 首屏元素错开入场：位移 34px、时长 700ms、更陡的减速。
 * 之前是 18px / 260ms —— 太快太浅，正是「廉价」的观感来源。
 * 默认（无 JS 或减少动效）即为完成态，不会把内容藏起来。
 */

@media (prefers-reduced-motion: no-preference) {
	.ms-hero__eyebrow,
	.ms-hero__title,
	.ms-hero__lede,
	.ms-hero__actions,
	.ms-stats {
		animation: ms-hero-in var(--ms-dur-reveal) var(--ms-ease-out) both;
	}

	.ms-hero__title { animation-delay: 80ms; }
	.ms-hero__lede { animation-delay: 170ms; }
	.ms-hero__actions { animation-delay: 250ms; }
	.ms-stats { animation-delay: 340ms; }
}

@keyframes ms-hero-in {
	from { opacity: 0; transform: translateY(34px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.ms-filters { animation: ms-fade-in 520ms var(--ms-ease-out) 140ms both; }
}

@keyframes ms-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/*
 * 滚动揭示同步加强：位移 34px、700ms。
 * 主方案仍是纯 CSS 的 animation-timeline（0 KB JS）。
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-reveal] {
			animation: ms-reveal-in var(--ms-dur-reveal) var(--ms-ease-out) both;
			animation-timeline: view();
			animation-range: entry 8% cover 34%;
		}
	}
}

@keyframes ms-reveal-in {
	from { opacity: 0; transform: translateY(34px); }
	to { opacity: 1; transform: none; }
}

.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(34px);
	transition:
		opacity var(--ms-dur-reveal) var(--ms-ease-out) var(--ms-delay, 0ms),
		transform var(--ms-dur-reveal) var(--ms-ease-out) var(--ms-delay, 0ms);
}

.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ── 卷动进度条 ────────────────────────────────────────────────────────── */
/*
 * 纯 CSS scroll-driven animation，0 KB JS。
 * 不支持的浏览器直接不显示，不影响阅读。
 */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		body::after {
			content: "";
			position: fixed;
			inset-block-start: 0;
			inset-inline-start: 0;
			z-index: 70;
			width: 100%;
			height: 2px;
			background: var(--ms-accent);
			transform-origin: 0 50%;
			transform: scaleX(0);
			animation: ms-progress linear both;
			animation-timeline: scroll(root block);
			pointer-events: none;
		}
	}
}

@keyframes ms-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ── 页面级组件（分类目录 / 定价 / 账号 / 联系） ────────────────────────── */

.ms-term-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--ms-grid-gap);
}

.ms-term-card {
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-2);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	background: var(--ms-surface);
	overflow: hidden;
	box-shadow: var(--ms-shadow-sm);
	transition:
		transform var(--ms-dur-base) var(--ms-ease-out),
		border-color var(--ms-dur-base) var(--ms-ease-out),
		box-shadow var(--ms-dur-base) var(--ms-ease-out);
}

@media (hover: hover) {
	.ms-term-card:hover {
		transform: translateY(-3px);
		border-color: var(--ms-line-strong);
		box-shadow: var(--ms-shadow-media);
	}
}

.ms-term-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ms-surface-subtle);
}

.ms-term-card__media img { width: 100%; height: 100%; object-fit: cover; }

.ms-term-card__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ms-space-2);
	padding: var(--ms-space-4);
}

.ms-term-card__name { font-weight: 700; letter-spacing: var(--ms-tracking-title); }
.ms-term-card__count { color: var(--ms-muted); font-size: var(--ms-text-meta); }

/* 定价 */
.ms-pricing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--ms-grid-gap);
	align-items: start;
}

.ms-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-3);
	padding: var(--ms-space-6);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	background: var(--ms-surface);
	box-shadow: var(--ms-shadow-sm);
}

.ms-plan--popular {
	border-color: color-mix(in srgb, var(--ms-accent) 70%, var(--ms-line));
	box-shadow: var(--ms-glow);
}

@media (min-width: 60rem) {
	.ms-plan--popular { transform: translateY(-10px); }
}

.ms-plan__badge {
	position: absolute;
	top: calc(var(--ms-space-3) * -1);
	left: var(--ms-space-6);
	padding: 2px var(--ms-space-3);
	border-radius: var(--ms-radius-pill);
	background: var(--ms-accent);
	color: var(--ms-on-accent);
	font-size: var(--ms-text-meta);
	font-weight: 700;
	letter-spacing: var(--ms-tracking-label);
}

.ms-plan__name { color: var(--ms-muted); font-size: var(--ms-text-ui); font-weight: 600; }

.ms-plan__price { display: flex; align-items: baseline; gap: var(--ms-space-2); }

.ms-plan__price b {
	font-size: var(--ms-text-page);
	font-weight: 800;
	letter-spacing: var(--ms-tracking-display);
}

.ms-plan__price i { color: var(--ms-muted); font-size: var(--ms-text-ui); font-style: normal; }
.ms-plan__note { color: var(--ms-muted); font-size: var(--ms-text-meta); }

.ms-plan__features {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-2);
	font-size: var(--ms-text-ui);
}

.ms-plan__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--ms-space-2);
}

.ms-plan__features li::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	margin-block-start: 3px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ms-accent) 55%, transparent);
}

.ms-pricing__foot { color: var(--ms-muted); font-size: var(--ms-text-ui); }

/* 账号 / 联系信息表 */
.ms-account {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	max-width: var(--ms-content);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	overflow: hidden;
	background: var(--ms-surface);
}

.ms-account__row {
	display: flex;
	justify-content: space-between;
	gap: var(--ms-space-4);
	padding: var(--ms-space-4) var(--ms-space-5);
	border-bottom: 1px solid var(--ms-line);
}

.ms-account__row:last-child { border-bottom: 0; }
.ms-account__row dt { color: var(--ms-muted); }
.ms-account__row dd { margin: 0; font-weight: 600; }

.ms-contact { display: flex; flex-direction: column; gap: var(--ms-space-5); }

.ms-contact__qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ms-space-2);
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
}

.ms-contact__qr img { border-radius: var(--ms-radius-md); border: 1px solid var(--ms-line); }

.ms-login-prompt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ms-space-4);
	padding: var(--ms-space-6);
	border: 1px dashed var(--ms-line);
	border-radius: var(--ms-radius-lg);
	background: color-mix(in srgb, var(--ms-surface) 60%, transparent);
}

.ms-login-prompt p { margin: 0; color: var(--ms-muted); }
.ms-login-prompt .ms-action { width: auto; }

/* ── 减少动效 ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ms-hero__eyebrow,
	.ms-hero__title,
	.ms-hero__lede,
	.ms-hero__actions,
	.ms-stats,
	.ms-filters,
	[data-reveal],
	.js-reveal [data-reveal] {
		animation: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ms-card__media img { transition: none; }
	.ms-card__actions { transition: none; }
	.ms-skeleton { animation: none; }
	.ms-support__toggle { transition: none; }

	.ms-action::after,
	.wp-block-button__link::after { display: none; }
}