/* ============================================================
   清清童创 · v3.0 3D Soft UI 按钮系统
   版本：v3.0-p0 (2026-07-06)
   职责：3D 按钮 / 辉光按钮 / 涟漪效果 / 尺寸变体 / 暗色适配
   注意：依赖 v3-tokens.css，纯 CSS 实现，无 JS 依赖
   ============================================================ */

/* ==================== 1. 基础 3D 按钮 .btn-3d ==================== */

.btn-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-6, 24px);
  min-height: var(--touch-min-size, 44px);
  min-width: var(--touch-min-size, 44px);

  font-family: var(--font-family-heading, 'Baloo 2', sans-serif);
  font-size: var(--font-body, 0.9375rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;

  border: none;
  border-radius: var(--radius-lg, 16px);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;

  /* 基础 3D 变换起点 */
  transform: translateY(0);
  transition:
    transform var(--duration-instant, 100ms) var(--ease-smooth),
    box-shadow var(--duration-instant, 100ms) var(--ease-smooth),
    filter var(--duration-fast, 200ms) var(--ease-smooth);
}

/* ==================== 2. 品牌色变体 ==================== */

/* ── 紫色主按钮 ── */
.btn-3d-purple {
  background: var(--color-purple-dark, #5B3BB8);
  box-shadow: var(--btn-3d-shadow-purple);
}

.btn-3d-purple:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-3d-shadow-purple-hover);
}

.btn-3d-purple:active {
  transform: translateY(3px);
  box-shadow: var(--btn-3d-purple-pressed);
}

/* ── 橙色 CTA 按钮 ── */
.btn-3d-orange {
  background: var(--color-orange, #FFA94D);
  color: #FFFFFF;
  box-shadow: var(--btn-3d-shadow-orange);
}

.btn-3d-orange:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-3d-shadow-orange-hover);
}

.btn-3d-orange:active {
  transform: translateY(3px);
  box-shadow: var(--btn-3d-orange-pressed);
}

/* ── 粉色次要按钮 ── */
.btn-3d-pink {
  background: var(--color-pink, #FF8FA3);
  color: #FFFFFF;
  box-shadow: var(--btn-3d-shadow-pink);
}

.btn-3d-pink:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-3d-shadow-pink-hover);
}

.btn-3d-pink:active {
  transform: translateY(3px);
  box-shadow: var(--btn-3d-pink-pressed);
}

/* ── 绿色成功按钮 ── */
.btn-3d-green {
  background: var(--color-green, #69DB7C);
  color: #FFFFFF;
  box-shadow: var(--btn-3d-shadow-green);
}

.btn-3d-green:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-3d-shadow-green-hover);
}

.btn-3d-green:active {
  transform: translateY(3px);
  box-shadow: var(--btn-3d-green-pressed);
}

/* ── 白色/浅色背景按钮（用于放在彩色背景上） ── */
.btn-3d-light {
  background: #FFFFFF;
  color: var(--text-primary, #3D3D3D);
  box-shadow:
    0 var(--btn-3d-offset) 0 #e0e0e0,
    0 4px 12px rgba(0,0,0,0.08);
}

.btn-3d-light:hover {
  transform: translateY(-1px);
  box-shadow:
    0 calc(var(--btn-3d-offset) + 1px) 0 #e0e0e0,
    0 6px 16px rgba(0,0,0,0.12);
}

.btn-3d-light:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 #e0e0e0,
    0 2px 4px rgba(0,0,0,0.08),
    inset 0 2px 4px rgba(0,0,0,0.06);
}

/* ── 蓝色信息按钮 ── */
.btn-3d-blue {
  background: var(--color-blue, #74C0FC);
  color: #FFFFFF;
  box-shadow:
    0 var(--btn-3d-offset) 0 #4a9ad4,
    0 6px 16px rgba(116,192,252,0.3);
}

.btn-3d-blue:hover {
  transform: translateY(-1px);
  box-shadow:
    0 calc(var(--btn-3d-offset) + 1px) 0 #4a9ad4,
    0 8px 20px rgba(116,192,252,0.4);
}

.btn-3d-blue:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 #4a9ad4,
    0 2px 6px rgba(116,192,252,0.2),
    inset 0 2px 4px rgba(0,0,0,0.08);
}

/* ==================== 3. 尺寸变体 ==================== */

/* ── 小按钮 sm ── */
.btn-3d-sm {
  padding: var(--space-2, 8px) var(--space-4, 16px);
  min-height: 36px;
  font-size: var(--font-caption, 0.8125rem);
  border-radius: var(--radius-md, 12px);
}

/* ── 中按钮 md（默认） ── */
.btn-3d-md {
  padding: var(--space-3, 12px) var(--space-6, 24px);
  min-height: 44px;
  font-size: var(--font-body, 0.9375rem);
  border-radius: var(--radius-lg, 16px);
}

/* ── 大按钮 lg（CTA / Hero） ── */
.btn-3d-lg {
  padding: var(--space-4, 16px) var(--space-8, 32px);
  min-height: 54px;
  font-size: 1.125rem;
  border-radius: var(--radius-xl, 20px);
  letter-spacing: 0.03em;
}

/* ── 全宽按钮 ── */
.btn-3d-block {
  width: 100%;
}

/* ==================== 4. 禁用状态 ==================== */

.btn-3d:disabled,
.btn-3d-purple:disabled,
.btn-3d-orange:disabled,
.btn-3d-pink:disabled,
.btn-3d-green:disabled,
.btn-3d-blue:disabled,
.btn-3d-light:disabled {
  opacity: var(--state-disabled-opacity, 0.5);
  cursor: var(--state-disabled-cursor, not-allowed);
  transform: none !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08) !important;
}

/* ==================== 5. 辉光按钮 .btn-glow ==================== */

.btn-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3, 12px) var(--space-6, 24px);
  min-height: var(--touch-min-size, 44px);

  font-family: var(--font-family-heading, 'Baloo 2', sans-serif);
  font-size: var(--font-body, 0.9375rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;

  border: none;
  border-radius: var(--radius-lg, 16px);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  overflow: hidden;
  isolation: isolate;

  transition:
    transform var(--duration-fast, 200ms) var(--ease-spring),
    box-shadow var(--duration-normal, 350ms) var(--ease-smooth);
}

/* 紫色辉光 */
.btn-glow-purple {
  background: var(--color-purple-dark, #5B3BB8);
  box-shadow: var(--btn-glow-purple);
}

.btn-glow-purple:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 20px rgba(180,167,246,0.6),
    0 0 50px rgba(180,167,246,0.3),
    0 0 0 3px rgba(180,167,246,0.15);
}

.btn-glow-purple:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    0 0 8px rgba(180,167,246,0.4),
    0 0 20px rgba(180,167,246,0.2);
}

/* 橙色辉光 CTA */
.btn-glow-orange {
  background: var(--color-orange, #FFA94D);
  box-shadow: var(--btn-glow-orange);
}

.btn-glow-orange:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 20px rgba(255,169,77,0.6),
    0 0 50px rgba(255,169,77,0.3),
    0 0 0 3px rgba(255,169,77,0.15);
}

.btn-glow-orange:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    0 0 8px rgba(255,169,77,0.4),
    0 0 20px rgba(255,169,77,0.2);
}

/* 粉色辉光 */
.btn-glow-pink {
  background: var(--color-pink, #FF8FA3);
  box-shadow: var(--btn-glow-pink);
}

.btn-glow-pink:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 20px rgba(255,143,163,0.6),
    0 0 50px rgba(255,143,163,0.3),
    0 0 0 3px rgba(255,143,163,0.15);
}

.btn-glow-pink:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    0 0 8px rgba(255,143,163,0.4),
    0 0 20px rgba(255,143,163,0.2);
}

/* ── 辉光动画脉冲（可选） ── */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(180,167,246,0.4),
      0 0 32px rgba(180,167,246,0.2);
  }
  50% {
    box-shadow:
      0 0 20px rgba(180,167,246,0.6),
      0 0 48px rgba(180,167,246,0.3);
  }
}

.btn-glow-pulse {
  animation: glow-pulse 2.5s var(--ease-smooth) infinite;
}

.btn-glow-pulse:hover {
  animation: none;
}

@keyframes glow-pulse-orange {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(255,169,77,0.4),
      0 0 32px rgba(255,169,77,0.2);
  }
  50% {
    box-shadow:
      0 0 20px rgba(255,169,77,0.6),
      0 0 48px rgba(255,169,77,0.3);
  }
}

.btn-glow-pulse-orange {
  animation: glow-pulse-orange 2.5s var(--ease-smooth) infinite;
}

.btn-glow-pulse-orange:hover {
  animation: none;
}

/* ==================== 6. 按压涟漪效果 .btn-ripple ==================== */

.btn-ripple {
  position: relative;
  overflow: hidden;
}

/* 涟漪伪元素 —— 通过 :active 触发扩散 */
.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--ripple-color);
  transform: translate(-50%, -50%);
  transition:
    width var(--ripple-duration) var(--ease-smooth),
    height var(--ripple-duration) var(--ease-smooth),
    opacity var(--ripple-duration) var(--ease-smooth);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.btn-ripple:active::after {
  width: 300%;
  height: 300%;
  opacity: 0;
  /* 瞬间展开到最大，然后淡出 */
  transition:
    width 0s,
    height 0s,
    opacity var(--ripple-duration) var(--ease-smooth);
}

/* 暗色涟漪（用于浅色按钮） */
.btn-ripple-dark::after {
  background: var(--ripple-color-dark);
}

/* 确保按钮内容在涟漪层之上 */
.btn-ripple > * {
  position: relative;
  z-index: 1;
}

/* ==================== 7. 组合使用示例 ==================== */

/* 3D + 辉光 */
.btn-3d-glow {
  transform: translateY(0);
  transition:
    transform var(--duration-instant, 100ms) var(--ease-smooth),
    box-shadow var(--duration-normal, 350ms) var(--ease-smooth);
}

.btn-3d-glow-purple {
  background: var(--color-purple-dark, #5B3BB8);
  color: #FFFFFF;
  box-shadow:
    var(--btn-3d-shadow-purple),
    var(--btn-glow-purple);
}

.btn-3d-glow-purple:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--btn-3d-shadow-purple-hover),
    0 0 24px rgba(180,167,246,0.5),
    0 0 56px rgba(180,167,246,0.25);
}

.btn-3d-glow-purple:active {
  transform: translateY(3px);
  box-shadow:
    var(--btn-3d-purple-pressed),
    0 0 8px rgba(180,167,246,0.3);
}

/* 3D + 涟漪 */
.btn-3d-ripple {
  /* 继承 btn-3d 和 btn-ripple */
}

/* ==================== 8. 暗色模式适配 ==================== */

body.dark-mode {

  .btn-3d-light {
    background: #3a3a5a;
    color: var(--text-primary, #e8e8f0);
    box-shadow:
      0 var(--btn-3d-offset) 0 #2a2a44,
      0 4px 12px rgba(0,0,0,0.3);
  }

  .btn-3d-light:hover {
    box-shadow:
      0 calc(var(--btn-3d-offset) + 1px) 0 #2a2a44,
      0 6px 16px rgba(0,0,0,0.4);
  }

  .btn-3d-light:active {
    box-shadow:
      0 1px 0 #2a2a44,
      0 2px 4px rgba(0,0,0,0.3),
      inset 0 2px 4px rgba(0,0,0,0.2);
  }

  .btn-glow-purple {
    box-shadow:
      0 0 16px rgba(180,167,246,0.35),
      0 0 40px rgba(180,167,246,0.15);
  }

  .btn-glow-orange {
    box-shadow:
      0 0 16px rgba(255,169,77,0.35),
      0 0 40px rgba(255,169,77,0.15);
  }

  .btn-glow-pink {
    box-shadow:
      0 0 16px rgba(255,143,163,0.35),
      0 0 40px rgba(255,143,163,0.15);
  }

  @keyframes glow-pulse-dark {
    0%, 100% {
      box-shadow:
        0 0 16px rgba(180,167,246,0.3),
        0 0 40px rgba(180,167,246,0.12);
    }
    50% {
      box-shadow:
        0 0 24px rgba(180,167,246,0.45),
        0 0 56px rgba(180,167,246,0.2);
    }
  }

  .btn-glow-pulse {
    animation-name: glow-pulse-dark;
  }

  @keyframes glow-pulse-orange-dark {
    0%, 100% {
      box-shadow:
        0 0 16px rgba(255,169,77,0.3),
        0 0 40px rgba(255,169,77,0.12);
    }
    50% {
      box-shadow:
        0 0 24px rgba(255,169,77,0.45),
        0 0 56px rgba(255,169,77,0.2);
    }
  }

  .btn-glow-pulse-orange {
    animation-name: glow-pulse-orange-dark;
  }
}

/* ==================== 9. 可访问性与减动效 ==================== */

/* focus-visible 键盘焦点环 */
.btn-3d:focus-visible,
.btn-glow:focus-visible {
  outline: 3px solid var(--color-blue, #74C0FC);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-3d,
  .btn-glow {
    transition: none;
  }

  .btn-3d:hover,
  .btn-3d:active,
  .btn-glow:hover,
  .btn-glow:active {
    transform: none;
  }

  .btn-glow-pulse,
  .btn-glow-pulse-orange {
    animation: none;
  }

  .btn-ripple::after {
    display: none;
  }
}