/* =========================================================
   heyi-h5-test — 禾一品牌 6屏整图 H5
   =========================================================
   定位方式：整屏图 + 百分比热区交互法
   坐标系：以图片左上角为原点，使用百分比
   ========================================================= */

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #F5F0E8;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.phone-frame {
  width: 100%;
  max-width: 430px;
  background: #F5F0E8;
}

/* =========================================================
   通用屏幕容器
   ========================================================= */

.screen-wrap {
  position: relative;
  width: 100%;
}

.screen-wrap img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* =========================================================
   热区图层
   ========================================================= */

.hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.hotspot-layer .hotspot {
  position: absolute;
  display: block;
  z-index: 10000;
  pointer-events: auto !important;
  text-decoration: none;
  background: transparent;
  border: none;
  outline: none;
}

/* =========================================================
   第一屏 — 痛点导引按钮
   ========================================================= */

.screen1-cta {
  position: absolute;
  left:  7.6%;
  top:  91.2%;
  width:  35.3%;
  height:  4.3%;
  z-index: 10000;
  display: block;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* ——— 暖金光影层 ——— */
.screen1-cta .shine-pill {
  position: absolute;
  left:   3%;
  right:  3%;
  top:   12%;
  bottom: 12%;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none !important;
  background: transparent;
  z-index: 1;
}

.screen1-cta .shine-pill::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -35%;
  background:
    radial-gradient(
      circle at 28% 50%,
      rgba(214, 183, 128, 0.10)  0%,
      rgba(214, 183, 128, 0.05) 24%,
      rgba(255, 255, 255, 0)    56%
    );
  filter: blur(8px);
  opacity: 0.50;
  animation: heyiScreen1BaseGlow 3.0s ease-in-out infinite;
}

.screen1-cta .shine-pill::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top:    -35%;
  left:   0;
  width:  48%;
  height: 170%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0)       0%,
    rgba(232, 205, 156, 0.00)   22%,
    rgba(223, 193, 140, 0.10)   38%,
    rgba(248, 233, 200, 0.24)   50%,
    rgba(223, 193, 140, 0.10)   62%,
    rgba(255, 255, 255, 0)     100%
  );
  filter: blur(4px);
  opacity: 0.82;
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  animation: heyiScreen1Highlight 3.0s ease-in-out infinite;
}

@keyframes heyiScreen1BaseGlow {
  0%   { transform: translateX(-10%); opacity: 0.32; }
  50%  { transform: translateX(12%);  opacity: 0.52; }
  100% { transform: translateX(22%); opacity: 0.30; }
}

@keyframes heyiScreen1Highlight {
  0%   { left: -55%; opacity: 0; }
  14%  { opacity: 0.55; }
  52%  { opacity: 0.82; }
  82%  { left: 115%; opacity: 0; }
  100% { left: 115%; opacity: 0; }
}

.screen1-cta:active .shine-pill {
  transform: scale(0.995);
}

/* =========================================================
   第6屏 — 按钮热区 .screen6-cta
   ========================================================= */

.screen6-cta {
  position: absolute;
  left:   7.4%;
  top:    61.6%;
  width:  56.2%;
  height:  9.1%;
  z-index: 20;
  display: block;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  color: transparent;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}

.screen6-cta:active {
  transform: scale(0.976);
}

.screen6-cta.debug {
  border: 2px dashed rgba(255, 50, 50, 0.7);
  background: rgba(255, 50, 50, 0.06);
  border-radius: 6px;
}

.screen6-cta:not(.debug) {
  border: none;
  background: transparent;
}

/* =========================================================
   .shine-pill — 椭圆光影层（第6屏）
   ========================================================= */

.screen6-cta .shine-pill {
  position: absolute;
  left:   4%;
  right:  4%;
  top:    14%;
  bottom: 14%;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  z-index: 1;
}

.screen6-cta .shine-pill::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -35%;
  background:
    radial-gradient(
      circle at 28% 50%,
      rgba(214, 183, 128, 0.10)  0%,
      rgba(214, 183, 128, 0.05) 20%,
      rgba(255, 255, 255, 0)    52%
    );
  filter: blur(8px);
  opacity: 0.55;
  animation: s6BaseGlow 2.8s ease-in-out infinite;
}

.screen6-cta .shine-pill::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top:    -35%;
  left:   0;
  width:  48%;
  height: 170%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0)       0%,
    rgba(232, 205, 156, 0.00)   22%,
    rgba(223, 193, 140, 0.10)   38%,
    rgba(248, 233, 200, 0.24)   50%,
    rgba(223, 193, 140, 0.10)   62%,
    rgba(255, 255, 255, 0)     100%
  );
  filter: blur(4px);
  opacity: 0.9;
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  animation: s6Highlight 2.9s ease-in-out infinite;
}

@keyframes s6BaseGlow {
  0%   { transform: translateX(-10%); opacity: 0.36; }
  50%  { transform: translateX(12%);  opacity: 0.52; }
  100% { transform: translateX(22%); opacity: 0.32; }
}

@keyframes s6Highlight {
  0%   { left: -55%; opacity: 0; }
  14%  { opacity: 0.68; }
  52%  { opacity: 0.92; }
  82%  { left: 115%; opacity: 0; }
  100% { left: -55%; opacity: 0; }
}