/* UI/UX Pro Max — 共享动画与设计令牌
 * 适用于 EightBeat Dynamic Score 全站
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');

/* ---------- 设计令牌 ---------- */
:root {
  --color-primary: #1E1B4B;
  --color-secondary: #4338CA;
  --color-accent: #22C55E;
  --color-accent-hover: #16A34A;
  --color-background: #0F0F23;
  --color-foreground: #F8FAFC;
  --color-card: #1B1B30;
  --color-muted: #27273B;
  --color-muted-foreground: #94A3B8;
  --color-border: #312E81;
  --color-danger: #EF4444;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 24px rgba(34, 197, 94, 0.35);
  --shadow-glow-primary: 0 0 24px rgba(67, 56, 202, 0.35);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  --font-heading: 'Righteous', cursive;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* ---------- 关键帧 ---------- */
@keyframes eb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes eb-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes eb-scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes eb-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes eb-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }
  50% {
    box-shadow: 0 0 20px 6px rgba(34, 197, 94, 0.15);
  }
}

@keyframes eb-pulse-glow-primary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(67, 56, 202, 0.45);
  }
  50% {
    box-shadow: 0 0 20px 6px rgba(67, 56, 202, 0.15);
  }
}

@keyframes eb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes eb-title-underline {
  from { width: 0; }
  to { width: 64px; }
}

@keyframes eb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes eb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- 通用动画类 ---------- */
.eb-anim-fade-in { animation: eb-fade-in 0.6s ease both; }
.eb-anim-fade-in-up { animation: eb-fade-in-up 0.5s ease both; }
.eb-anim-scale-in { animation: eb-scale-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.eb-anim-slide-in-right { animation: eb-slide-in-right 0.4s ease both; }
.eb-anim-pulse-glow { animation: eb-pulse-glow 2s ease-in-out infinite; }

/* ---------- Stagger 列表动画 ---------- */
.eb-stagger > *,
.eb-stagger-list > * {
  opacity: 0;
  animation: eb-fade-in-up 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.eb-stagger > *:nth-child(1), .eb-stagger-list > *:nth-child(1) { animation-delay: 0ms; }
.eb-stagger > *:nth-child(2), .eb-stagger-list > *:nth-child(2) { animation-delay: 60ms; }
.eb-stagger > *:nth-child(3), .eb-stagger-list > *:nth-child(3) { animation-delay: 120ms; }
.eb-stagger > *:nth-child(4), .eb-stagger-list > *:nth-child(4) { animation-delay: 180ms; }
.eb-stagger > *:nth-child(5), .eb-stagger-list > *:nth-child(5) { animation-delay: 240ms; }
.eb-stagger > *:nth-child(6), .eb-stagger-list > *:nth-child(6) { animation-delay: 300ms; }
.eb-stagger > *:nth-child(7), .eb-stagger-list > *:nth-child(7) { animation-delay: 360ms; }
.eb-stagger > *:nth-child(8), .eb-stagger-list > *:nth-child(8) { animation-delay: 420ms; }
.eb-stagger > *:nth-child(9), .eb-stagger-list > *:nth-child(9) { animation-delay: 480ms; }
.eb-stagger > *:nth-child(10), .eb-stagger-list > *:nth-child(10) { animation-delay: 540ms; }
.eb-stagger > *:nth-child(11), .eb-stagger-list > *:nth-child(11) { animation-delay: 600ms; }
.eb-stagger > *:nth-child(12), .eb-stagger-list > *:nth-child(12) { animation-delay: 660ms; }

/* ---------- Hover 效果 ---------- */
.eb-hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.eb-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.eb-button-glow {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.eb-button-glow:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-glow);
}
.eb-button-glow:active {
  transform: scale(0.98);
}

/* ---------- 标题下划线装饰 ---------- */
.eb-section-title {
  position: relative;
  display: inline-block;
}
.eb-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
  animation: eb-title-underline 0.6s ease forwards;
  animation-delay: 0.2s;
}

/* ---------- 可聚焦状态 ---------- */
a, button, [role="button"], input, select, textarea, [tabindex]:not([tabindex="-1"]) {
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .eb-anim-fade-in, .eb-anim-fade-in-up, .eb-anim-scale-in,
  .eb-anim-slide-in-right, .eb-anim-pulse-glow,
  .eb-stagger > *, .eb-stagger-list > *,
  .eb-section-title::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}