meng_wx_program/pages/index/index.wxss

.page-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 遮罩层 - 隐藏不显示 */
.mask {
  display: none;
}

.mask-show {
  display: none;
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  text-align: center;
}

.title {
  font-size: 64rpx;
  font-weight: bold;
}

.xz_bg {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 星座包装器 */
.constellation-wrapper {
  position: absolute;
  z-index: 2;
  transition: opacity 0.6s ease;
}

/* 当有激活星座时，其他星座稍微变暗 */
.constellation-wrapper.dimmed {
  opacity: 0.5;
}

/* 星座图片通用样式 */
.xz_xiannv,
.xz_lion,
.xz_juxie,
.xz_sheshou,
.xz_shuangyu {
  width: 280rpx;
  height: 280rpx;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  display: block;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  /* 去除边框和轮廓 */
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

/* 悬停效果（移动端用active代替） */
.xz_xiannv:active:not(.active-center),
.xz_lion:active:not(.active-center),
.xz_juxie:active:not(.active-center),
.xz_sheshou:active:not(.active-center),
.xz_shuangyu:active:not(.active-center) {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

/* 仙女座 - 左上角 */
.xz_xiannv {
  opacity: 95%;
  position: relative;
}

.constellation-wrapper:nth-child(1) {
  top: 120rpx;
  left: 40rpx;
}

/* 狮子座 - 右上角 */
.xz_lion {
  opacity: 95%;
  position: relative;
}

.constellation-wrapper:nth-child(2) {
  top: 120rpx;
  right: 40rpx;
}

/* 巨蟹座 - 左中部 */
.xz_juxie {
  opacity: 95%;
  position: relative;
}

.constellation-wrapper:nth-child(3) {
  top: 360rpx;
  left: 60rpx;
}

/* 射手座 - 右中部 */
.xz_sheshou {
  opacity: 95%;
  position: relative;
}

.constellation-wrapper:nth-child(4) {
  top: 360rpx;
  right: 60rpx;
}

/* 双鱼座 - 底部居中 */
.xz_shuangyu {
  opacity: 85%;
  position: relative;
}

.constellation-wrapper:nth-child(5) {
  bottom: 180rpx;
  left: 50%;
  margin-left: -140rpx;
}

/* 激活状态 - 放大并居中 */
.active-center {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 280rpx !important;
  height: 280rpx !important;
  margin: 0 !important;
  opacity: 1 !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  /* 平移放大动画 + 后续脉冲动画 */
  animation: zoomIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
             smoothPulse 2s ease-in-out 0.6s infinite,
             glow 2s ease-in-out 0.6s infinite;
}

/* 标题文字 */
.constellation-title {
  position: fixed;
  top: 65%;
  left: 50%;
  transform: translateX(-50%) translateY(20rpx);
  font-size: 72rpx;
  font-weight: bold;
  color: #ffffff;
  opacity: 0;
  z-index: 101;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
  text-shadow: 0 0 20rpx rgba(74, 111, 165, 1),
               0 0 40rpx rgba(74, 111, 165, 0.8),
               0 4rpx 8rpx rgba(0, 0, 0, 0.5);
  letter-spacing: 16rpx;
  white-space: nowrap;
}

.title-show {
  opacity: 1;
  top: 63%;
  transform: translateX(-50%) translateY(0);
}

/* 平滑的脉冲效果 */
@keyframes smoothPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.8);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.85);
  }
}

/* 发光动画 */
@keyframes glow {
  0%, 100% {
    filter: brightness(1.3) drop-shadow(0 0 60rpx rgba(74, 111, 165, 1)) 
            drop-shadow(0 0 100rpx rgba(74, 111, 165, 0.6));
  }
  50% {
    filter: brightness(1.4) drop-shadow(0 0 80rpx rgba(74, 111, 165, 1)) 
            drop-shadow(0 0 120rpx rgba(74, 111, 165, 0.8));
  }
}

/* 星座包装器的过渡效果 */
.constellation-wrapper {
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 平移放大入场动画（无旋转） */
@keyframes zoomIn {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 1;
  }
}

/* 星云粒子效果（伪元素） */
.active-center::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(74, 111, 165, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: nebula 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes nebula {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
}