/* ============================================================
   全局基础
   变量、重置、页面骨架、容器、通用动画工具
   ============================================================ */

:root {
    --color-bg: #f5f5f7;
    --color-text: #1d1d1f;
    --color-text-sub: #6e6e73;
    --color-accent: #0071e3;
    --color-accent-hover: #0077ed;
    --color-nav-bg: rgba(251, 251, 253, 0.7);   /* 导航：浅色半透明 */
    --color-nav-text: rgba(0, 0, 0, 0.8);        /* 导航文字：深灰而非纯黑 */
    --nav-height: 48px;
    --container: 1920px;
    /* 全局左边距：宽屏时与 1024 内容区左对齐，窄屏时留 22px */
    --gutter: max(22px, calc((100vw - var(--container)) / 2 + 22px));
    /* 首页专用：仿苹果官网"贴左不对齐中间"，用 6vw 让它随屏幕温和增长，40px 是窄屏兜底 */
    --gutter-home: max(20px, calc(50vw - 742px));
    /* 苹果商店页三档渐变留白（apple.com.cn/store 实测，store-home.css rs-merch-4.19.6）：
       <1024px 恒 22px；1024→1440 线性渐增 22→140；≥1440px 固定 140px。
       苹果源码用三段 @media + translateX 实现，这里 clamp 数学等价、任意屏宽逐像素同值：
       中段表达式照抄苹果原值（-268.46154px + 28.36538vw，即 22 + 118×(vw−1024)/416 的直线），
       两端由 clamp 自动钳位，在 1024/1440 两个衔接点与相邻档严格同值、无跳变 */
    --gutter-ramp: clamp(22px, 28.36538vw - 268.46154px, 140px);
    /* 全站卡片统一阴影（苹果官网同款，主页帮手卡为基准）：
       各页面卡片一律引用这两个变量，想全局调阴影只改这里一处 */
    --card-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);        /* 默认（苹果 #00000014） */
    --card-shadow-hover: 2px 4px 16px rgba(0, 0, 0, 0.16);  /* 悬停（苹果 #00000029） */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--color-bg);
    color: var(--color-text);
    /* 字体栈：多端统一走鸿蒙黑体 webfont（2026-10-13 起，Mac 也走鸿蒙——
       用户要求全端观感一致）。鸿蒙字形骨架接近苹方，Mac 上不会有突兀感，
       且全平台字形一致后，字号/折行观感在任何设备上都对得上。
       HarmonyOS Sans SC 必须排在所有系统字体之前才能接管全部平台 */
    font-family: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont,
                 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 22px;
}

main { min-height: 60vh; }

/* 滚动 reveals（JS 给元素加 .revealed 触发） */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.revealed { opacity: 1; transform: none; }

/* 尊重系统"减少动画"偏好 */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}