/*
 * DanmuAI 官网 — 动画
 * 弹幕飘动、滚动入场、下载按钮脉冲
 */

/* ─── Hero 弹幕飘动 ─── */
@keyframes danmuFloat {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  5% {
    opacity: var(--danmu-opacity, 0.08);
  }
  95% {
    opacity: var(--danmu-opacity, 0.08);
  }
  100% {
    transform: translateX(-120%);
    opacity: 0;
  }
}

.danmu-bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.danmu-float {
  position: absolute;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  opacity: 0;
  animation: danmuFloat var(--danmu-duration, 18s) linear var(--danmu-delay, 0s) infinite;
  will-change: transform;
}

[data-theme="dark"] .danmu-float {
  color: var(--color-surface);
}

/* ─── Hero 渐变 Blob 背景 ─── */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .hero-blob {
  opacity: 0.12;
}

.hero-blob-1 {
  width: 28rem;
  height: 28rem;
  background: var(--color-secondary);
  top: -6rem;
  right: -4rem;
}

.hero-blob-2 {
  width: 20rem;
  height: 20rem;
  background: var(--color-accent);
  bottom: -4rem;
  left: -6rem;
}

/* ─── 滚动入场动画 ─── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(1.25rem);
}

.animate-on-scroll.animated {
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger children */
.stagger-children .animate-on-scroll.animated:nth-child(1) { animation-delay: 0s; }
.stagger-children .animate-on-scroll.animated:nth-child(2) { animation-delay: 0.08s; }
.stagger-children .animate-on-scroll.animated:nth-child(3) { animation-delay: 0.16s; }
.stagger-children .animate-on-scroll.animated:nth-child(4) { animation-delay: 0.24s; }
.stagger-children .animate-on-scroll.animated:nth-child(5) { animation-delay: 0.32s; }
.stagger-children .animate-on-scroll.animated:nth-child(6) { animation-delay: 0.4s; }
.stagger-children .animate-on-scroll.animated:nth-child(7) { animation-delay: 0.48s; }
.stagger-children .animate-on-scroll.animated:nth-child(8) { animation-delay: 0.56s; }

/* ─── 下载按钮脉冲 ─── */
@keyframes pulseShadow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(var(--color-primary-rgb), 0);
  }
}

.btn-pulse {
  animation: pulseShadow 2.5s ease-in-out infinite;
}

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

/* ─── 截图画廊淡入 ─── */
@keyframes galleryFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.laptop-placeholder.active {
  animation: galleryFadeIn 0.35s ease forwards;
}