@charset "utf-8";
/* ============================================================
   parallax-fx.css － 信裕冷凍食品 圖片滾動互動效果
   搭配 mob/js/parallax-fx.js 使用
   ------------------------------------------------------------
   cover  圖片在原本的框線內上下滑動（照片，會裁切）
   float  整張圖上下浮動（去背圖／示意圖，不裁切）
   bg     背景圖縮圖上下位移（最新消息縮圖）
   ============================================================ */

/*** cover：simpleParallax 會自動在圖片外層產生 .simpleParallax 外框 ***/
/* 注意：.fx-cover 是加在原本就存在的外框上（figure、li…），
   絕對不能動它的 display，否則會蓋掉像 .product-fish-mobile 這種
   只在手機版顯示（display:none）的設定 */
.fx-cover {
    overflow: hidden;
}

.fx-cover .simpleParallax {
    display: block;
    overflow: hidden;
}

.fx-cover img {
    will-change: transform;
}

/*** float：整張圖上下浮動 ***/
/* 加一點延遲，滑動時才會有跟隨的流暢感（與 simpleParallax 的節奏一致） */
.fx-float {
    will-change: transform;
    transform: translate3d(0, var(--fx-y, 0px), 0);
    transition: transform .5s cubic-bezier(0, 0, 0, 1);
}

/*** bg：把背景圖框拉高，留出上下位移的空間 ***/
.fx-bg-clip {
    overflow: hidden;
}

.fx-bg {
    top: -10% !important;
    height: 120% !important;
    will-change: transform;
    transform: translate3d(0, var(--fx-y, 0px), 0);
}

/*** 滑鼠移入時的圖片微放大（最新消息縮圖） ***/
.newslist_rwd .npicimg {
    transition: transform .5s cubic-bezier(0, 0, 0, 1);
}

@media (any-hover: hover) {

    .newslist_rwd a:hover .npicimg {
        transform: translate3d(0, var(--fx-y, 0px), 0) scale(1.08);
    }
}

/*** 數字跳動：避免動畫過程中寬度跳動 ***/
.fx-count {
    font-variant-numeric: tabular-nums;
}

/*** 尊重系統的「減少動態效果」設定 ***/
@media (prefers-reduced-motion: reduce) {

    .fx-float,
    .fx-bg,
    .newslist_rwd a:hover .npicimg {
        transform: none !important;
        transition: none !important;
    }

    .fx-bg {
        top: 0 !important;
        height: 100% !important;
    }
}