/*
 * 动画基础设置
 * 所有需要动画的元素，在它们还不可见时应用这些样式。
*/
.animate-on-scroll {
  opacity: 0; /* 默认透明 */
  transform: translateY(30px); /* 默认稍微下移 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 平滑过渡效果 */
}

/*
 * 当元素进入视口时（通过JS添加此类），激活它
*/
.animate-on-scroll.is-visible {
  opacity: 1; /* 完全可见 */
  transform: translateY(0); /* 移动回原位 */
}

/* 
 * ========================================
 * 多样化的动画效果 (可选，按需使用)
 * ========================================
*/

/* --- 从左侧滑入 --- */
.animate-on-scroll.fade-in-left {
  transform: translateX(-50px);
}
.animate-on-scroll.fade-in-left.is-visible {
  transform: translateX(0);
}

/* --- 从右侧滑入 --- */
.animate-on-scroll.fade-in-right {
  transform: translateX(50px);
}
.animate-on-scroll.fade-in-right.is-visible {
  transform: translateX(0);
}

/* --- 缩放进入 --- */
.animate-on-scroll.zoom-in {
  transform: scale(0.9);
}
.animate-on-scroll.zoom-in.is-visible {
  transform: scale(1);
}

/*
 * --- 子元素交错动画（炫酷效果的关键！）---
 * 应用于一个列表的父容器，其子元素会一个接一个出现
*/
.stagger-children > * {
  /* 继承父级的过渡效果 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 依次为每个子元素增加过渡延迟 */
.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.6s; } /* 适用于公告列表 */