/* ============================================================
   首页「公式巡展」（浮动公式卡）
   ------------------------------------------------------------
   · 版面（桌面 >768px）：hero 四角各一张，共 4 张，**任何桌面尺寸都不整组隐藏**
           （2026-09-19 修「电脑端看不到公式卡」）：旧规则 `max-width:1120px` 与
           `max-height:660px` 把整组 display:none，于是 1366×768 笔记本（内容区
           约 657px 高）与 1024 宽的窗口一张都看不到；`max-height:840px` 又把下排
           两张藏掉，1536×824 之类的矮屏只剩顶排。现在只缩不藏。
   · 四角刻意**不对称**：左右内缩量、上下抬落量两两不同，四张的宽度、倾角、
           漂浮幅度与周期也各不一样 —— 看起来像随手贴上去的，不是一圈整齐的框。
   · 卡片默认半透明（.62），悬停/聚焦才亮起 —— 略窄时边缘靠近正文也读作背景装饰。
   · 版面（手机 ≤768px）：四角摆不下 —— 改成 hero 内容**下方**竖排 3 张通栏卡
           （in-flow，靠 order 排到内容之后）。
   · 轮换：n 个槽位各自错峰换公式（js/formula-cards.js 每 3s 换一张），
           任意时刻只有一张卡在切换 —— 四张不会一起翻。
   · 依赖同源 KaTeX（/public/libs/katex），不走 CDN，避免 CDN 卡住整页。
   ============================================================ */

/* ---------- 舞台与卡位 ---------- */
.formula-stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.fc-slot {
    position: absolute;
    /* 宽度三段（min / 当前 / max）走自定义属性，好让每个角单独改中间那段做「错位」，
       同时保留响应式只改 min/max 的能力（自定义属性会继承，两边互不覆盖） */
    --fc-wmin: 200px; --fc-wmid: 19vw; --fc-wmax: 288px;
    width: clamp(var(--fc-wmin), var(--fc-wmid), var(--fc-wmax));
    margin: 0; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* 四角各自的漂浮参数（倾角 / 幅度 / 周期），值在下面 .fc-slot-N 里各自设定 */
    --fc-tilt: -0.6deg;
    --fc-rise: -14px;
    --fc-dur: 11s;
    animation: fcFloat var(--fc-dur) ease-in-out infinite;
}
/* 上左 / 下左 / 上右 / 下右 —— 用 clamp 锁在「顶栏以下、内容列以外」的角带上。
   ⚠️ 四条的内缩量**故意各不相同**（左上最贴边、左下更往里；右上比左上低一截、
   右下最靠里），宽度/倾角/漂浮幅度也不一样 —— 四角对称会显得像一圈死板的框。 */
.fc-slot-0 {                                   /* 左上：最贴边，微微左倾 */
    top: clamp(62px, 7.6vh, 104px); left: clamp(10px, 2.2vw, 42px);
    --fc-tilt: -1.5deg; --fc-rise: -13px; --fc-dur: 10.5s;
    animation-delay: -0.6s;
}
.fc-slot-1 {                                   /* 左下：比左上更往里、更贴底，卡略窄 */
    bottom: clamp(54px, 7vh, 96px); left: clamp(26px, 4.4vw, 84px);
    --fc-wmid: 18.3vw;
    --fc-tilt: 1.1deg; --fc-rise: -17px; --fc-dur: 13s;
    animation-delay: -3.4s;
}
.fc-slot-2 {                                   /* 右上：比左上低一截、比右下贴边，右倾最多 */
    top: clamp(86px, 11.4vh, 152px); right: clamp(12px, 2.6vw, 50px);
    --fc-wmid: 19.7vw;
    --fc-tilt: 1.8deg; --fc-rise: -10px; --fc-dur: 12s;
    animation-delay: -6.2s;
}
.fc-slot-3 {                                   /* 右下：四张里最靠里，卡最窄 */
    bottom: clamp(48px, 6.4vh, 88px); right: clamp(30px, 5.8vw, 108px);
    --fc-wmid: 18vw;
    --fc-tilt: -0.9deg; --fc-rise: -15px; --fc-dur: 14.5s;
    animation-delay: -8.8s;
}

/* 倾角与幅度都从自定义属性取，四个角共用同一套 keyframes（名字仍是 fcFloat） */
@keyframes fcFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--fc-tilt)); }
    50%      { transform: translate3d(0, var(--fc-rise), 0) rotate(calc(var(--fc-tilt) * -1)); }
}
/* 暂停巡展时连漂浮也停住，画面彻底静止 */
.formula-stage.is-paused .fc-slot { animation-play-state: paused; }

/* ---------- 卡片本体（高度固定，换公式不会跳动） ---------- */
.fc-body {
    position: relative;
    display: flex; flex-direction: column;
    height: 182px; padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0.62;
    transition: opacity .45s ease, transform .3s ease, border-color .3s ease,
                background .3s ease, box-shadow .3s ease;
}

.fc-top { display: flex; align-items: baseline; gap: 8px; }
.fc-name {
    flex: 0 1 auto; min-width: 0;
    font-size: 13px; font-weight: 600; letter-spacing: .5px;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-tag {
    flex: 0 0 auto; margin-left: auto;
    font-size: 10px; letter-spacing: .5px;
    color: rgba(202, 240, 248, 0.5);
    white-space: nowrap;
}

/* 公式区：nowrap 让 KaTeX 保持自然宽度，再由 fitFormula() 等比缩放到刚好放下 */
.fc-formula {
    flex: 1; min-height: 0; margin-top: 7px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; font-size: 21px; line-height: 1;
}
.fc-formula-inner {
    flex: 0 0 auto; white-space: nowrap;
    transform-origin: center center;
    color: rgba(255, 213, 79, 0.98);
}
.fc-plain {
    font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
    font-style: italic; font-size: 15px;
}

.fc-foot {
    display: flex; align-items: center; gap: 8px; margin-top: 7px;
    font-size: 10px; letter-spacing: .3px;
    color: rgba(255, 255, 255, 0.42);
}
.fc-en { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-hint {
    flex: 0 0 auto; white-space: nowrap;
    color: rgba(72, 202, 228, 0.9); opacity: 0; transition: opacity .3s ease;
}

/* ---------- 悬停 / 键盘聚焦：暂停巡展 + 浮起 + 点亮 ---------- */
/* :hover 只给真有悬停能力的设备：触摸屏上点一下 hover 会一直粘着，
   卡片永远停在「亮起浮起」态，看起来就像卡死了（JS 侧同理不绑 mouseenter）。 */
@media (hover: hover) {
    .fc-slot:hover .fc-body {
        opacity: 1; transform: translateY(-4px);
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(72, 202, 228, 0.45);
        box-shadow: 0 14px 40px rgba(0, 114, 182, 0.35);
    }
    .fc-slot:hover .fc-hint { opacity: 1; }
}
.fc-slot:focus-visible .fc-body {
    opacity: 1; transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(72, 202, 228, 0.45);
    box-shadow: 0 14px 40px rgba(0, 114, 182, 0.35);
}
.fc-slot:focus-visible { outline: none; }
.fc-slot:focus-visible .fc-body { outline: 2px solid rgba(72, 202, 228, 0.75); outline-offset: 2px; }
.fc-slot:focus-visible .fc-hint { opacity: 1; }

/* 换公式的淡出淡入（放在 .fc-body 上，与槽位的漂浮 transform 互不干扰） */
.fc-slot.is-swap .fc-body { opacity: 0; transform: translateY(-10px); }

/* ---------- hero 里的两个小按钮（暂停巡展 / 全部公式） ---------- */
.formula-controls {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 10px; margin-top: 18px;
}
.fc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px; letter-spacing: .5px; line-height: 1;
    cursor: pointer; transition: color .25s ease, border-color .25s ease,
                                background .25s ease, transform .25s ease;
}
.fc-btn i { font-size: 11px; }
.fc-btn:hover {
    color: #ffffff; border-color: rgba(72, 202, 228, 0.5);
    background: rgba(72, 202, 228, 0.12); transform: translateY(-1px);
}
.fc-btn:focus-visible { outline: 2px solid rgba(72, 202, 228, 0.75); outline-offset: 2px; }

/* ---------- 弹层（详情 / 全部公式），注入 body，不受 hero 的 overflow 裁切 ---------- */
.fc-modal {
    position: fixed; inset: 0; z-index: 3100;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.fc-modal[hidden] { display: none !important; }
.fc-modal.fc-modal-detail { z-index: 3200; }
.fc-mask {
    position: absolute; inset: 0;
    background: rgba(4, 10, 26, 0.72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fc-panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
    padding: 26px 26px 22px;
    background: linear-gradient(160deg, rgba(10, 32, 74, 0.98), rgba(6, 20, 48, 0.98));
    border: 1px solid rgba(72, 202, 228, 0.25);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    color: #ffffff; text-align: left;
    animation: fcPop .28s cubic-bezier(.2, .8, .3, 1.1);
}
/* 深色滚动条（与 home-dashboard.css 同口径，2026-10-19）：弹层内容超长时不出现灰白滚动条 */
.fc-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(104, 186, 238, .42) transparent;
}
.fc-panel::-webkit-scrollbar { width: 9px; height: 9px; }
.fc-panel::-webkit-scrollbar-track { background: transparent; }
.fc-panel::-webkit-scrollbar-thumb {
    border: 2px solid transparent; border-radius: 999px;
    background-color: rgba(104, 186, 238, .42); background-clip: padding-box;
}
.fc-panel::-webkit-scrollbar-thumb:hover { background-color: rgba(126, 228, 245, .68); }
@keyframes fcPop {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fc-x {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7); font-size: 14px; line-height: 1; cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.fc-x:hover { color: #ffffff; background: rgba(72, 202, 228, 0.18); border-color: rgba(72, 202, 228, 0.5); }

.fc-detail-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fc-pill {
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; letter-spacing: .5px;
    color: rgba(202, 240, 248, 0.95);
    background: rgba(72, 202, 228, 0.14);
    border: 1px solid rgba(72, 202, 228, 0.3);
}
.fc-pill-dim { color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }

.fc-detail-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.fc-detail-en { font-size: 12px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.45); }

.fc-detail-formula {
    margin: 18px 0 16px; padding: 18px 14px;
    min-height: 84px;
    display: flex; align-items: center; justify-content: center;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 21px;
    color: rgba(255, 213, 79, 0.98);
}
.fc-detail-formula .katex-display { margin: 0; }

.fc-detail-desc { margin: 0; font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, 0.76); }

.fc-detail-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fc-detail-count { font-size: 12px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }

/* ---------- 「全部公式」面板 ---------- */
.fc-panel-all { max-width: 960px; padding: 24px; }
.fc-all-head {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding-right: 36px; margin-bottom: 18px;
}
.fc-all-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.fc-all-sub { font-size: 12px; letter-spacing: .5px; color: rgba(255, 255, 255, 0.45); }

.fc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fc-grid-item {
    display: flex; flex-direction: column; gap: 8px;
    height: 118px; padding: 12px 13px;
    text-align: left; cursor: pointer;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font: inherit; color: inherit;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.fc-grid-item:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(72, 202, 228, 0.45);
    transform: translateY(-2px);
}
.fc-grid-item:focus-visible { outline: 2px solid rgba(72, 202, 228, 0.75); outline-offset: 2px; }
.fc-grid-top { display: flex; align-items: baseline; gap: 8px; }
.fc-grid-name { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-grid-tag { margin-left: auto; font-size: 10px; color: rgba(202, 240, 248, 0.5); white-space: nowrap; }
.fc-grid-formula {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    overflow: hidden; font-size: 17px; line-height: 1;
}
.fc-grid-formula-inner { flex: 0 0 auto; white-space: nowrap; transform-origin: center center; color: rgba(255, 213, 79, 0.98); }

/* ---------- 响应式：**只缩不藏**（桌面任何尺寸都保留四张角卡） ---------- */
/* ⚠️ 这里不允许再出现整组 `display:none` —— 2026-09-19 删掉了旧的三条
   （`max-width:1120px` 与 `max-height:660px` 藏整组、`max-height:840px` 藏下排两张），
   它们正是「电脑端首页看不到公式卡」的根因：1366×768 笔记本（内容区约 657px 高）
   与 1024 宽的窗口一张都看不到，1536×824 之类的矮屏也只剩顶排两张。
   768px 这个断点必须与 js/formula-cards.js 的 MOBILE_QUERY 逐字一致，否则会出现
   「JS 建了 4 个槽位、CSS 按 3 个排」这类半对齐状态。 */
@media (max-width: 1280px) {
    .fc-slot { --fc-wmin: 184px; --fc-wmax: 256px; }
    .fc-body { height: 166px; padding: 12px 14px; }
    .fc-name { font-size: 12px; }
    .fc-formula { font-size: 18px; }
}
/* 再窄一档（769~1040px 的窄窗口，中间内容列两侧的角带也窄了）：卡跟着再小一点，
   免得压到标题与按钮。**不是藏掉** —— 窄窗口一样能看到四角四张。 */
@media (max-width: 1040px) {
    .fc-slot { --fc-wmin: 158px; --fc-wmax: 208px; }
    .fc-body { height: 152px; padding: 11px 13px; }
    .fc-name { font-size: 11.5px; }
    .fc-formula { font-size: 16px; }
}

@media (max-width: 600px) {
    .fc-panel { padding: 22px 18px 18px; }
    .fc-detail-title { font-size: 19px; }
    .fc-modal { padding: 14px; }
    .fc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- 手机（≤768px）：四角摆不下 → 改成 hero 内容下方竖排 3 张通栏卡 ----------
   卡片数量由 js/formula-cards.js 按同一个断点决定（手机 3 张 / 桌面 4 张），
   这里只负责把它们从「绝对定位的四角」改成「流内的竖排列表」。 */
@media (max-width: 768px) {
    /* 排到 .hero-content 之后：hero 是 column flex，只有 formula-stage 与 hero-content
       两个流内子元素（canvas 与 scroll-indicator 都是 absolute，不参与排序），
       所以把本块 order 设成 1 就够，不用动 hero-content。 */
    .formula-stage {
        position: relative; inset: auto;
        order: 1; z-index: 3;
        display: flex; flex-direction: column; gap: 12px;
        width: 100%; max-width: 430px;
        margin: 32px auto 58px; padding: 0 18px;
    }
    /* 顶/左/右/下 全部 auto —— 覆盖掉四角那套 clamp() 定位 */
    .fc-slot {
        position: relative;
        top: auto; right: auto; bottom: auto; left: auto;
        width: 100%;
        animation: fcFloatMobile 9s ease-in-out infinite;
    }
    .fc-slot-0 { animation-delay: -0.6s; }
    .fc-slot-1 { animation-delay: -3.4s; }
    .fc-slot-2 { animation-delay: -6.2s; }

    .fc-body { height: 108px; padding: 12px 14px; border-radius: 12px; }
    .fc-name { font-size: 12.5px; }
    .fc-formula { font-size: 19px; margin-top: 5px; }
    .fc-foot { margin-top: 5px; }
    /* 触摸端没有悬停，这行提示永远不会亮，留着只是白占一行高度 */
    .fc-hint { display: none; }
}

/* 手机上的漂浮幅度比桌面小（-8px vs -14px）：卡是竖排的，幅度大了会互相蹭 */
@keyframes fcFloatMobile {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.35deg); }
    50%      { transform: translate3d(0, -8px, 0) rotate(0.35deg); }
}

/* 尊重「减少动态效果」：不漂浮、不淡入淡出（JS 里同时不自动轮换） */
@media (prefers-reduced-motion: reduce) {
    .fc-slot { animation: none !important; }
    .fc-body { transition: none; }
    .fc-panel { animation: none; }
}