/* wx-scroll-refine.css
   官網捲動效果（2026-10-30 老闆看完官網質感提案，按鈕、商品卡之後選「做捲動效果」）。搭配 assets/js/wx-scroll-refine.js。
   - 全部規則都掛在 html.wx-scroll-fx 底下；這個 class 是 JS 跑起來才加，JS 沒載到時網站維持原樣。
   - 頁首：在最上面不畫線（原本 .header-main／.header-nav 常駐的淡陰影拿掉）；往下捲後，JS 挑出的最下面那一條（.wx-head-edge）出現細陰影。
   - 各區：.wx-reveal 只變透明度（不移動、不縮放，畫面不跳，憲法 §2.6），進到畫面加 .is-in 才變清楚。
   - 2026-10-31 第一批動態（老闆：不能讓官網負擔太大）：商品圖淡灰底＋淡入、加入購物車飛入、導覽列底線離開往右收。
     時間照 Hallmark 的標準：滑過 0.22 秒、進場 0.42 秒；出現先快後慢（ease-out）、離開先慢後快（ease-in），不回彈。
     只動透明度和位置，不做一直重複跑的動畫。
   - 不做：視差捲動、整頁大動畫、捲動時頁首縮放（手機容易卡，也會讓畫面跳）。
   - 拿掉這兩支，網站就回到原本沒有捲動效果的樣子。 */

/* ---------- 頁首：捲動後才出現細陰影 ---------- */
html.wx-scroll-fx body .header-main,
html.wx-scroll-fx body .header-nav {
  box-shadow: none !important;
  transition: box-shadow .2s ease !important;
}
html.wx-scroll-fx.wx-scrolled body .wx-head-edge {
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 8px 16px -8px rgba(15, 23, 42, .14) !important;
}

/* ---------- 各區第一次進到畫面：從淡變清楚 ---------- */
html.wx-scroll-fx .wx-reveal {
  opacity: 0;
  transition: opacity .5s ease;
}
html.wx-scroll-fx .wx-reveal.is-in,
html.wx-scroll-fx .wx-reveal:focus-within {
  opacity: 1;
}

/* ---------- 商品卡圖片：還沒載到先放淡灰底，載好淡入一次 ----------
   圖框底色舊規則是 background: var(--wx-cover-stage-bg, #fff) !important 而且選擇器很長，所以直接換那個變數 */
html.wx-scroll-fx body .product-card .card-img-box.wx-img-wait {
  --wx-cover-stage-bg: #eef2f6;
  background-color: #eef2f6 !important;
}
/* 用透明、不用 visibility:hidden：Chrome 的 loading="lazy" 碰到 hidden 的圖不會開始載（10/31 測試站實測） */
html.wx-scroll-fx :is(body, #wx-card-refine) .product-card img.wx-img-wait {
  opacity: 0 !important;
}
html.wx-scroll-fx body .product-card img.wx-img-in {
  animation: wxImgIn .42s ease-out;
}
@keyframes wxImgIn {
  from { opacity: 0; }
}

/* ---------- 加入購物車：飛進購物車的小圖（JS 建立、飛完就移除） ---------- */
.wx-cart-fly {
  position: fixed;
  left: 0;
  z-index: 2147483000;
  width: 56px;
  height: 56px;
  pointer-events: none;
}
.wx-cart-fly > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #ffffff center / cover no-repeat;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
}

/* ---------- 導覽列底線：滑過從左長出（原本就有），離開改成往右收走 ---------- */
html.wx-scroll-fx body .header-nav-links a::after {
  transform-origin: right;
  transition: transform .22s ease-in;
}
html.wx-scroll-fx body .header-nav-links a:hover::after {
  transform-origin: left;
  transition-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html.wx-scroll-fx body .header-main,
  html.wx-scroll-fx body .header-nav { transition: none !important; }
  html.wx-scroll-fx .wx-reveal { opacity: 1; transition: none; }
  html.wx-scroll-fx body .header-nav-links a::after { transition: none; }
}
@media print {
  html.wx-scroll-fx .wx-reveal { opacity: 1 !important; transition: none !important; }
}