/**
 * Micro-interactions（微交互）
 * 克制原则：小动作、慢曲线、只在 hover/滚动进入时触发；移动端与 reduced-motion 自动降级。
 * 全部为追加覆盖，不改主题原有规则，可随时删除本文件回退。
 * @updated 特异性修复版
 */

/* ==========================================================================
   0. 动效令牌（Motion Tokens）—— JJEDC 动效签名
   --ease-silk：丝绸曲线（easeOutExpo 系）——快起慢落、无回弹，优雅感的来源。
                全站默认曲线：滚动淡入、图片缩放、抽屉、面板入场。
   --ease-detent：棘轮段落感（微过冲已削弱到 1.12），仅保留给 quick-add 这类
                  指尖级小动作，作为"机械手感"的暗线，大面积不使用。
   ========================================================================== */
:root {
  --ease-silk: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-glide: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-detent: cubic-bezier(0.34, 1.12, 0.64, 1);
  --dur-micro: 0.3s;
  --dur-macro: 0.55s;
}

/* ==========================================================================
   1. 产品卡 hover：图片缓慢缩放
   原图已有 1s transition（用于双图切换的 opacity），这里追加 transform 过渡。
   wrapper 自带 overflow:hidden + border-radius，放大不会溢出。
   同时覆盖 block-product-image__*（当前模板使用）与 block-product-card__*（备用 block）两套类名。
   注意：选择器特意加长（三层）以提高特异性——主题 block CSS 会晚于本文件加载，
   同特异性会被后者覆盖。
   ========================================================================== */
.block-product-image__layer-image-wrapper .block-product-image__image-wrapper > .block-product-image__image,
.block-product-card__layer-image-wrapper .block-product-card__image-wrapper > .block-product-card__image {
  transition:
    opacity 1s var(--ease-silk, ease),
    transform 1s var(--ease-silk, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: transform;
}

@media (hover: hover) {
  .block-product-image__layer-image-wrapper:hover .block-product-image__image,
  .block-product-card__layer-image-wrapper:hover .block-product-card__image {
    transform: scale(1.03);
  }
}

/* ==========================================================================
   2. 快捷加购按钮：随 layer 淡入时轻微上浮
   layer 原本只做 opacity 淡入，这里给 quick-add 加 6px 的位移，让入场更有层次。
   ========================================================================== */
.block-product-card__quick-add {
  transition:
    transform var(--dur-micro, 0.35s) var(--ease-detent, cubic-bezier(0.34, 1.35, 0.64, 1)),
    background-color 0.2s ease;
}

@media (hover: hover) {
  /* layer 未激活时按钮略微下沉（视觉起点） */
  .block-product-card__layer.fade-in .block-product-card__quick-add {
    transform: translateY(6px);
  }
  /* hover 图片区 → layer 淡入 → 按钮归位上浮 */
  .block-product-image__layer-image-wrapper:hover .block-product-card__quick-add,
  .block-product-card__layer-image-wrapper:hover .block-product-card__quick-add,
  .block-product-card__layer.fade-out .block-product-card__quick-add,
  .block-product-card__layer.normal .block-product-card__quick-add {
    transform: translateY(0);
  }
}

/* quick-add 按钮 hover 反馈：浅灰底，不用品牌色，保持克制 */
@media (hover: hover) {
  .block-product-card__quick-add:hover {
    background-color: #f3f3f3;
  }
}

/* ==========================================================================
   3. 区块滚动淡入（由 base/motion.js 驱动）
   优雅要点：位移小（14px）、时长 0.55s、丝绸曲线快起慢落。
   JS 只给"首屏之外"的 section 加 .motion-reveal，进入视口时加 .is-visible。
   无 JS 时没有任何初始样式，内容永远可见 —— 零风险降级。
   ========================================================================== */
.motion-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-macro, 0.55s) var(--ease-silk, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--dur-macro, 0.55s) var(--ease-silk, cubic-bezier(0.16, 1, 0.3, 1));
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   4. 抽屉/底部结账栏滑入滑出：丝绸曲线（优雅无回弹）
   双类选择器提高特异性，覆盖 cart-drawer.css 后加载的 ease-out。
   ========================================================================== */
.cart-fixed-checkout.cart-fixed-checkout {
  transition:
    transform var(--dur-micro, 0.3s) var(--ease-silk, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity var(--dur-micro, 0.3s) var(--ease-silk, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ==========================================================================
   降级：用户系统开启"减少动态效果"时，全部微交互关闭
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .block-product-image__image-wrapper > .block-product-image__image,
  .block-product-card__image-wrapper > .block-product-card__image,
  .block-product-card__quick-add,
  .cart-fixed-checkout,
  .motion-reveal {
    transition: none !important;
    transform: none !important;
  }
  .motion-reveal {
    opacity: 1 !important;
  }
}