/* ============================================================
   前台门户动画增强 (animations.css)
   覆盖场景：平滑滚动、Hero 入场、区块/卡片滚动入场(reveal)、
   灯箱打开、教师详情模态窗打开、卡片悬浮微动。
   设计原则：
   - 仅用 transform / opacity（GPU 加速，不触发重排）
   - 时长 200~700ms，ease 曲线
   - 尊重 prefers-reduced-motion（系统“减弱动画”偏好）
   - 用 IntersectionObserver 触发，不监听 scroll，性能友好
   ============================================================ */

/* 1. 平滑滚动（锚点跳转 / 导航高亮自动对齐） */
html { scroll-behavior: smooth; }

/* 2. 尊重系统“减弱动画”偏好：关闭所有动画与平滑滚动 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .lightbox, .teacher-modal-mask { opacity: 1 !important; visibility: visible !important; }
}

/* 3. 滚动入场基础类 .reveal + .is-visible
      JS 用 IntersectionObserver 在元素进入视口时添加 .is-visible，
      动画结束（transitionend）后移除 .reveal，避免与 :hover 的 transform 冲突。 */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* 方向 / 缩放变体 */
.reveal--down  { transform: translateY(-30px); }
.reveal--left  { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--zoom  { transform: scale(.92); }
.reveal--zoom.is-visible { transform: none; }

/* 4. Hero 首屏入场（首屏自动播放，无需滚动触发） */
.home-hero .hero-left > * { animation: heroIn .7s cubic-bezier(.22, .61, .36, 1) both; }
.home-hero .hero-logo      { animation-delay: .05s; }
.home-hero .hero-pill      { animation-delay: .15s; }
.home-hero h1              { animation-delay: .25s; }
.home-hero p               { animation-delay: .35s; }
.home-hero .hero-cta       { animation-delay: .45s; }
.home-hero .hero-right     { animation: heroIn .8s cubic-bezier(.22, .61, .36, 1) both .35s; }

/* 浮动数据卡：入场后持续轻微浮动 */
.home-hero .hero-floats .float-card { animation: floatY 4.5s ease-in-out infinite; }
.home-hero .fc1 { animation-delay: 1s; }
.home-hero .fc2 { animation-delay: 1.25s; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* 5. 灯箱打开/关闭过渡
      原 style.css 用 display:none↔flex 切换（无过渡）；这里改为 opacity/visibility 过渡。
      需配合 home.html 移除 .lightbox 的内联 display，保持 .open 切换。 */
.lightbox {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox img {
  transform: scale(.92);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.lightbox.open img { transform: scale(1); }

/* 6. 教师详情模态窗打开/关闭过渡
      配合 home.js 改用 mask.classList.add/remove('open')（不再 inline display 切换）。 */
.teacher-modal-mask {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.teacher-modal-mask.open { opacity: 1; visibility: visible; pointer-events: auto; }
.teacher-modal-mask .teacher-modal {
  transform: scale(.92) translateY(16px);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.teacher-modal-mask.open .teacher-modal { transform: none; }

/* 6b. 新闻详情模态窗过渡（与教师详情同款：opacity/visibility + 内部 scale） */
.news-modal-mask {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.news-modal-mask.open { opacity: 1; visibility: visible; pointer-events: auto; }
.news-modal-mask .news-modal {
  transform: scale(.92) translateY(16px);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.news-modal-mask.open .news-modal { transform: none; }

/* 7. 图片出现微缩放（gallery / 简介图 / 简章封面，与 hover 缩放互补） */
.gallery img, .intro-img img, .enroll-side .qr {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

/* 8. 卡片悬浮微动增强（与 style.css 现有 hover 互补，统一更柔和的上浮） */
.feature-item, .teacher-card, .mi-card, .links-grid a, .home-list .row {
  transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease;
}
.feature-item:hover, .teacher-card:hover, .mi-card:hover, .links-grid a:hover {
  transform: translateY(-6px);
}