/**
 * 相亲市场定位测评 · PRO 商业旗舰版
 * 视觉特效、流光与粒子动画库 (Animations & Visual Effects)
 */

/* 视图平滑切换动效 */
.view-enter {
  animation: viewFadeIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.view-slide-next {
  animation: slideNext 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.view-slide-prev {
  animation: slidePrev 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideNext {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slidePrev {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 金色流光边框呼吸特效 */
.gold-shimmer {
  position: relative;
  overflow: hidden;
}

.gold-shimmer::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 25%,
    transparent 30%
  );
  animation: shimmerMove 3.5s infinite;
  pointer-events: none;
}

@keyframes shimmerMove {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* SVG 环形进度条平滑生长动画 */
.gauge-svg-ring {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.gauge-svg-circle {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 按钮微震动 / 呼吸光晕 */
.pulse-glow {
  box-shadow: 0 0 0 0 rgba(197, 155, 63, 0.5);
  animation: pulseGlow 2.2s infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(197, 155, 63, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(197, 155, 63, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(197, 155, 63, 0);
  }
}

/* 全屏香槟金粒子礼花 Canvas 画布 */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
}

/* 雷达图容器 */
.radar-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0;
  width: 100%;
}

.radar-canvas {
  width: 100%;
  max-width: 360px;
  height: 360px;
  touch-action: none;
}

/* 计算中加载骨架态动画 */
.eval-loading-wrap {
  text-align: center;
  padding: 80px 20px;
}

.eval-loading-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto 20px auto;
  border: 3.5px solid #E8E1D7;
  border-top-color: #C59B3F;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}