/* ============================================
   Section2 - 加码好礼（预约达成奖励板块）
   ============================================ */

/* ========== 基础容器样式 ========== */
.reach-reward {
  height: 1300px;
  width: 100%;
  position: relative;
}

.reach-title {
  width: 377px;
  height: 86px;
  position: relative;
  top: 100px;
  left: 50%;
  margin-left: -199.5px;
  background: url("../image/section2/title.png") no-repeat;
  background-size: 100%;
}

.reach-list {
  width: 100%;
  position: absolute;
  top: 705px;
}

/* ========== 奖励列表基础样式 ========== */
.reach-list li {
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  /* filter: grayscale(100%); */
  z-index: 3;
}

/* Mask遮罩：只对前3个奖励应用，防止背景连成一片 */
.reach-list li:nth-child(1) {
  mask-image: url(../image/section2/reach-no-1-not.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
}

.reach-list li:nth-child(2) {
  mask-image: url(../image/section2/reach-no-2-not.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
}

.reach-list li:nth-child(3) {
  mask-image: url(../image/section2/reach-no-3-not.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
}

/* 第4个（50万达成）不应用mask，避免遮挡大图 */
.reach-list li:nth-child(4) {
  mask-image: none;
}

/* 激活状态：移除灰度滤镜 */
.reach-list li.active {
  filter: grayscale(0%);
}

/* 激活状态：添加渐变遮罩 */
.reach-list li.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.5));
}

/* ========== 奖励图片样式 ========== */
.reach-list li img {
  width: 124px;
  height: 112px;
  display: none;
  position: absolute;
  right: -6px;
  top: 180px;
}

/* 激活时显示图片 */
.reach-list li.active img {
  display: block;
}

/* 各奖励激活时图片位置 */
.reach-list li:nth-child(1).active img {
  top: 180px;
}

.reach-list li:nth-child(2).active img {
  right: -2px;
  top: 180px;
}

.reach-list li:nth-child(3).active img {
  right: -3px;
  top: 180px;
}

.reach-list li:nth-child(4).active img {
  top: 180px;
  right: -250px;
  z-index: 10;
}

/* ========== 各奖励卡片样式 ========== */

/* 奖励1：10万达成 */
.reach-list li:nth-child(1) {
  width: 239px;
  height: 287px;
  background-image: url(../image/section2/reach-no-1-not.png);
  background-size: 100%;
  background-repeat: no-repeat;
  left: -5px;
  top: 230px;
}

.reach-list li:nth-child(1)::before {
  content: '';
  position: absolute;
  width: 217px;
  height: 227px;
  background-image: url(../image/section2/10.png);
  background-size: 100%;
  background-repeat: no-repeat;
  left: 20px;
  top: 10px;
}

/* 奖励2：20万达成 */
.reach-list li:nth-child(2) {
  width: 241px;
  height: 287px;
  background-image: url(../image/section2/reach-no-2-not.png);
  background-size: 100%;
  background-repeat: no-repeat;
  left: 225px;
  top: 230px;
}

.reach-list li:nth-child(2)::before {
  content: '';
  position: absolute;
  width: 217px;
  height: 227px;
  background-image: url(../image/section2/10.png);
  background-size: 100%;
  background-repeat: no-repeat;
  left: 20px;
  top: 10px;
}

/* 奖励3：30万达成 */
.reach-list li:nth-child(3) {
  width: 245px;
  height: 287px;
  background-image: url(../image/section2/reach-no-3-not.png);
  background-size: 100%;
  background-repeat: no-repeat;
  top: 230px;
  right: 20px;
}

.reach-list li:nth-child(3)::before {
  content: '';
  position: absolute;
  width: 217px;
  height: 227px;
  background-image: url(../image/section2/10.png);
  background-size: 100%;
  background-repeat: no-repeat;
  left: 20px;
  top: 10px;
}

/* 奖励4：50万达成（特殊处理） */
.reach-list li:nth-child(4)>img {
  right: 24px;
  top: 9px;
}

/* 50万达成奖励大图样式 */
.reach-list li:nth-child(4) .Big-achieve {

  width: 166px;
  height: 148px;
  position: absolute;
  background: url(../image/section2/Big-reach-active.png) no-repeat;
  background-size: 100%;
  display: none;
  z-index: 10;
  top: 50px;
  left: 200px;
}

/* 当50万达成时，显示大图并隐藏普通小图 */
.reach-list li:nth-child(4).active .Big-achieve {
  display: block;
}

.reach-list li:nth-child(4).active .Big-achieve ~ img {
  display: none;
}

/* ========== 其他组件样式 ========== */

/* 龙女 */
.longNv {
  width: 720px;
  height: 869px;
  background: url(../image/section2/longNv.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -450px;
}

.longNv::before {
  content: '';
  position: absolute;
  width: 475px;
  height: 343px;
  left: 155px;
  top: 90px;
  background: url(../image/section2/luxury-nv-flash.png) no-repeat;
  background-size: 100%;
  background-repeat: no-repeat;
  animation: blink 1s infinite, grow-shrink 1s infinite;
}

/* .longNv .SSR {
  width: 128px;
  height: 57px;
  overflow: hidden;
  -webkit-mask: url(../image/section2/SSR.png) 0 0/100%;
  mask: url(../image/section2/SSR.png) 0 0/100%;
  position: absolute;
  top: 447px;
  left: 58px;
} */

/* .longNv .SSR::after {
  width: 200px;
  height: 200px;
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.75), rgba(255,255,255,0) 60%);
  animation: shark-wrap 4s infinite;
  transform: translateX(-50%);
} */

/* .longNv .SSR img {
  width: 100% !important;
  height: 57px;
  position: unset;
  right: 6px;
  top: 21px;
} */

/* 预约按钮 */
.luxury-btn {
  display: inline;
  width: 339px;
  height: 327px;
  background: url(../image/section2/luxury-btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -110px;
  left: 400px;
  z-index: 5;
  transform: translateZ(0);
  /* animation: 
    Prelogin 2s cubic-bezier(1,-1.91,0,2.79) 0s infinite,
    breathEffect 1s ease-in-out 0s infinite,
    grow-shrink 1s ease-in-out 0s infinite; */
}

.luxury-btn::before {
  content: '';
  position: absolute;
  width: 223px;
  height: 168px;
  background-image: url(../image/section2/luxury-btn-flash.png);
  left: 55px;
  top: 45px;
  animation: blink 1s infinite, grow-shrink 1s infinite;
}

/* 其他辅助样式 */
/* .numList-bg {
  display: flex;
  position: relative;
  top: -0.33rem;
}

.reach-text {
  width: 6.3rem;
  height: 0.65rem;
  position: absolute;
  top: 8.2rem;
  left: 50%;
  margin-left: -3.15rem;
}

.reach-reward .btn-xia {
  bottom: -0.5rem;
}

.Community {
  width: 3.09rem;
  height: 1.55rem;
  position: absolute;
  top: 5.8rem;
  left: 7.6rem;
  cursor: pointer;
} */

/* ========== 动画定义 ========== */

/* 闪烁动画 */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
}

/* 缩放动画 */
@keyframes grow-shrink {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* 呼吸效果动画 */
@keyframes breathEffect {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.01);
  }
}

/* 闪光扫过动画 */
@keyframes shark-wrap {
  to {
    transform: translateX(100%);
  }
}

/* 预约按钮特效动画 */
@keyframes Prelogin {
  0%, 21%, to {
    filter: none;
  }
  5% {
    filter: drop-shadow(-4px -4px 0 rgba(255,215,0,.7)) drop-shadow(4px 4px 0 rgba(255,236,139,.6));
  }
  10% {
    filter: drop-shadow(4px -4px 0 rgba(255,215,0,.7)) drop-shadow(-4px 4px 0 rgba(255,204,51,.5));
  }
  15% {
    filter: drop-shadow(-4px 4px 0 rgba(255,215,0,.7)) drop-shadow(4px -4px 0 rgba(255,236,139,.6));
  }
  20% {
    filter: drop-shadow(4px 4px 0 rgba(255,215,0,.7)) drop-shadow(-4px -4px 0 rgba(255,204,51,.5));
  }
}

/* 文字阴影故障效果动画（备用） */
@keyframes uk-text-shadow-glitch {
  0%, 21%, to {
    filter: none;
  }
  5% {
    filter: drop-shadow(-2px -2px 0 rgba(255,0,247,.4)) drop-shadow(2px 2px 0 rgba(50,52,255,.3));
  }
  10% {
    filter: drop-shadow(2px -2px 0 rgba(255,0,247,.4)) drop-shadow(-2px 2px 0 rgba(50,52,255,.3));
  }
  15% {
    filter: drop-shadow(-2px 2px 0 rgba(255,0,247,.4)) drop-shadow(2px -2px 0 rgba(50,52,255,.3));
  }
  20% {
    filter: drop-shadow(2px 2px 0 rgba(255,0,247,.4)) drop-shadow(-2px -2px 0 rgba(50,52,255,.3));
  }
}