/* ═══════════════════════════════════════════════════════════════════════════
   jxphotos · 首页版式层（Apple/iOS 风格 + 科技感）
   ───────────────────────────────────────────────────────────────────────────
   作用域
     · 全部规则以 .jx-home / .jx-metric / .jx-home-cat 起头，只作用于首页
       （app/Views/home/index.php），其它页面不受影响。
     · 在 app.css 之后加载（见 app/Views/layouts/main.php），
       不依赖 ios-theme.css，因此 APP_UI_THEME=classic 时同样生效。

   结构
     1. 首屏：整幅轮播 → 标题与「搜索 / 标签」左右双栏；底边渐隐，不留硬接缝
     2. 数据卡：4 张，用负外边距压在首屏下沿
     3. 分类卡：3 张正方形卡片，与数据卡共用同一套表面 / 入场 / 流光 / 悬浮动效
     4. 纸张区块：灰底上一叠白色 .jx-sheet
     5. 图片卡：每个区块的首张做大（参考 xzphotos.net 的 type-grid 主位卡）

   令牌
     只用 app.css / ios-theme.css 已定义的设计令牌，并给出浅色兜底值；
     深浅色主题都能正常着色。
     动效：入场错峰淡入 + 数字滚动（JS）+ 顶部流光 + 悬浮抬升 + 指针光晕
     （JS 跟随指针，无 JS 时退化为悬浮时卡片顶部的一团静态光晕），
     全部在 prefers-reduced-motion 下降级。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 首屏 ────────────────────────────────────────────────────────────── */
.jx-home-hero {
    padding: 0 0 4.5rem;
    /* 底边不再画分隔线，也不让首屏底色在这里突然收边：
       数据卡带负外边距压在首屏下沿，如果底色是硬边界，
       卡片之间的缝隙里就会露出一道横线（深色下尤其明显）。
       所以最后 9rem 由首屏底色渐隐为页面底色，接缝自然消失。 */
    border-bottom: 0;
    background-color: transparent;
    background-image:
        radial-gradient(130% 130% at 8% 0%,
            var(--hero-accent-glow, transparent) 0%, transparent 60%),
        linear-gradient(180deg,
            var(--hero-bg, #ffffff) 0%,
            var(--hero-bg, #ffffff) calc(100% - 9rem),
            var(--bg, #ffffff) 100%);
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .jx-home-hero {
        padding-bottom: 5.5rem;
    }
}

.jx-home-hero .jx-carousel {
    padding: 1.25rem 0 0;
}

@media (min-width: 768px) {
    .jx-home-hero .jx-carousel {
        padding-top: 1.75rem;
    }
}

/* 首页首屏轮播：按原图比例完整出图（不裁切、不变形）
   现有 5 张轮播原图实测为 5600x3884 / 5566x3859 / 3240x2246 / 5596x3880 /
   4689x3251，比例都在 1.442 上下，所以统一按 1442:1000 出框：
   · .jx-carousel__track 原来是 21:6（≈3.5:1），配 object-fit: cover 会裁掉
     约 6 成画面高度——这就是「照片显示不完整」的直接原因；
   · 出框比例与照片一致，再配 contain，既不裁切也不会出现侧边留白。
   尺寸：桌面（≥1024px）照片排在首屏右侧那一栏（见下面 __split 的网格），
   宽度由栏宽决定（1396px 内容宽时约 690px、高约 478px），不再铺满整幅；
   手机/平板仍是照片在上、文字在下的单列，宽度=内容宽，随手机会自动缩。 */
.jx-home-hero .jx-carousel__wrap {
    width: 100%;
}

.jx-home-hero .jx-carousel__track {
    aspect-ratio: 1442 / 1000;
    min-height: 0;
}

.jx-home-hero .jx-carousel__img {
    object-fit: contain;
}

/* 切换效果：只做淡入淡出，中途不再闪一下灰底
   .jx-carousel__slide 原来是 opacity 与 visibility 同时 0.45s 过渡；
   visibility 是离散属性，过渡途中就会提前切成 hidden，正在淡出的那张
   会在半透明状态下先消失，露出 .jx-carousel__wrap 的灰底（--surface-secondary）。
   这里把 visibility 的过渡改成「时长 0 + 延迟一个淡出时长」，即等这一张
   彻底淡完再隐藏；.is-active 那张则立即恢复显示，接进来淡入。
   两张叠着互相交叉淡化，切换看起来是连续的。 */
.jx-home .jx-carousel__slide {
    transition: opacity 0.7s var(--ease-default), visibility 0s linear 0.7s;
}

.jx-home .jx-carousel__slide.is-active {
    transition: opacity 0.7s var(--ease-default), visibility 0s linear 0s;
}

/* 轮播细节（只作用于首页）
   1) 圆点视觉尺寸不变（6px），但用一层透明伪元素把可点区域撑到约 18px，
      手指更容易按中；伪元素属于按钮自身，点击照旧落在该圆点上。
   2) 字幕底部留白由 1rem 加到 2.25rem：圆点行占底部 0.75–1.125rem，
      原留白下字幕最后一行会和圆点挤在一起。 */
.jx-home .jx-carousel__dot {
    position: relative;
}

.jx-home .jx-carousel__dot::before {
    content: "";
    position: absolute;
    inset: -0.375rem -0.25rem;
}

.jx-home .jx-carousel__caption {
    padding-bottom: 2.25rem;
}

.jx-home-hero__split {
    display: grid;
    gap: 1.5rem;
    padding-top: 1.75rem;
}

/* 桌面首屏改成左右两栏：左栏标题 + 搜索/标签，右栏轮播照片。
   · 照片不再铺满整幅、也不悬在页面中间，而是紧挨着文字排在一侧；
   · 两栏按 1fr : 1.05fr 分，内容宽 1396px 时照片约 690px 宽（高约 478px），
     比通栏小得多，整行高度也不再顶掉下方内容；
   · 搜索框、标签跟标题一样左对齐（原来是右对齐的，那会儿它们独占右栏）；
   · 万一没有轮播图（$banners 为空），只留左栏、文字占满整行。 */
@media (min-width: 1024px) {
    .jx-home-hero__split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        grid-template-areas:
            "intro media"
            "tools media";
        align-items: start;
        column-gap: 3rem;
        row-gap: 1.25rem;
        padding-top: 2.25rem;
    }

    .jx-home-hero__split:not(:has(.jx-home-hero__media)) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "tools";
    }

    .jx-home-hero__intro { grid-area: intro; }
    .jx-home-hero__tools { grid-area: tools; }

    .jx-home-hero .jx-home-hero__media {
        grid-area: media;
        align-self: center;
        min-width: 0;
        padding: 0;
    }
}

.jx-home-hero__intro {
    min-width: 0;
}

.jx-home-hero__intro .jx-hero__desc {
    margin-bottom: 0;
}

.jx-home-hero__tools {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

.jx-home-hero__tools .jx-hero__search {
    max-width: 30rem;
}

.jx-home-hero__tools .jx-hero__tags {
    margin-top: 0;
}

/* 桌面端搜索框与标签不再靠右对齐：它们现在在左栏、跟在标题下面，
   靠右会把它们推到紧贴照片的位置，和标题的左边线对不齐。 */

/* 飞机百科标签（原为视图内联样式，收敛到这里） */
.jx-hero__tag--wiki {
    background: var(--aviation-soft, rgba(51, 126, 169, 0.12));
    color: var(--aviation, #337ea9);
    border-color: color-mix(in srgb, var(--aviation, #337ea9) 30%, transparent);
}

.jx-hero__tag--wiki:hover {
    background: var(--aviation-soft, rgba(51, 126, 169, 0.12));
    color: var(--aviation, #337ea9);
    border-color: var(--aviation, #337ea9);
}

/* ── 2. 数据卡：压在首屏下沿 ────────────────────────────────────────────── */
.jx-home-metrics {
    position: relative;
    z-index: 3;
    margin-top: -2.75rem;
}

@media (min-width: 768px) {
    .jx-home-metrics {
        margin-top: -3.25rem;
    }
}

.jx-home-metrics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 900px) {
    .jx-home-metrics__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* ── 3. 分类卡：3 张正方形卡片，与数据卡同一套效果 ──────────────────────── */
.jx-home-cats {
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .jx-home-cats {
        margin-top: 2rem;
    }
}

.jx-home-cats__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .jx-home-cats__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* ── 2 + 3 共用：表面、边框、圆角、阴影、入场（两者效果完全一致） ───────── */
.jx-metric,
.jx-home-cat {
    --jx-tile-accent: var(--accent, #2383e2);
    --jx-tile-soft: var(--accent-soft, rgba(35, 131, 226, 0.12));
    position: relative;
    min-width: 0;
    overflow: hidden;
    background-color: var(--surface-primary, #ffffff);
    border: 1px solid var(--border, rgba(55, 53, 47, 0.12));
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-md, 0 2px 10px rgba(0, 0, 0, 0.05));
    transition:
        transform var(--duration-normal, 0.25s) var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--duration-normal, 0.25s) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
        border-color var(--duration-normal, 0.25s) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
    animation: jx-metric-in 0.55s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)) both;
    animation-delay: calc(var(--jx-tile-i, 0) * 90ms + 60ms);
}

/* 错峰入场的序号由位置决定，避免写内联样式 */
.jx-home-metrics__grid > :nth-child(1),
.jx-home-cats__grid > :nth-child(1) { --jx-tile-i: 0; }
.jx-home-metrics__grid > :nth-child(2),
.jx-home-cats__grid > :nth-child(2) { --jx-tile-i: 1; }
.jx-home-metrics__grid > :nth-child(3),
.jx-home-cats__grid > :nth-child(3) { --jx-tile-i: 2; }
.jx-home-metrics__grid > :nth-child(4) { --jx-tile-i: 3; }

.jx-metric--pending {
    --jx-tile-accent: var(--color-amber, #cb912f);
    --jx-tile-soft: var(--warning-bg, rgba(203, 145, 47, 0.12));
}

.jx-metric--live {
    --jx-tile-accent: var(--color-emerald, #0f7b6c);
    --jx-tile-soft: var(--success-bg, rgba(15, 123, 108, 0.1));
}

.jx-metric--photos {
    --jx-tile-accent: var(--accent, #2383e2);
    --jx-tile-soft: var(--accent-soft, rgba(35, 131, 226, 0.12));
}

.jx-metric--users {
    --jx-tile-accent: var(--featured, #9065b0);
    --jx-tile-soft: var(--featured-soft, rgba(144, 101, 176, 0.12));
}

/* 分类卡各自的强调色：航空 / 铁路 / 机型图鉴 */
.jx-home-cat--aviation {
    --jx-tile-accent: var(--aviation, #337ea9);
    --jx-tile-soft: var(--aviation-soft, rgba(51, 126, 169, 0.12));
}

.jx-home-cat--railway {
    --jx-tile-accent: var(--rail, #d9730d);
    --jx-tile-soft: var(--rail-soft, rgba(217, 115, 13, 0.12));
}

.jx-home-cat--wiki {
    --jx-tile-accent: var(--featured, #9065b0);
    --jx-tile-soft: var(--featured-soft, rgba(144, 101, 176, 0.12));
}

/* 深色下首屏与卡片同为 --surface-primary，卡片改用次一级表面（iOS 分组观感：
   黑底 → 1c1c1e 首屏 → 2c2c2e 浮起卡片）。只改底色，别用 background 简写，
   否则会把悬浮光晕那层 background-image 一起清掉。 */
[data-theme="dark"] .jx-metric,
[data-theme="dark"] .jx-home-cat {
    background-color: var(--surface-secondary, #2c2c2e);
}

/* 顶部强调条：缓慢流动的流光 */
.jx-metric::before,
.jx-home-cat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background-image: linear-gradient(90deg,
        transparent 0%, var(--jx-tile-accent) 50%, transparent 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: jx-metric-flow 6s linear infinite;
    animation-delay: calc(var(--jx-tile-i, 0) * 420ms);
}

/* 悬浮掠过的高光（纯装饰） */
.jx-metric::after,
.jx-home-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(105deg,
        transparent 36%, var(--jx-tile-soft) 50%, transparent 64%);
    transform: translateX(-115%);
    transition: transform 0.75s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.jx-metric:hover,
.jx-home-cat:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--jx-tile-accent) 38%, var(--border, rgba(55, 53, 47, 0.12)));
    box-shadow: var(--shadow-lg, 0 12px 32px -14px rgba(0, 0, 0, 0.2));
    /* 指针光晕：位置由 home-metrics.js 跟随光标写入 --jx-glow-x / --jx-glow-y，
       没有 JS 时退回卡片顶部中央，同样是「有光效」。 */
    background-image: radial-gradient(10rem 10rem at var(--jx-glow-x, 50%) var(--jx-glow-y, 0%),
        var(--jx-tile-soft) 0%, transparent 68%);
}

.jx-metric:hover::after,
.jx-home-cat:hover::after {
    transform: translateX(115%);
}

/* ── 数据卡内部 ────────────────────────────────────────────────────────── */
.jx-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1rem;
}

.jx-metric__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--jx-tile-soft);
    color: var(--jx-tile-accent);
    transition: transform 0.35s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.jx-metric__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.jx-metric:hover .jx-metric__icon {
    transform: translateY(-2px) scale(1.06) rotate(-4deg);
}

.jx-metric__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.jx-metric__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text, #37352f);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.jx-metric__value--live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.jx-metric__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, #787774);
}

.jx-metric__hint {
    font-size: 0.6875rem;
    color: var(--text-muted, #9b9a97);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 值守审核：在线脉冲点 */
.jx-metric__live-dot {
    position: relative;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--text-muted, #9b9a97);
}

.jx-metric__live-dot.is-on {
    background: var(--color-emerald, #0f7b6c);
}

.jx-metric__live-dot.is-on::after {
    content: "";
    position: absolute;
    inset: -0.2rem;
    border-radius: 50%;
    border: 2px solid var(--color-emerald, #0f7b6c);
    animation: jx-live-ring 2s ease-out infinite;
}

/* 迷你柱状装饰（科技感，纯装饰） */
.jx-metric__spark {
    display: none;
}

@media (min-width: 900px) {
    .jx-metric__spark {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        flex-shrink: 0;
        height: 1.75rem;
        margin-left: auto;
        padding-left: 0.5rem;
    }

    .jx-metric__spark i {
        display: block;
        width: 3px;
        height: var(--jx-h, 60%);
        border-radius: 2px;
        background: var(--jx-tile-accent);
        animation: jx-spark 2.4s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)) infinite alternate;
        animation-delay: calc(var(--jx-i, 0) * 140ms);
    }

    .jx-metric__spark i:nth-child(1) { --jx-h: 38%; --jx-i: 0; }
    .jx-metric__spark i:nth-child(2) { --jx-h: 64%; --jx-i: 1; }
    .jx-metric__spark i:nth-child(3) { --jx-h: 46%; --jx-i: 2; }
    .jx-metric__spark i:nth-child(4) { --jx-h: 82%; --jx-i: 3; }
    .jx-metric__spark i:nth-child(5) { --jx-h: 56%; --jx-i: 4; }
}

@media (max-width: 640px) {
    .jx-metric {
        gap: 0.625rem;
        padding: 0.875rem 0.75rem;
        border-radius: var(--radius-lg, 12px);
    }

    .jx-metric__icon {
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 10px;
    }

    .jx-metric__icon svg {
        width: 1.0625rem;
        height: 1.0625rem;
    }

    .jx-metric__value {
        font-size: 1.3125rem;
    }

    .jx-metric__label {
        font-size: 0.75rem;
    }
}

/* ── 分类卡内部：正方形，图标 → 分类 → 标题 → 说明 → 行动 ─────────────────
   尺码分两档：小屏（含 768–1023px 的三列）用紧凑档，保证正方形里装得下全部文字；
   ≥1024px 三列每格 ≥316px，再放大到舒展档。 */
.jx-home-cat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    aspect-ratio: 1 / 1;
    padding: 1rem;
    border-radius: var(--radius-lg, 12px);
    color: var(--text, #37352f);
}

.jx-home-cat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 10px;
    background: var(--jx-tile-soft);
    color: var(--jx-tile-accent);
    transition: transform 0.35s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.jx-home-cat__icon svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

.jx-home-cat:hover .jx-home-cat__icon {
    transform: translateY(-2px) scale(1.06) rotate(-4deg);
}

.jx-home-cat__eyebrow {
    margin-top: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jx-tile-accent);
}

.jx-home-cat__title {
    margin-top: 0.1875rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.25;
    color: var(--text, #37352f);
}

.jx-home-cat__desc {
    margin-top: 0.3125rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-secondary, #787774);
}

.jx-home-cat__arrow {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--jx-tile-accent);
    transition: transform 0.3s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.jx-home-cat:hover .jx-home-cat__arrow {
    transform: translateX(3px);
}

@media (min-width: 1024px) {
    .jx-home-cat {
        padding: 1.25rem;
        border-radius: var(--radius-xl, 16px);
    }

    .jx-home-cat__icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 12px;
    }

    .jx-home-cat__icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .jx-home-cat__eyebrow {
        margin-top: 0.875rem;
    }

    .jx-home-cat__title {
        font-size: 1.25rem;
    }

    .jx-home-cat__desc {
        margin-top: 0.375rem;
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .jx-home-cat__arrow {
        padding-top: 0.75rem;
        font-size: 0.8125rem;
    }
}

/* ── 4. 纸张区块 ────────────────────────────────────────────────────────── */
.jx-home-stack {
    display: grid;
    gap: 1rem;
    padding: 1.75rem 0 3rem;
}

@media (min-width: 768px) {
    .jx-home-stack {
        gap: 1.25rem;
        padding-top: 2.25rem;
    }
}

.jx-sheet {
    padding: 1.25rem 1.25rem 1.5rem;
    background: var(--surface-primary, #ffffff);
    border: 1px solid var(--border, rgba(55, 53, 47, 0.12));
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(55, 53, 47, 0.04));
}

@media (min-width: 768px) {
    .jx-sheet {
        padding: 1.5rem 1.75rem 1.75rem;
    }
}

.jx-sheet > .jx-section-head {
    margin-bottom: 1rem;
}

.jx-sheet .jx-photo-grid {
    padding-top: 0.25rem;
    padding-bottom: 0;
}

.jx-sheet .jx-pagination {
    margin-top: 1.5rem;
}

/* ── 5. 图片卡：排布参考 xzphotos.net 的 type-grid ─────────────────────────
   xzphotos 的区块是「2fr 主位大图 + 1fr 小图」，主位大图占两行；
   换算成等宽列就是「首张跨两列两行」。此处只在四列断点（≥1280px）启用：
   首张图占 2×2，图像区随高度拉伸，其余仍是等大小卡，
   后面整行继续按四列排（对应 xzphotos 的 type-grid-row2）。            */
@media (min-width: 1280px) {
    .jx-home .jx-photo-grid > .jx-photo-card:first-child {
        grid-column: span 2;
        grid-row: span 2;
        display: flex;
        flex-direction: column;
    }

    .jx-home .jx-photo-grid > .jx-photo-card:first-child .jx-photo-card__thumb {
        flex: 1;
        /* 取消 4/3，让图像区填满两行高度 */
        aspect-ratio: auto;
        min-height: 11rem;
    }

    .jx-home .jx-photo-grid > .jx-photo-card:first-child .jx-photo-card__title {
        font-size: 1rem;
    }
}

/* 纸张内的双栏分组：左「浏览最多」/ 右「最新新闻」 */
.jx-home-split {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .jx-home-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    .jx-home-split__col + .jx-home-split__col {
        padding-left: 1.5rem;
        border-left: 1px solid var(--border-light, rgba(55, 53, 47, 0.08));
    }
}

.jx-home-split__col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.jx-home-split__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.375rem;
}

.jx-home-subhead {
    font-size: 1rem;
}

.jx-home-more {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent, #2383e2);
    white-space: nowrap;
    transition: color var(--transition, 0.15s ease);
}

.jx-home-more:hover {
    color: var(--accent-hover, #1a6fc0);
}

.jx-home-split .jx-rank-list {
    grid-template-columns: 1fr;
}

@media (min-width: 1280px) {
    .jx-home-split .jx-rank-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── 6. 动效 ────────────────────────────────────────────────────────────── */
@keyframes jx-metric-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes jx-metric-flow {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes jx-spark {
    from { height: 20%; opacity: 0.28; }
    to { height: var(--jx-h, 60%); opacity: 0.65; }
}

@keyframes jx-live-ring {
    0% { transform: scale(0.55); opacity: 0.55; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* ── 7. 减弱动效：只保留静态终态 ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .jx-metric,
    .jx-metric::before,
    .jx-metric::after,
    .jx-metric__icon,
    .jx-metric__live-dot.is-on::after,
    .jx-metric__spark i,
    .jx-home-cat,
    .jx-home-cat::before,
    .jx-home-cat::after,
    .jx-home-cat__icon,
    .jx-home-cat__arrow,
    .jx-home .jx-carousel__slide,
    .jx-home .jx-carousel__slide.is-active {
        animation: none !important;
        transition: none !important;
    }

    .jx-metric:hover,
    .jx-home-cat:hover {
        transform: none;
    }

    .jx-metric:hover::after,
    .jx-home-cat:hover::after {
        transform: translateX(-115%);
    }

    .jx-metric:hover .jx-metric__icon,
    .jx-home-cat:hover .jx-home-cat__icon,
    .jx-home-cat:hover .jx-home-cat__arrow {
        transform: none;
    }
}