/* ========================================
   微智AI商学院 - 元素 / 卡片进场动画
   说明：仅在 JS 启用时隐藏元素（body.js-anim），
   元素滚动进入视口后由 animations.js 添加 .is-visible 触发展现。
   尊重 prefers-reduced-motion，无障碍友好。
   ======================================== */

/* 基础进场：上移 + 轻微缩放 + 模糊渐显（节奏舒缓放慢，避免过快） */
body.js-anim .reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(4px);
  transition:
    opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

body.js-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 变体：缩放淡入（适合图标、小卡片、头像） */
body.js-anim .reveal.reveal-scale {
  transform: scale(0.92);
}

body.js-anim .reveal.reveal-scale.is-visible {
  transform: scale(1);
}

/* 变体：从左滑入（适合侧栏、列表） */
body.js-anim .reveal.reveal-left {
  transform: translateX(-24px);
}

body.js-anim .reveal.reveal-left.is-visible {
  transform: none;
}

/* 个人中心导航按钮：用动画驱动入场（不占用 transition），hover 仍保持 0.22s 顺滑 */
body.js-anim .uc-grid .uc-nav-item.reveal {
  opacity: 0;
  transform: none;
  filter: none;
  transition: all 0.22s ease;   /* 仅作用于 hover，不影响入场动画 */
}
body.js-anim .uc-grid .uc-nav-item.reveal.is-visible {
  opacity: 1;
  animation: ucNavItemIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ucNavItemIn {
  from { opacity: 0; transform: translateX(-26px); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(0);    filter: blur(0); }
}

/* 已上线产品卡片：专属慢速、分层出场（切换到 AI工具页即开始播放）。
   用 keyframe 驱动，animationend 后由 animations.js 移除 .live-anim，
   交还 .glass-tool 自身 0.35s 过渡，hover 上浮动效不受影响。 */
@keyframes toolLiveIn {
  0%   { opacity: 0; transform: translateY(46px) scale(0.95); filter: blur(8px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
body.js-anim .glass-tool-live.live-anim {
  opacity: 0;
  animation: toolLiveIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--live-delay, 0ms);
}

/* 学院课程页：全部课程前六张卡片专属慢速分层出场（切到课程页即开始播放）。
   用 keyframe 驱动，animationend 后由 animations.js 移除 .live-anim，
   交还 .course-card 自身 0.3s 过渡，hover 上浮动效不受影响。 */
@keyframes courseLiveIn {
  0%   { opacity: 0; transform: translateY(48px) scale(0.95); filter: blur(8px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
body.js-anim .course-card-live.live-anim {
  opacity: 0;
  animation: courseLiveIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--live-delay, 0ms);
}

/* 首屏 Hero：整体加载即淡入（克制位移，焦点交给标题逐行动画） */
body.js-anim .hero-anim {
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== 酷炫 Hero 标题：逐行「遮罩上浮 + 模糊渐显」 ===== */
body.js-anim .hero-title .hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em;   /* 防止裁剪下边缘笔画 */
}
body.js-anim .hero-title .hero-line-in {
  display: block;
  opacity: 0;
  transform: translateY(118%);
  filter: blur(16px);
  animation: heroLineReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) forwards;
  will-change: opacity, transform, filter;
}
@keyframes heroLineReveal {
  0%   { opacity: 0; transform: translateY(118%); filter: blur(16px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* 强调行：渐变文字 + 流光扫过，强化「高端赋能平台」的质感 */
body.js-anim .hero-title .hero-line-accent .hero-line-in {
  background: linear-gradient(100deg,
    #1565C0 0%, #29B6F6 26%, #B3E5FC 46%, #ffffff 50%, #B3E5FC 54%, #29B6F6 74%, #1565C0 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:
    heroLineReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0.42s) forwards,
    heroShine 5.5s linear calc(var(--d, 0.42s) + 1.4s) infinite;
}
@keyframes heroShine {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

/* 浮动小智气泡弹出（已有 bubblePop，此处补充小智主体载入） */
body.js-anim .floating-xiaozhi .avatar-btn {
  animation: floatIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both, float 3.2s ease-in-out infinite 0.8s;
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 无障碍：用户偏好减少动态时，取消所有隐藏与动画 */
@media (prefers-reduced-motion: reduce) {
  body.js-anim .reveal,
  body.js-anim .hero-anim,
  body.js-anim .hero-title .hero-line,
  body.js-anim .hero-title .hero-line-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  body.js-anim .floating-xiaozhi .avatar-btn {
    animation: float 3.2s ease-in-out infinite;
  }
}