/* components/badge/index.wxss */

/* =================================
   1. 舞台层 (保持透视)
================================= */
.badge-scene {
  position: relative;
  width: 285rpx;
  height: 285rpx;
  margin: 50rpx auto;
  /* 透视距离：决定旋转时的立体感，1000rpx 比较自然 */
  perspective: 1000rpx;
}

/* =================================
   2. 背景光线层 (不变)
================================= */
.badge-bg-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180%;
  height: 180%;
  z-index: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 20deg,
    rgba(255, 223, 128, 0.4) 20deg 40deg
  );
  filter: blur(30px);
  animation: rotate-rays 20s linear infinite;
  pointer-events: none;
}

/* =================================
   3. 3D包裹层 (修改了动画)
================================= */
.badge-3d-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  
  /* 【修改点】应用纯左右摇摆动画 */
  /* 4s 一个周期，ease-in-out 让两头慢中间快，更有质感 */
  animation: swayLeftRight 4s ease-in-out infinite;
}

/* =================================
   4. 内容层 (不变)
================================= */
.badge-content-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  overflow: hidden; 
  position: relative;
  background: #fff;
}

.badge-img-inner {
  width: 100%;
  height: 100%;
  display: block;
}

/* 流光层 (不变) */
.badge-content-container::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(30deg);
  animation: shimmer 3s infinite ease-in-out;
  pointer-events: none;
  z-index: 3;
}

/* =================================
   动画定义 (Keyframes)
================================= */

/* 【新动画】纯左右 3D 摇摆 */
@keyframes swayLeftRight {
  0% {
    /* 向左侧转 20度 */
    transform: rotateY(-20deg);
  }
  50% {
    /* 向右侧转 20度 */
    transform: rotateY(20deg);
  }
  100% {
    /* 回到左侧 */
    transform: rotateY(-20deg);
  }
}

/* 光线背景旋转 (不变) */
@keyframes rotate-rays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 流光扫过 (不变) */
@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(30deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(30deg); }
}