/* ============================================================
   SHU三角洲校队 · 组页面专属样式
   仅作用于 team-a.html ~ team-e.html
   ------------------------------------------------------------
   新增：入场渐变动画（背景淡入 → 横幅滑入 → 卡片 stagger）
   ============================================================ */

/* ========== ① 背景渐变淡入 ========== */
/* 页面刚加载时整个 body 从透明到不透明 */
@keyframes bgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.page-team {
  animation: bgFadeIn 0.6s ease-out both;
}

/* ========== ② 返回按钮 · 延迟出现 ========== */
@keyframes backBtnIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 10px 18px;
  border-radius: 30px;

  /* 半透明毛玻璃效果 */
  background: rgba(255, 255, 255, 0.28);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s, background 0.25s, box-shadow 0.25s;

  /* 入场动画：比背景晚一点出现 */
  opacity: 0;
  animation: backBtnIn 0.5s ease-out 0.3s forwards;
}
.back-btn:hover {
  transform: translateX(-3px);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

/* 移动端返回按钮稍小一点 */
@media (max-width: 768px) {
  .back-btn {
    top: 12px;
    left: 12px;
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ========== ③ Hero 标题区 · 上滑淡入 ========== */
@keyframes heroSlideDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-team {
  animation: heroSlideDown 0.7s ease-out 0.2s both;
}

/* ========== ④ 分组横幅 · 左侧滑入 ========== */
@keyframes bannerSlideRight {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
.page-team .group-banner {
  opacity: 0;
  animation: bannerSlideRight 0.7s ease-out 0.45s forwards;
}

/* ========== ⑤ 成员卡片 · 依次 stagger 淡入上滑 ========== */
@keyframes cardRise {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.page-team .card {
  opacity: 0;
  /* 用 --i 变量做 stagger 延迟，每个卡片间隔 0.12s
     延迟 = 0.7s（等横幅开始后再触发）+ var(--i) * 0.12s */
  animation: cardRise 0.6s ease-out calc(0.7s + var(--i, 0) * 0.12s) forwards;
}

/* ========== ⑥ 卡片容器背景也微微淡入 ========== */
@keyframes listFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.page-team .list {
  animation: listFadeIn 0.8s ease-out 0.6s both;
}

/* ========== 让组页面内容区居中、不贴边 ========== */
.page-team .group {
  padding-bottom: 60px;
}

/* ========== 移动端：动画节奏稍微加快 ========== */
@media (max-width: 768px) {
  body.page-team { animation-duration: 0.45s; }
  .hero-team    { animation-duration: 0.5s; animation-delay: 0.15s; }
  .page-team .group-banner { animation-duration: 0.5s; animation-delay: 0.3s; }
  .page-team .list         { animation-duration: 0.5s; animation-delay: 0.4s; }
  .page-team .card {
    /* 移动端 stagger 间隔也缩短 */
    animation-duration: 0.45s;
    animation-delay: calc(0.5s + var(--i, 0) * 0.08s);
  }
}