/* 入场动画 keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes revealFromLeft {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Hero 加载序列（纯CSS） */
.hero-eyebrow,
.hero-title,
.hero-subtitle,
.hero-value,
.scroll-indicator,
.hero-screenshot-card {
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
}

/* 各自的 animation-delay 在 HTML 的 style 属性中内联 */

/* 滚动触发动效基础 */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--stagger, 0ms);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* data-delay 通过 JS 设置 --stagger CSS 变量 */

/* 按钮 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  background: var(--color-accent);
  color: #0D0F14;
  border-radius: 100px;
  font-weight: 500;
  font-size: var(--text-small);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(245, 166, 35, 0.3);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 100px;
  font-size: var(--text-small);
  transition: background var(--transition-base), color var(--transition-base);
}

.btn-outline:hover {
  background: var(--color-accent);
  color: #0D0F14;
}