/* ========================================
   auimlab 首页 — 6 大模块进场动画 (entry animations)
   设计原则:
   - 6 个 section 各自独立入场, 互不重复
   - hero 立即播放 (load), 其余 IntersectionObserver 触发
   - 缓动用 cubic-bezier(.22,.61,.36,1) (jimeng/Apple 风)
   - 距离/位移小 (16-32px), 时间 480-720ms, 不抢戏
   - 完全尊重 prefers-reduced-motion
   - 关键修正: .is-in-view 加在 section 上,
     通过后代选择器驱动子元素的 opacity/transform
   ======================================== */

/* ----------- 通用: IO 触发后的可见状态 (驱动所有子元素) ----------- */
#section-feature-1.is-in-view .feature-media,
#section-feature-1.is-in-view .feature-info,
#section-feature-1.is-in-view .feature-corner-tag,
#section-feature-2.is-in-view .feature-media,
#section-feature-2.is-in-view .feature-info,
#section-feature-2.is-in-view .feature-corner-tag,
#section-feature-3.is-in-view .paint-head,
#section-feature-3.is-in-view .paint-card,
#section-canvas.is-in-view .canvas-left,
#section-canvas.is-in-view .canvas-demo,
#section-canvas.is-in-view .canvas-tile,
#section-canvas.is-in-view .canvas-stamp,
#section-community.is-in-view .community-head,
#section-community.is-in-view .community-chips,
#section-community.is-in-view .chip,
#section-community.is-in-view .community-cta {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  transition:
    opacity var(--anim-dur, 600ms) var(--anim-delay, 0ms) cubic-bezier(.22, .61, .36, 1),
    transform var(--anim-dur, 600ms) var(--anim-delay, 0ms) cubic-bezier(.22, .61, .36, 1);
}

/* ============================================
   1) Hero — 立即播放, 不依赖 IO
   h1 / form / 搜索按钮 依次进场
   ============================================ */

    /* 用户期望: hero 区域 (标题/搜索框/声音按钮) 在 hero1 视频 loadedmetadata
       之后再慢慢动态浮现, 不再 page load 立即触发。
       body.has-entry-anim 仍由 entry-anim.js 立即加 (给 feature/canvas/community
       等 5 个 section 的入场动画用), 但 .hero-* 3 行已迁出到 .hero-ready 选择器,
       避免 page load 就立即跑 hero 动画。
       body.hero-ready 由 index.html 视频 loadedmetadata 回调里加。
       7 个动画参数 (delay / duration / video_ready_offset) 由 :root CSS 变量
       控制, 后台 admin.html 可改 (后端 settings.py), index.html 加载时
       setProperty 注入 :root。变量未注入时使用下方默认值。 */
    :root {
      --hero-h1-delay: 80ms;
      --hero-form-delay: 280ms;
      --hero-sound-delay: 520ms;
      --hero-h1-duration: 720ms;
      --hero-form-duration: 600ms;
      --hero-sound-duration: 500ms;
    }
    body.hero-ready .hero-h1 { animation: hero-h1-in var(--hero-h1-duration) var(--hero-h1-delay) cubic-bezier(.22,.61,.36,1) both; }
    body.hero-ready .hero-form { animation: hero-form-in var(--hero-form-duration) var(--hero-form-delay) cubic-bezier(.22,.61,.36,1) both; }
    body.hero-ready .hero-sound-toggle { animation: hero-sound-in var(--hero-sound-duration) var(--hero-sound-delay) cubic-bezier(.22,.61,.36,1) both; }
    /* 在 hero-ready 之前, hero 文本/搜索框先隐藏 (避免 page load 一闪而过的"立即可见"问题) */
    body:not(.hero-ready) .hero-h1,
    body:not(.hero-ready) .hero-form,
    body:not(.hero-ready) .hero-sound-toggle { opacity: 0; }

@keyframes hero-h1-in {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes hero-form-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-sound-in {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ============================================
   2) Feature-1 (实时数据 · 媒体在左, 文本在右)
   媒体从左滑入 + 轻微放大, 文本从下淡入
   ============================================ */
#section-feature-1 .feature-media {
  --anim-dur: 720ms;
  --anim-delay: 0ms;
  opacity: 0;
  transform: translateX(-40px) scale(.96);
}
#section-feature-1 .feature-info {
  --anim-dur: 600ms;
  --anim-delay: 180ms;
  opacity: 0;
  transform: translateY(24px);
}
#section-feature-1 .feature-corner-tag {
  --anim-dur: 400ms;
  --anim-delay: 360ms;
  transform: translateX(-12px);
  opacity: 0;
}

/* ============================================
   3) Feature-2 (机器人 · 媒体在右 reverse, 文本在左)
   与 feature-1 镜像: 媒体从右滑入, 文本从下淡入
   ============================================ */
#section-feature-2 .feature-media {
  --anim-dur: 720ms;
  --anim-delay: 0ms;
  opacity: 0;
  transform: translateX(40px) scale(.96);
}
#section-feature-2 .feature-info {
  --anim-dur: 600ms;
  --anim-delay: 180ms;
  opacity: 0;
  transform: translateY(24px);
}
#section-feature-2 .feature-corner-tag {
  --anim-dur: 400ms;
  --anim-delay: 360ms;
  transform: translateX(12px);
  opacity: 0;
}

/* ============================================
   4) Paint (智能制造生成 · h2 + p + 6 张卡片)
   头部 fade-down, 6 张卡片 pop-in 错峰 80ms
   ============================================ */
#section-feature-3 .paint-head {
  --anim-dur: 600ms;
  --anim-delay: 0ms;
  opacity: 0;
  transform: translateY(-18px);
}
#section-feature-3 .paint-card {
  --anim-dur: 520ms;
  --anim-delay: 0ms;
  opacity: 0;
  transform: translateY(28px) scale(.94);
}
/* 6 张卡片错峰, 用 nth-child */
#section-feature-3.is-in-view .paint-card:nth-child(1) { --anim-delay: 120ms; }
#section-feature-3.is-in-view .paint-card:nth-child(2) { --anim-delay: 180ms; }
#section-feature-3.is-in-view .paint-card:nth-child(3) { --anim-delay: 240ms; }
#section-feature-3.is-in-view .paint-card:nth-child(4) { --anim-delay: 300ms; }
#section-feature-3.is-in-view .paint-card:nth-child(5) { --anim-delay: 360ms; }
#section-feature-3.is-in-view .paint-card:nth-child(6) { --anim-delay: 420ms; }

/* ============================================
   5) Canvas (数字孪生 · 左文本 + 右视频+3 张数据 tile)
   左文本从左滑入, 右侧视频 scale + 3 张 tile 错峰弹出
   ============================================ */
#section-canvas .canvas-left {
  --anim-dur: 680ms;
  --anim-delay: 0ms;
  opacity: 0;
  transform: translateX(-32px);
}
#section-canvas .canvas-demo {
  --anim-dur: 780ms;
  --anim-delay: 120ms;
  opacity: 0;
  transform: translateX(24px) scale(.97);
}
#section-canvas .canvas-tile {
  --anim-dur: 460ms;
  transform: translateY(16px) scale(.9);
  opacity: 0;
}
#section-canvas.is-in-view .canvas-tile-1 { --anim-delay: 480ms; }
#section-canvas.is-in-view .canvas-tile-2 { --anim-delay: 580ms; }
#section-canvas.is-in-view .canvas-tile-3 { --anim-delay: 680ms; }
#section-canvas .canvas-stamp {
  --anim-dur: 460ms;
  --anim-delay: 820ms;
  transform: translateY(8px);
  opacity: 0;
}

/* ============================================
   6) Community (智造涌动 · h2 + chips + 4 列瀑布)
   头部 fade-down, chips 错峰 fade-up,
   瀑布卡片 (JS 渲染的 .cmt-card) 也走 IO 触发
   ============================================ */
#section-community .community-head {
  --anim-dur: 600ms;
  --anim-delay: 0ms;
  opacity: 0;
  transform: translateY(-18px);
}
#section-community .community-chips {
  --anim-dur: 520ms;
  --anim-delay: 140ms;
  opacity: 0;
  transform: translateY(14px);
}
#section-community .chip {
  --anim-dur: 380ms;
  transform: translateY(10px);
  opacity: 0;
}
#section-community.is-in-view .chip:nth-child(1) { --anim-delay: 240ms; }
#section-community.is-in-view .chip:nth-child(2) { --anim-delay: 290ms; }
#section-community.is-in-view .chip:nth-child(3) { --anim-delay: 340ms; }
#section-community.is-in-view .chip:nth-child(4) { --anim-delay: 390ms; }
#section-community.is-in-view .chip:nth-child(5) { --anim-delay: 440ms; }
#section-community .community-cta {
  --anim-dur: 500ms;
  --anim-delay: 200ms;
  opacity: 0;
  transform: translateY(16px);
}

/* JS 渲染的瀑布卡片 (.cmt-card): 错峰 60ms 上浮
   注意: 真实 class 是 .cmt-card, 不是 .cw-card */
.cmt-col .cmt-card {
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition:
    opacity 480ms var(--anim-delay, 0ms) cubic-bezier(.22,.61,.36,1),
    transform 480ms var(--anim-delay, 0ms) cubic-bezier(.22,.61,.36,1);
}
.cmt-col .cmt-card.is-in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================
   减少动效: 用户偏好降低动效 → 直接显示, 不走动画
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  #section-feature-1 .feature-media,
  #section-feature-1 .feature-info,
  #section-feature-1 .feature-corner-tag,
  #section-feature-2 .feature-media,
  #section-feature-2 .feature-info,
  #section-feature-2 .feature-corner-tag,
  #section-feature-3 .paint-head,
  #section-feature-3 .paint-card,
  #section-canvas .canvas-left,
  #section-canvas .canvas-demo,
  #section-canvas .canvas-tile,
  #section-canvas .canvas-stamp,
  #section-community .community-head,
  #section-community .community-chips,
  #section-community .chip,
  #section-community .community-cta,
  .cmt-col .cmt-card,
  .cmt-col .cmt-card.is-in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  body.has-entry-anim .hero-h1,
  body.has-entry-anim .hero-form,
  body.has-entry-anim .hero-sound-toggle { animation: none !important; }
}

/* ============================================
   小屏 / 平板: 减少位移 + 缩放, 避免抢戏
   ============================================ */
@media (max-width: 768px) {
  #section-feature-1 .feature-media,
  #section-feature-2 .feature-media,
  #section-canvas .canvas-left,
  #section-canvas .canvas-demo {
    transform: translateY(20px) scale(.98);
  }
  #section-feature-1 .feature-info,
  #section-feature-2 .feature-info,
  #section-feature-3 .paint-card,
  #section-community .community-head,
  #section-community .community-chips {
    transform: translateY(16px);
  }
}