/**
 * 纤伴益生菌 AI 官网 — 视觉特效样式
 * 包含: 玻璃拟态、扫光按钮、波纹、3D倾斜、粒子背景、鼠标光斑、文字扫光
 * 依赖: common.css 中的 CSS 变量
 */

/* ==================== 玻璃拟态 ==================== */
.qianban-glass {
  background: var(--qianban-glass-bg);
  backdrop-filter: blur(var(--qianban-glass-blur));
  -webkit-backdrop-filter: blur(var(--qianban-glass-blur));
  border: 1px solid var(--qianban-glass-border);
  box-shadow: var(--qianban-glass-shadow);
  border-radius: var(--qianban-radius-lg);
}

.qianban-glass--dark {
  background: rgba(30, 20, 40, 0.55);
  backdrop-filter: blur(var(--qianban-glass-blur));
  -webkit-backdrop-filter: blur(var(--qianban-glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: #fff;
}

/* ==================== 扫光按钮 ==================== */
.qianban-btn--shimmer {
  position: relative;
  overflow: hidden;
}

.qianban-btn--shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
}

.qianban-btn--shimmer:hover::after {
  left: 100%;
}

/* ==================== 点击波纹 ==================== */
.qianban-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: qianban-ripple-spread 0.6s ease-out;
  pointer-events: none;
}

@keyframes qianban-ripple-spread {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ==================== 3D 倾斜卡片 ==================== */
.qianban-tilt {
  transform-style: preserve-3d;
  transition: transform 0.2s ease;
  will-change: transform;
}

.qianban-tilt__inner {
  transform-style: preserve-3d;
  transform: translateZ(0);
}

.qianban-tilt__shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--tilt-x, 50%) var(--tilt-y, 50%),
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.qianban-tilt:hover .qianban-tilt__shine {
  opacity: 1;
}

/* ==================== 粒子背景 ==================== */
.qianban-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.qianban-particles canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==================== 鼠标光斑 ==================== */
.qianban-cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(232, 146, 180, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
  mix-blend-mode: screen;
}

.qianban-cursor-glow.qianban-active {
  opacity: 1;
}

/* ==================== 文字扫光 ==================== */
.qianban-text-sweep {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.qianban-text-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: qianban-text-sweep-anim 3s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes qianban-text-sweep-anim {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* ==================== 滚动入场动画 ==================== */
.qianban-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--qianban-animation-duration) var(--qianban-animation-easing),
              transform var(--qianban-animation-duration) var(--qianban-animation-easing);
}

.qianban-reveal.qianban-revealed {
  opacity: 1;
  transform: translateY(0);
}

.qianban-reveal--left {
  transform: translateX(-30px);
}

.qianban-reveal--right {
  transform: translateX(30px);
}

.qianban-reveal--scale {
  transform: scale(0.9);
}

.qianban-reveal--left.qianban-revealed,
.qianban-reveal--right.qianban-revealed {
  transform: translateX(0);
}

.qianban-reveal--scale.qianban-revealed {
  transform: scale(1);
}

/* ==================== 代言人头像样式 ==================== */
.qianban-spokesperson-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent url('/qianban/assets/spokesperson-portrait.jpg') center top / cover no-repeat !important;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(232, 76, 136, 0.2);
}

.qianban-spokesperson-avatar--lg {
  width: 80px;
  height: 80px;
  border-width: 3px;
}

.qianban-spokesperson-avatar--sm {
  width: 28px;
  height: 28px;
  border-width: 1px;
}

/* 聊天气泡中的AI头像 - 用代言人照片覆盖灰色圆圈 */
.qianban-chat-message--assistant .qianban-spokesperson-avatar,
.qianban-chat-message--assistant .qianban-spokesperson-avatar--sm {
  background: transparent url('/qianban/assets/spokesperson-portrait.jpg') center top / cover no-repeat !important;
}
.qianban-chat-message--assistant .qianban-spokesperson-avatar i,
.qianban-chat-message--assistant .qianban-spokesperson-avatar--sm i {
  display: none !important;
}

.qianban-spokesperson-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(232, 146, 180, 0.12), rgba(201, 169, 110, 0.12));
  border: 1px solid rgba(232, 146, 180, 0.25);
  border-radius: var(--qianban-radius-full);
  font-size: var(--qianban-font-tiny);
  font-weight: 600;
  color: var(--qianban-color-spokesperson);
}

.qianban-spokesperson-badge i {
  color: var(--qianban-color-spokesperson-gold);
}

.qianban-spokesperson-recommend {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(232, 146, 180, 0.9), rgba(201, 169, 110, 0.9));
  border-radius: var(--qianban-radius-full);
  font-size: var(--qianban-font-tiny);
  font-weight: 600;
  color: #fff;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(232, 146, 180, 0.3);
}

/* ==================== 金色光效 ==================== */
.qianban-gold-glow {
  position: relative;
}

.qianban-gold-glow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), rgba(232, 146, 180, 0.2));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(8px);
}

.qianban-gold-glow:hover::before {
  opacity: 1;
}

/* ==================== 联名标识 ==================== */
.qianban-cobadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: linear-gradient(135deg, rgba(232, 146, 180, 0.08), rgba(201, 169, 110, 0.08));
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: var(--qianban-radius-full);
  font-size: var(--qianban-font-small);
  color: var(--qianban-color-spokesperson-gold);
  font-weight: 600;
}

.qianban-cobadge i {
  color: var(--qianban-color-spokesperson);
}

/* ==================== 代言专区 ==================== */
.qb-spokesperson-section {
  padding: var(--qianban-space-2xl) 0;
  background: linear-gradient(135deg, #FFF5F8 0%, #FFF9F0 50%, #F5F0FF 100%);
  position: relative;
  overflow: hidden;
}

.qb-spokesperson-section__inner {
  display: flex;
  align-items: center;
  gap: var(--qianban-space-2xl);
  flex-wrap: wrap;
}

.qb-spokesperson-section__image {
  flex: 0 0 280px;
  max-width: 280px;
  border-radius: var(--qianban-radius-lg);
  overflow: hidden;
  box-shadow: var(--qianban-shadow-xl);
  position: relative;
}

.qb-spokesperson-section__image img {
  width: 100%;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
}

.qb-spokesperson-section__content {
  flex: 1;
  min-width: 280px;
}

.qb-spokesperson-section__name {
  font-size: var(--qianban-font-h2);
  font-weight: 700;
  color: var(--qianban-color-text);
  margin-bottom: var(--qianban-space-xs);
}

.qb-spokesperson-section__title {
  font-size: var(--qianban-font-body);
  color: var(--qianban-color-spokesperson-gold);
  font-weight: 600;
  margin-bottom: var(--qianban-space-md);
}

.qb-spokesperson-section__quote {
  font-size: var(--qianban-font-body);
  color: var(--qianban-color-text-secondary);
  line-height: 1.8;
  padding-left: var(--qianban-space-md);
  border-left: 3px solid var(--qianban-color-spokesperson);
  margin-bottom: var(--qianban-space-md);
}

.qb-spokesperson-section__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qianban-space-sm);
}

.qb-spokesperson-credential {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--qianban-radius-full);
  font-size: var(--qianban-font-tiny);
  color: var(--qianban-color-text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.qb-spokesperson-credential i {
  color: var(--qianban-color-spokesperson-gold);
  font-size: 10px;
}

@media (max-width: 768px) {
  .qb-spokesperson-section__inner {
    flex-direction: column;
    text-align: center;
  }

  .qb-spokesperson-section__image {
    flex: 0 0 auto;
    max-width: 200px;
  }

  .qb-spokesperson-section__quote {
    text-align: left;
  }
}

/* ==================== prefers-reduced-motion 下禁用特效 ==================== */
@media (prefers-reduced-motion: reduce) {
  .qianban-particles,
  .qianban-cursor-glow,
  .qianban-tilt__shine {
    display: none !important;
  }

  .qianban-text-sweep::after {
    display: none;
  }

  .qianban-reveal {
    opacity: 1;
    transform: none;
  }
}