/* ============================================
   animation.css  ——  入场 / 浮入 / hover 光晕
   ============================================ */

/* —— 浮入 reveal —— */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 错峰浮入（同级第 N 个延迟）—— 在容器上加 [data-stagger] 才生效 */
[data-stagger] > .reveal:nth-child(1) {
  transition-delay: 0ms;
}
[data-stagger] > .reveal:nth-child(2) {
  transition-delay: 80ms;
}
[data-stagger] > .reveal:nth-child(3) {
  transition-delay: 160ms;
}
[data-stagger] > .reveal:nth-child(4) {
  transition-delay: 240ms;
}
[data-stagger] > .reveal:nth-child(5) {
  transition-delay: 320ms;
}
[data-stagger] > .reveal:nth-child(6) {
  transition-delay: 400ms;
}

/* —— Hero 元素入场 —— */
@keyframes hero-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hero-slide {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-eyebrow {
  opacity: 0;
  animation: hero-fade 600ms var(--ease) 200ms forwards;
}
.hero-title {
  opacity: 0;
  animation: hero-slide 700ms var(--ease) 380ms forwards;
}
.hero-tagline {
  opacity: 0;
  animation: hero-fade 600ms var(--ease) 700ms forwards;
}
.hero-actions {
  opacity: 0;
  animation: hero-fade 600ms var(--ease) 880ms forwards;
}
.hero-right {
  opacity: 0;
  animation: hero-rise 800ms var(--ease) 500ms forwards;
}

/* —— Hover 光晕（链接/按钮通用） —— */
.glow-on-hover {
  transition: all 200ms var(--ease);
}
.glow-on-hover:hover {
  box-shadow: 0 0 18px var(--glow-p);
}

/* —— 卡片轻浮 —— */
.lift-on-hover {
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.lift-on-hover:hover {
  transform: translateY(-3px);
}

/* —— 紫色脉冲光（神秘点缀） —— */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--purple-rgb), 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(var(--purple-rgb), 0);
  }
}
.pulse {
  animation: pulse-glow 2.4s ease-in-out infinite;
}

/* —— 星点闪烁（备用，stars.js 用 canvas 主导） —— */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.18;
  }
  50% {
    opacity: 0.85;
  }
}

/* —— 神秘飘字（404 / 空状态可用） —— */
@keyframes drift-text {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(2px, -3px);
  }
}
.drift-text {
  animation: drift-text 4s ease-in-out infinite;
}

/* —— Page transition —— */
.page-enter {
  animation: page-fade 380ms var(--ease) both;
}
@keyframes page-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* —— TOC active 指示动 —— */
.toc-list li.is-active::before {
  animation: toc-flash 280ms var(--ease);
}
@keyframes toc-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--purple-rgb), 0.5);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(var(--purple-rgb), 0);
  }
}

/* —— 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;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}