/* ===== 乐享瘦 H5 下单页：设计长图直出 + 按钮热区 + 克隆层缩放动效 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { --brand: #199a9a; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f6f6f6;
  line-height: 1.5;
}
.page {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}
.full-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;   /* 防长按图片弹菜单，交互只走热区 */
}

/* ---- 按钮透明热区（叠在设计图按钮位置上，负责点击交互） ---- */
.img-btn-hotzone {
  position: absolute;
  display: block;
  border-radius: 999px;
  cursor: pointer;
}

/* ---- 按钮克隆层（同图裁剪出按钮块盖在原位，做放大缩小动效） ----
   静止时与设计图像素级一致；动画时按钮“浮起来”呼吸缩放，图片其他元素零改动。
   裁剪与定位由 order.js 依热区百分比动态计算。 */
.img-btn-clone {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;        /* 纯视觉层，点击走热区 */
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: hot-pulse 1.5s ease-in-out infinite;
}
@keyframes hot-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
/* 提交中/失败重置时暂停呼吸 */
.img-btn-clone.paused { animation-play-state: paused; }

/* ---- 手指引导：叠在按钮右端，反复点向按钮 ---- */
.img-btn-finger {
  position: absolute;
  left: 85.5%;
  top: 89.6%;
  font-size: 34px;
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(80, 30, 0, .35));
  animation: finger-tap 1s ease-in-out infinite;
}
@keyframes finger-tap {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-9px, 3px) rotate(-8deg); }
}
.img-btn-finger.paused { display: none; }