/* ============================================================
   首页 · 浅色非对称液态玻璃
   ------------------------------------------------------------
   设计判读（taste §0.B）：这是一台学习工具，不是营销落地页。
   给备考阿语的人一个安静、有分量、按进度说话的首屏。

   旋钮：DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 2

   作用域锁在 #page-home，删掉本文件与 index.html 里的一行 link 即整体回滚。

   这一版修掉的规则违反（前两轮被否的真实原因）：
     - taste §4.3 反居中偏见：VARIANCE>4 时禁止居中 hero → 改左对齐非对称
     - taste §4.7 hero 顶距 ≤96px → 原来 clamp(56,13vh,132) 会到 132px
     - taste §4.7 Bento 多样性：四张白底纯文字卡 = 点名的 AI default
       → 改「一大三小」，大格品牌绿实底 + 真实阿语题字，一格点阵纹理
     - taste §4.4 圆角锁定 → 交互 full-pill、表面 20px，两套
     - taste §4.2 单强调色 → 首页只用品牌绿，撤掉柠檬绿与蓝
     - taste §4.5 触屏按压反馈 → 补 :active（原来只有 :hover，手机等于没反馈）
     - apple §12 材质按面积分级 → 大格 blur22 / 小格 blur14，不再一刀切 26
     - apple §15 字距随字号变化 → eyebrow 从固定 2px 改 0.16em
     - apple §15 尊重系统字号 → 首页间距从固定 px 改 rem
   ============================================================ */

:root {
    /* iOS 风格 UI 字体栈。Apple 设备命中 SF Pro，Android 自动落系统字体，
       不引入任何 web 字体 —— 离线与 APK 体积都不受影响（apple §15
       「优先平台系统字体」）。 */
    --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
               "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --lg-drift-a: 52px;
    --lg-drift-b: -38px;
    /* 间距一律 rem：系统字号放大时布局跟着长，不会挤破（apple §15 Dynamic Type） */
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-10: 2.5rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
}

/* ── 1. 地面：光斑层 ──────────────────────────────── */
#page-home {
    position: relative;
    isolation: isolate;
}

/* .page-section 的入场动画带 transform，而 transform 会把 #page-home 变成
   fixed 后代的包含块 —— 那 400ms 里背景会被拉回 1400px 内容列，两侧各露出
   一大条未折射的裸背景。首页入场只淡入，不改位置。 */
#page-home {
    animation-name: homeFadeIn;
}

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

.home-liquid-field {
    /* 只是被折射的光斑层，自己不带任何材质 */
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

/* 背景玻璃面：压在光斑之上，把它们糊开 —— 玻璃感来自折射本身。
   ⚠ 刻意不写 border / inset box-shadow / border-radius：
   那是「卡片」交代厚度用的，用在整块背景上会画出一个大方框。

   ⚠ 为什么是 fixed 而不是 absolute：
   .main-content 限宽 1400px，absolute 的两层只铺到内容列那么宽，
   2560 下量到玻璃矩形是 576→1984，两侧各 576px 是未折射的裸背景 ——
   那道明暗分界线就是「隐形边框」，用户上一轮骂的正是它。
   fixed 的包含块是视口（不含滚动条），inset:0 恰好铺满且
   不参与文档可滚动溢出，所以不会像 inset:-6rem 那样撑出 scrollWidth。
   代价：滚动时背景不动。这恰恰是想要的——环境光应当恒定。 */
.home-glass {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.16) 46%,
        rgba(255, 255, 255, 0.30) 100%);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
}

body.dark .home-glass {
    background: linear-gradient(135deg,
        rgba(44, 52, 46, 0.46) 0%,
        rgba(30, 36, 31, 0.26) 46%,
        rgba(38, 45, 39, 0.36) 100%);
}

.home-liquid-field > span {
    position: absolute;
    display: block;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    filter: blur(3.5rem);
    will-change: transform;
    opacity: 0.42;
}

/* 只允许绿系，绝不出现紫蓝廉价渐变（taste §4.2 The Lila Rule） */
.home-liquid-field .blob-a {
    inset-block-start: -6rem;
    inset-inline-start: -4rem;
    background: radial-gradient(circle at 50% 50%, rgba(31, 107, 76, 0.34), transparent 68%);
}
.home-liquid-field .blob-b {
    inset-block-start: -3rem;
    inset-inline-end: -6rem;
    background: radial-gradient(circle at 50% 50%, rgba(47, 139, 103, 0.28), transparent 66%);
}
.home-liquid-field .blob-c {
    inset-block-end: -7rem;
    inset-inline-start: 34%;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle at 50% 50%, rgba(31, 107, 76, 0.20), transparent 70%);
}

body.dark .home-liquid-field > span { opacity: 0.30; }

/* ── 2. Hero：容器居中、内容左对齐的非对称构图 ──────
   ⚠ 「反居中」（taste §4.3）指的是**构图**不居中，不是把内容推到左边
   然后让右边空一大片。1280 下 hero 限宽 44rem + 栅格限宽 56rem 全部
   左对齐，右侧空掉 45%，读起来像没做完而不是留白。
   正确做法：外层量度（measure）居中，非对称发生在容器内部。 */
#page-home .hero,
#page-home .features-section {
    max-width: 66rem;
    margin-inline: auto;
}

#page-home .hero {
    padding-block: clamp(1rem, 4vh, 3.5rem) clamp(3rem, 9vh, 7rem);
    /* 全站一条中轴：四张入口卡的内容本来就是居中的，
       hero 再左对齐就会出现两条轴 —— 标题中心与卡片中心差 100~290px，
       读起来像没排完。所以 hero 也居中，非对称留给卡片内部。 */
    text-align: center;
    align-items: center;
}

#page-home .hero-badge {
    display: inline-block;
    background: rgba(31, 107, 76, 0.09);
    color: var(--primary-dark);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;             /* 交互/标签一律 full-pill */
    font-family: var(--ui-font);
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.16em;           /* em 而非固定 px：随字号缩放 */
    text-transform: uppercase;
    font-weight: 600;
    margin-block-end: var(--sp-6);
}

/* 徽章里是中文时不做拉丁字距与大写（CJK 加字距会拆散字形） */
#page-home .hero-badge:lang(zh),
html[lang="ar"] #page-home .hero-badge {
    letter-spacing: 0.06em;
    text-transform: none;
}

/* 深色模式下 --primary-dark 会变成中绿，压在合成后的深底上只有 3.44:1。
   带 #page-home 才压得住上面那条 (1,1,0)，glass-theme 里的同名规则权重不够。 */
body.dark #page-home .hero-badge {
    color: var(--primary-light);
}

#heroTitle {
    /* 字号由 js/hero-fit.js 写成 --hero-fs：按**版心可用宽**反推，
       保证单行且不溢出，同时封顶 3rem。
       原来写的是 clamp(1.75rem, 6.2vw, 4.25rem) —— 6.2vw 按视口算，
       ≥1100px 一律顶到 68px 上限，跟 1056px 的版心完全不成比例，
       西语标题就成了一条横贯半屏的巨字。
       括号里的 clamp 是 JS 不执行时的兜底。 */
    font-size: var(--hero-fs, clamp(1.4rem, 4.4vw, 3rem));
    font-weight: 700;
    color: var(--text-primary);
    /* 标题强制单行（用户要求）。
       ⚠ 必须同时去掉 max-width —— 留着 15ch 的限宽配上 nowrap 不会换行，
       只会让文字溢出容器，把刚修好的横向滚动 bug 再引回来。 */
    white-space: nowrap;
    max-width: none;
    margin-inline: 0;
    /* style.css 有一条 `html[dir="ltr"] .hero-title-ar { text-align: left }`，
       英/西模式下直接命中这个 h2 自己 —— 父级 .hero 的 center 是继承值，
       子元素自身的声明永远赢，于是标题在英/西里左对齐（实测两行字形中心差 43px）。
       用 inherit 交还给 .hero 决定，比硬写 center 更不容易再次跑偏。 */
    text-align: inherit;
}

/* 两行开关：只有 js/hero-fit.js 会加这个类，条件是「可用宽 <375px 且单行
   字号会掉到 26px 以下」。阿语在这种宽度下单行仍有 ~39px，所以不加类、保持单行。
   balance 让两行长度接近，避免一行挤满、另一行只剩两个字。 */
#heroTitle.hero-title-wrap {
    white-space: normal;
    text-wrap: balance;
}

/* 紧凑规格只给拉丁。阿语带 تَشْكِيل 变音符，紧行高会裁掉符号、
   字距会破坏字母连接 —— 按 html[lang] 分档，绝不按 class
   （#heroTitle 是多语的，js/lang.js:466 会整条换文案并同步 dir）。
   阿语侧行高由 glass-theme.css 的 [dir="rtl"] 护栏兜住 ≥1.7。 */
html[lang="en"] #heroTitle,
html[lang="es"] #heroTitle {
    line-height: 1.08;
    letter-spacing: -0.025em;         /* apple §15：大字负字距 */
    font-family: var(--ui-font);
}

#page-home .hero-quote {
    margin-block-start: var(--sp-6);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);     /* 深灰而非纯黑，也非浅灰 */
    /* 版心交给 .hero 的 66rem。这里原来写的是 max-width: 34ch ——
       ch 是「0」字形宽度（约 0.5em），34ch 只有约 17em，
       而引言池（js/poetry-quotes.js，9000 条）正文最长 43 字、出处最长 55 字，
       中文必然被折成两行。放开后：一行正文、一行出处。 */
    max-width: none;
    padding-inline: 0;                /* style.css 给了 0 16px，会让正文比标题缩进一截 */
    /* 窄屏放不下长引言时仍要折，balance 让两行长度接近，断点不落在词中间 */
    text-wrap: balance;
    margin-inline: 0;
}

/* ── 3. 入口：4 个等大玻璃卡（用户要求换回上一版）──────
   已移除：品牌绿大格、阿语水印 ::before、点阵纹理格、1大3小不对称。
   注意这是**用户明确指令**优先于 taste §4.7「Bento 至少 2-3 格要有真实
   视觉变化」——那条规则本轮不满足，是有意为之，不是遗漏。 */
#page-home .features-section { padding-block-end: var(--sp-16); }

#page-home .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    /* 量度由 .features-section 统一控制（66rem 居中），这里不再二次限宽，
       否则右列之外又会多出一条空洞 */
    max-width: none;
}

/* 卡片材质**故意不在这里声明** —— 让 style.css 的「液态玻璃质感」区块
   （blur(26) + 三段渐变底 + 四边内高光）直接生效。
   在这里重述一遍材质，正是上一版把更强的配方降级成扁平半透明白的原因。
   圆角也不覆写，统一走全局 --radius（16px），保持一套圆角系统。 */
#page-home .feature-card {
    position: relative;               /* 镜面伪元素基准；卡内无其他绝对定位子元素 */
    overflow: hidden;
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    font-family: var(--ui-font);
    /* 只过渡合成属性。taste §7 在 MOTION 6 档写的是 `transition: all`，
       但在带 backdrop-filter 的面上 `all` 会逐帧重算整块模糊 —— 性能红线优先，记为偏离。 */
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
}

#page-home .feature-card:hover { transform: translateY(-3px); }

/* 触屏按压反馈：pointer-down 即响应（apple §1、§10；taste §4.5）。
   原来只有 :hover，手机上等于完全没有反馈。 */
#page-home .feature-card:active {
    transform: scale(0.985);
    transition-duration: 100ms;
}

/* hover 的「变亮」用独立覆盖层的 opacity 表达：opacity 是合成属性，
   改它既不触发重排也不重算 backdrop 模糊。
   ⚠ 不用柠檬绿 —— taste §4.2 要求一页一强调色，首页强调色只有品牌绿。 */
#page-home .feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(150deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0) 72%);
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

#page-home .feature-card:hover::after { opacity: 1; }

#page-home .feature-icon {
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--sp-2);
}

#page-home .feature-icon svg { width: 1.75rem; height: 1.75rem; display: block; }

#page-home .feature-card h4 {
    font-family: var(--ui-font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

#page-home .feature-card p {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* ── 4. 语言切换器 ────────────────────────────────── */
#page-home .lang-switcher { text-align: start; }

#page-home .lang-btn {
    font-family: var(--ui-font);
    transition: transform 100ms ease-out;
}

#page-home .lang-btn:active { transform: scale(0.97); }

/* ── 5. 入场：materialize（apple §12「玻璃要到场，不是淡入」）──
   离线预采样弹簧（zeta≈0.57，420ms）。scale 与位移同步，
   让表面读起来像一块材质到位，而不是一个透明度在变。
   ⚠ 不动画 blur radius —— 那会逐帧重算 backdrop，与性能红线冲突，记为偏离。 */
@keyframes homeRise {
      0.0% { transform: translateY(1.25rem) scale(0.985); opacity: 0;    }
      2.1% { transform: translateY(1.23rem) scale(0.985); opacity: 0.03; }
     14.5% { transform: translateY(0.87rem) scale(0.993); opacity: 0.49; }
     27.1% { transform: translateY(0.40rem) scale(0.998); opacity: 1;    }
     39.6% { transform: translateY(0.07rem) scale(1.001); opacity: 1;    }
     52.0% { transform: translateY(-0.09rem) scale(1.002); opacity: 1;   }
     64.6% { transform: translateY(-0.12rem) scale(1.002); opacity: 1;   }
     77.1% { transform: translateY(-0.09rem) scale(1.001); opacity: 1;   }
     87.4% { transform: translateY(-0.05rem) scale(1.000); opacity: 1;   }
    100.0% { transform: translateY(0) scale(1);            opacity: 1;   }
}

/* 只作用在子元素上：.page-section 用的是 animation 简写，
   给它再设 animation 会替换整个列表、把原有 fadeIn 弄丢。
   缓动必须 linear —— 弹簧时序已由采样间距编码，再叠 bezier 会二次变形。 */
#page-home.active .hero-badge,
#page-home.active #heroTitle,
#page-home.active .hero-quote,
#page-home.active .feature-card {
    animation: homeRise 420ms linear both;
}

#page-home.active .hero-badge   { animation-delay: 0ms;   }
#page-home.active #heroTitle    { animation-delay: 50ms;  }
#page-home.active .hero-quote   { animation-delay: 100ms; }
#page-home.active .features-grid .feature-card:nth-child(1) { animation-delay: 160ms; }
#page-home.active .features-grid .feature-card:nth-child(2) { animation-delay: 210ms; }
#page-home.active .features-grid .feature-card:nth-child(3) { animation-delay: 260ms; }
#page-home.active .features-grid .feature-card:nth-child(4) { animation-delay: 310ms; }

/* ── 6. 视差：scroll-driven，合成器驱动、主线程零参与 ──
   taste §5.D 硬性禁止 window.addEventListener('scroll')；
   CSS scroll-driven animations 是它点名的允许方案之一。 */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        #page-home .home-liquid-field .blob-a {
            animation: lgDriftA linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 32rem;
        }
        #page-home .home-liquid-field .blob-b {
            animation: lgDriftB linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 32rem;
        }
    }
}

/* 只用 transform，绝不碰 top/left */
@keyframes lgDriftA { to { transform: translate3d(0, var(--lg-drift-a), 0) scale(1.06); } }
@keyframes lgDriftB { to { transform: translate3d(0, var(--lg-drift-b), 0) scale(0.96); } }

/* ── 7. 窄屏：塌成严格单列（taste §7 MOBILE OVERRIDE）──
   同时修掉一个真实缺陷：原来 390px 上两列各约 180px，
   中文副标题被折成「阅读理 解 · 完形填 空」这种断在词中间的重排。 */
@media (max-width: 47.9375rem) {
    /* 居中已经提到基础规则里了（全站一条中轴），这里只收纵向留白 */
    #page-home .hero {
        max-width: none;
        padding-block: clamp(1rem, 3vh, 2rem) var(--sp-10);
    }
    #page-home .hero-quote { margin-inline: auto; }
    /* 语言条：不加 nowrap 时「阿拉伯语」会在 320 上被拆成「阿拉伯 / 语」。
       之前还配了一档 ≤350px 的紧内边距（.625rem）才挤得下，那是被旗帜
       字形撑出来的；旗帜去掉后实测 16px 内边距下整条 262px，320 视口
       left 29 / right 291，不溢出，那档覆盖已删。 */
    #page-home .lang-btn { white-space: nowrap; }
    #page-home .features-grid { grid-template-columns: 1fr; }
    #page-home .feature-card { padding: var(--sp-4); }
    /* 390 上正文可用宽约 342px：15px 字号下 23 字的引言差 3px 放不下，
       收到 .85rem（13.6px，仍在中文可读下限之上）就能保住「一行内容一行出处」。
       更长的（41 字）物理上不可能单行，允许折行。 */
    #page-home .hero-quote .hero-quote-text { font-size: .85rem; }
    /* 标题字号不在这里写死 —— js/hero-fit.js 按可用宽反推，
       保证任何宽度都单行且不溢出，比按 vw 猜一档要可靠。 */
}

/* ── 8. 降级 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #page-home.active .hero-badge,
    #page-home.active #heroTitle,
    #page-home.active .hero-quote,
    #page-home.active .feature-card { animation: none; }
    #page-home .feature-card,
    #page-home .feature-card::after,
    #page-home .lang-btn { transition: none; }
    #page-home .feature-card:hover,
    #page-home .feature-card:active { transform: none; }
    .home-liquid-field > span { will-change: auto; }
}

/* 无 backdrop-filter 的旧 WebView：折射出不来，退成一层极淡的实色底。
   仍然不写边框 —— 「背景不是卡片」这条在降级路径里也要成立。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .home-glass { background: rgba(238, 243, 238, 0.72); }
    body.dark .home-glass { background: rgba(24, 28, 24, 0.72); }
    .home-liquid-field > span { opacity: 0.22; }
    #page-home .feature-card { background: #fffdf9; }
}