/*
 * 华健生物 · 第 2.5 层：动效
 *
 * 为什么单独一层：
 *   动效散写在各模板的 <style> 里，时长、曲线、位移会各写各的，
 *   最后全站出现 0.15s / 0.25s / 0.35s 五种时长并存，观感像拼的。
 *   这里统一成 5 类，模板只加 class，不写 transition。
 *
 * 五类动效（与《首页全站设计改造任务清单》第四章一致）：
 *   1. 入场淡入      .sdf-in           滚动进入视口时淡入 + 上移 16px
 *   2. 错峰列表      .sdf-stagger      同组元素按 --i 递进 60ms
 *   3. 数字计数      .sdf-count        由 JS 写入，CSS 只负责等宽数字
 *   4. Hover 抬升    .sdf-lift         卡片与按钮的 -4px 位移
 *   5. 描边/着色切换 .sdf-tint         认证灰度 → 彩色、描边变青绿
 *
 * 三条硬约束：
 *   a. prefers-reduced-motion: reduce 下全部关闭，内容直接可见
 *   b. JS 失效时内容必须可见（.sdf-js 由 JS 加上，无 JS 时样式不生效）
 *   c. 不得延迟首屏 LCP —— 首屏文案用 CSS animation，不依赖 JS
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. 入场淡入
 *
 * 与既有 .sdf-reveal 的区别：
 *   .sdf-reveal 用 transition + IntersectionObserver 加 class；
 *   .sdf-in 用 animation，一旦 class 落下就自动播完，不依赖 transition 状态。
 *   两者并存，新组件优先用 .sdf-in（更不容易因为 transition 被覆盖而失效）。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-js .sdf-in {
	opacity: 0;
	transform: translateY(16px);
	animation: none;
}

.sdf-js .sdf-in.is-inview {
	animation: sdf-in-up var(--sdf-t-page) var(--sdf-ease) forwards;
}

@keyframes sdf-in-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. 错峰列表
 *
 * 用法：父级加 .sdf-stagger，子项加 style="--i:0" 递增。
 * 不写死 nth-child，是因为后台可增删条目，序号必须由 PHP 输出。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-js .sdf-stagger > * {
	opacity: 0;
}

.sdf-js .sdf-stagger.is-inview > * {
	animation: sdf-in-up var(--sdf-t-page) var(--sdf-ease) forwards;
	animation-delay: calc(var(--i, 0) * 60ms);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. 数字计数（CSS 部分）
 *
 * 计数逻辑在 sdfrchem-main.js 的 initCounters()。
 * 这里只保证数字等宽、不因位数变化跳动，以及未开始前保持占位不塌陷。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-count {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	/* 数字从 0 涨到目标值时若宽度变化，整行会左右抖；
	 * 用 min-width 按最大位数预留空间，并在 PHP 端输出完整值作为兜底文本。 */
	min-width: 1ch;
	will-change: contents;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. Hover 抬升
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-lift {
	transition:
		transform var(--sdf-t-hover) var(--sdf-ease),
		box-shadow var(--sdf-t-hover) var(--sdf-ease),
		border-color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--sdf-shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. 描边 / 着色切换
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-tint {
	transition:
		filter var(--sdf-t-hover) var(--sdf-ease),
		opacity var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease),
		border-color var(--sdf-t-hover) var(--sdf-ease);
}

/* 认证 / 合作方 logo：默认灰度，hover 还原彩色。
 * 这是 B2B 站最克制的一种"活着"的暗示 —— 比彩色平铺高级，也比动画显得专业。 */
.sdf-gray {
	filter: grayscale(1);
	opacity: .68;
	transition:
		filter var(--sdf-t-hover) var(--sdf-ease),
		opacity var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-gray:hover,
*:hover > .sdf-gray {
	filter: grayscale(0);
	opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. 无障碍与降级
 * ═══════════════════════════════════════════════════════════════════════ */

/*
 * 系统开启「减少动态效果」时：
 *   - 所有入场动画立即播完（content 必须可见）
 *   - hover 位移取消，只保留颜色变化
 * 这一条不能用 .sdf-js 限定：无 JS 时 .sdf-in 本来就不隐藏，
 * 但 hover 位移仍在，所以选择器要覆盖到全部。
 */
@media (prefers-reduced-motion: reduce) {
	.sdf-js .sdf-in,
	.sdf-js .sdf-stagger > * {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.sdf-lift:hover {
		transform: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/*
 * 打印：所有区块直接可见，不带动画。
 * 打印时 animation 状态不会求值到 forwards，隐藏的元素会印成空白页。
 */
@media print {
	.sdf-js .sdf-in,
	.sdf-js .sdf-stagger > * {
		opacity: 1;
		transform: none;
		animation: none;
	}
}