/* ============================================
   全局样式 — 浮动线条背景 + 卡片交互
   ============================================ */

/* 暗色基底，Three.js 浮动线条叠加在之上 */
body {
  background: #0a0e16;
  color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
}

/* ===== 卡片鼠标光晕 ===== */
.glow-card {
  position: relative;
  overflow: hidden;
}
.glow-card::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 350px; height: 350px;
  background: radial-gradient(circle at center, rgba(88,166,255,0.12), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 0;
}
.glow-card:hover::before { opacity: 1; }
.glow-card > * { position: relative; z-index: 1; }

/* ===== 渐变闪光边框 ===== */
.shimmer-border {
  position: relative;
}
.shimmer-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg, transparent 0%, rgba(88,166,255,0.5) 20%,
    rgba(233,71,245,0.4) 50%, rgba(88,166,255,0.3) 80%, transparent 100%
  );
  background-size: 200% 200%;
  animation: shimmer 5s ease-in-out infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s;
}
.shimmer-border:hover::after { opacity: 1; }
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== 摇杆按钮 ===== */
.btn-joystick {
  position: relative;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  user-select: none;
  transform: translateY(0);
  transition: all 0.12s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow:
    0 5px 0 rgba(0,0,0,0.35),
    0 7px 18px rgba(0,0,0,0.25);
}
.btn-joystick:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 rgba(0,0,0,0.35),
    0 10px 24px rgba(0,0,0,0.3);
  filter: brightness(1.06);
}
.btn-joystick:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 3px 6px rgba(0,0,0,0.2);
  filter: brightness(0.95);
  transition: all 0.05s;
}

/* ===== 按钮扫光 ===== */
.btn-glow {
  position: relative;
  overflow: hidden;
}
.btn-glow::after {
  content: '';
  position: absolute;
  top: 50%; left: -30%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.2), transparent 60%);
  transform: translateY(-50%) rotate(20deg);
  transition: left 0.5s cubic-bezier(0.22,0.61,0.36,1);
  pointer-events: none;
}
.btn-glow:hover::after { left: 120%; }

/* ===== 按钮波纹 ===== */
.ripple { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transform: scale(0);
  animation: rippleAnim 0.55s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ===== 3D 弹簧倾斜 ===== */
.tilt-card {
  transform-style: preserve-3d;
}

/* ===== 入场动画 ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-fade-up {
  animation: fadeInUp 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}

/* ===== 卡片悬浮光边 ===== */
.glow-border {
  transition: box-shadow 0.4s, border-color 0.4s;
}
.glow-border:hover {
  box-shadow:
    0 0 20px rgba(88,166,255,0.12),
    0 0 40px rgba(88,166,255,0.05);
}

/* ===== 呼吸光效 ===== */
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 6px rgba(88,166,255,0.15), 0 0 18px rgba(88,166,255,0.08); }
  50% { box-shadow: 0 0 14px rgba(88,166,255,0.25), 0 0 36px rgba(88,166,255,0.1); }
}
.breathe-glow { animation: breathe 3s ease-in-out infinite; }