/* ============================================================
   dqxd-fx — 鼠标跟随动效（2026-09-16）
   主题："印刷光泽"——卡片表面随鼠标透出金色油墨光泽并微微倾斜，
        首页 Hero 有一道惯性跟随的金色光晕。
   约束：贴合设计系统（金 #B08D57 / 靛蓝 #1E40AF）；仅 transform/opacity；
        触屏与 prefers-reduced-motion 下完全不启用；不覆盖原有点击行为。
   挂载：Home.php（首页）与 InnerShell.php（内页）在主样式之后引入。
   ============================================================ */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    /* ---- 卡片印刷光泽：柔光跟随鼠标位置 ---- */
    .fx-card { position: relative; }
    .fx-card::after {
        content: "";
        position: absolute; inset: 0;
        border-radius: inherit;
        background: radial-gradient(340px circle at var(--fx-x, 50%) var(--fx-y, 50%),
            rgba(176, 141, 87, .16), rgba(30, 64, 175, .05) 45%, transparent 70%);
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
        z-index: 3;
    }
    .fx-card:hover::after { opacity: 1; }

    /* ---- 微倾斜：与原卡片 hover 位移合并（fx.js 写入 --fx-rx/--fx-ry） ---- */
    .fx-tilt { transition: transform .18s ease-out; will-change: transform; }
    .product-card.fx-tilt:hover,
    .news-card.fx-tilt:hover {
        transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateY(-6px);
    }
    .adv-card.fx-tilt:hover,
    .lh-cusine-item.fx-tilt:hover,
    .met-news-list li.fx-tilt:hover {
        transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateY(-3px);
    }
    .fx-tilt:hover { transition-duration: .05s; } /* 跟随更跟手，离开时 0.18s 平滑复位 */

    /* ---- Hero 金色光晕：fx.js 注入 .fx-hero-glow，rAF 惯性跟随 ----
       z-index:1 —— 位于 hero 背景/分片之上、白色文案（z-index:3）之下 */
    .fx-hero-glow {
        position: absolute;
        width: 640px; height: 640px;
        left: 0; top: 0;
        margin: -320px 0 0 -320px;
        background: radial-gradient(circle,
            rgba(176, 141, 87, .10) 0%,
            rgba(176, 141, 87, .045) 40%,
            transparent 68%);
        pointer-events: none;
        z-index: 1;
        opacity: 0;
        transition: opacity .5s ease;
        will-change: transform;
    }
    .hero:hover .fx-hero-glow { opacity: 1; }
}