/* 购物抽奖活动落地页 — 与切图宽度对齐，移动端优先 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 效果图：整页铺浅灰底（分类区、商品卡背后同色） */
  background: #f5f5f5;
  color: #212121;
}

.page {
  max-width: 430px;
  margin: 0 auto;
  background: #f5f5f5;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.block {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.part02-wrap {
  position: relative;
}

/* 从分类栏下方起算，覆盖下方商品图区域；点击后滚到 #download（在上方则自动上滑） */
.part02-scroll-hit {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  bottom: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

.part02-scroll-hit:focus-visible {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

.cta-section {
  margin: 0;
  padding: 12px 16px 20px;
  /* 效果图：承接头图橙黄渐变，末端收在浅灰，与下方购物区一致 */
  background: linear-gradient(
    180deg,
    #ff8c00 0%,
    #ffa64d 28%,
    #ffd591 58%,
    #f5f5f5 100%
  );
  text-align: center;
}

.cta-section--footer {
  background: #f5f5f5;
  padding: 20px 16px 28px;
}

/* 单峰对称缩放 + 全程平滑曲线，避免多段关键帧造成「一顿一顿」 */
@keyframes cta-breathe {
  0%,
  100% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.032, 1.032, 1);
  }
}

.cta-link {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  text-decoration: none;
  border-radius: 999px;
  /* 不用 filter:drop-shadow，缩放时更易整块重绘发顿；用轻量 box-shadow */
  box-shadow: 0 10px 28px rgba(255, 153, 0, 0.18);
}

/* 第二个按钮错开半拍 */
.cta-section--footer .cta-img {
  animation-delay: -1.35s;
}

.cta-link:focus-visible {
  outline: 3px solid #ffb84d;
  outline-offset: 4px;
}

.cta-link:hover .cta-img {
  filter: brightness(1.06);
}

.cta-link:active .cta-img {
  animation: none;
  transform: scale3d(0.97, 0.97, 1);
  transition: transform 0.12s ease;
}

.cta-img {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 auto;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: cta-breathe 2.7s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.footer-copy {
  margin: 0;
  padding: 0 12px 8px;
  background: #f5f5f5;
}

.footer-tags {
  margin: 0;
  padding: 8px 12px 32px;
  background: #f5f5f5;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cta-img {
    animation: none;
  }

  .cta-link {
    box-shadow: none;
  }
}