/* ============================================================
   CTA 按钮：发光呼吸边框 + 斜切角 + 鼠标磁吸
   ------------------------------------------------------------
   作用范围：前台的操作按钮（下载 / 购买 / 提交 / 搜索），
   不包含图标按钮（灯箱箭头、媒体缩略图、关闭叉）——那些套上会变形。

   性能：
   - 呼吸效果只动 opacity（合成器），不动 box-shadow
   - 斜切角用 clip-path，静态
   - 磁吸位移由 cta.js 写 translate3d，走合成器
   ============================================================ */

.cta-js,
.erphpdown-cart .down,
.ssgc-buy-btn,
.lyw-buy-btn,
.lyw-btn,
.btn,
button[type="submit"],
.searchbox button,
.sbox button {
  --cta-glow: 127, 230, 255;
  position: relative;
  isolation: isolate;
  border-radius: 0 !important;
  /* 左上 + 右下各切一刀，科技感的斜切角 */
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  );
  filter: drop-shadow(0 0 7px rgba(var(--cta-glow), .28));
  transition: filter .25s ease;
  overflow: hidden;
}

/* 发光呼吸边框（内描边，跟随斜切形状） */
.cta-js::before,
.erphpdown-cart .down::before,
.ssgc-buy-btn::before,
.lyw-buy-btn::before,
.lyw-btn::before,
.btn::before,
button[type="submit"]::before,
.searchbox button::before,
.sbox button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* 覆盖 motion.css 给 .down::before 的径向光晕底色 */
  background: none;
  border: 1.5px solid rgba(var(--cta-glow), .95);
  clip-path: inherit;
  opacity: .45;
  animation: cta-breathe 2.6s ease-in-out infinite;
}

@keyframes cta-breathe {
  0%, 100% { opacity: .28; }
  50%      { opacity: .95; }
}

/* 悬停：外发光加强 + 呼吸加快 */
.erphpdown-cart .down:hover,
.ssgc-buy-btn:hover,
.lyw-buy-btn:hover,
.lyw-btn:hover,
.btn:hover,
button[type="submit"]:hover,
.searchbox button:hover,
.sbox button:hover {
  filter: drop-shadow(0 0 16px rgba(var(--cta-glow), .6));
}

/* 悬停：外发光加强 + 呼吸加快（整条 animation 重新声明，避免继承 motion.css 的旧动画名） */
.erphpdown-cart .down:hover::before,
.ssgc-buy-btn:hover::before,
.lyw-buy-btn:hover::before,
.lyw-btn:hover::before,
.btn:hover::before,
button[type="submit"]:hover::before,
.searchbox button:hover::before,
.sbox button:hover::before {
  background: none;
  animation: cta-breathe 1.1s ease-in-out infinite;
}

/* 按下：轻微内缩 */
.erphpdown-cart .down:active,
.ssgc-buy-btn:active,
.lyw-buy-btn:active,
.lyw-btn:active,
.btn:active,
button[type="submit"]:active,
.searchbox button:active,
.sbox button:active {
  filter: drop-shadow(0 0 8px rgba(var(--cta-glow), .35)) brightness(.94);
}

/* ---------- 按按钮主色分配光晕 ---------- */

/* 立即下载：绿 */
.erphpdown-cart .down { --cta-glow: 129, 215, 66; }

/* 正版购买：蓝 */
.ssgc-buy-btn { --cta-glow: 102, 192, 244; }

/* 添加至购物车 / 提交申请：青 */
.lyw-buy-btn,
.lyw-btn { --cta-glow: 127, 230, 255; }

/* 发表评论：金 */
button[type="submit"] { --cta-glow: 233, 196, 106; }

/* 搜索按钮：淡青 */
.searchbox button,
.sbox button { --cta-glow: 127, 230, 255; }

/* ---------- 磁吸：由 cta.js 写 transform，这里只给回弹曲线 ---------- */
.cta-magnet {
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), filter .25s ease;
  will-change: transform;
}
.cta-magnet.is-pulling {
  transition: transform .06s linear, filter .25s ease;
}

/* ---------- 尊重减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .cta-js::before,
  .erphpdown-cart .down::before,
  .ssgc-buy-btn::before,
  .lyw-buy-btn::before,
  .lyw-btn::before,
  .btn::before,
  button[type="submit"]::before,
  .searchbox button::before,
  .sbox button::before {
    animation: none;
    opacity: .7;
  }
  .cta-magnet {
    transition: none;
    will-change: auto;
  }
}