/* ═══════════════════════════════════════════════════════════════════
   QIDIAN · 生命力层（迭代 5）  ·  2026-08-25
   ───────────────────────────────────────────────────────────────────
   为什么做这一层：记忆卡 project_xinghe_v8_galaxy_20260524 白纸黑字写着
     「克制/少即是多 ≠ 砍内容砍动效。生命力 = 动效。
      CC 一度按三大师做成静态克制死图，被老叶炸。」
   麒典首页此前正是那种静态死图 —— 零动效，滚下去像翻一叠 PDF。

   🔴 但同时要躲开另一张卡记的事故
      learning_reveal_animation_blank_page_20260819：
      「.reveal{opacity:0} 当默认态 = 事故」——入场动效把整页变白屏。
   所以这一层的写法是有讲究的，不是随手加 animation：

     · 滚动进场全部用 CSS 滚动驱动动画 animation-timeline:view()，
       不用 JS、不用 IntersectionObserver。浏览器不支持时动画会在加载时
       直接跑完 → 元素仍然可见，绝不会停在 opacity:0。
     · 默认态一律是「可见」，动画只负责从下方浮上来，不负责显不显示。
     · 只动 transform / opacity，保 60fps，不触发重排（CLS 保持 0）。
     · 整层包在 prefers-reduced-motion: no-preference 里，
       系统开了减弱动效就完全不跑。
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

/* ── 1. 首屏：照片极慢推近 + 那盏暖光在呼吸 ─────────────────────
   参照那套的首屏是活的（星河在缓慢流动）。这里用同样的手法：
   28 秒推近 1.03→1.09，慢到不会分神，但停在那儿就是不一样。 */
@keyframes qxKen{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.09) translate3d(0,-1.2%,0)}
}
.qh3__photo{
  animation:qxKen 28s cubic-bezier(.42,0,.58,1) infinite alternate!important;
  will-change:transform}

@keyframes qxBreathe{0%,100%{opacity:.86}50%{opacity:1}}
.qh3__light{animation:qxBreathe 9s ease-in-out infinite;will-change:opacity}

/* 首屏文字：加载时依次浮上来，慢入快停 */
@keyframes qxRise{
  from{opacity:0;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:none}
}
.qh3__meta{animation:qxRise .9s cubic-bezier(.16,1,.3,1) .10s both}
.qh3 h1{animation:qxRise 1.1s cubic-bezier(.16,1,.3,1) .18s both}
.qh3__lede{animation:qxRise 1s cubic-bezier(.16,1,.3,1) .40s both}
.qh3__lede--2{animation-delay:.52s}
.qh3__act{animation:qxRise 1s cubic-bezier(.16,1,.3,1) .64s both}
.qh3__cred{animation:qxRise 1s cubic-bezier(.16,1,.3,1) .78s both}

/* ── 2. 滚动驱动：区块进视口时浮起来 ───────────────────────────
   animation-timeline:view() = 纯 CSS 滚动驱动，不需要一行 JS。
   不支持的浏览器把它当普通动画在加载时跑完 → 元素照样可见，
   这正是它比 IntersectionObserver + opacity:0 安全的地方。 */
@supports (animation-timeline: view()) {
  .qds-section-head,
  .qroute__head,
  .qtry__head,
  .qstrip__head,
  .qpb__i,
  .qroute__row,
  .qds-content-card,
  .qds-process-grid > article,
  .qds-status-card,
  .qds-figure,
  .qdemo{
    animation:qxRise .9s cubic-bezier(.16,1,.3,1) both;
    animation-timeline:view();
    animation-range:entry 4% cover 26%;
  }
  /* 同一排的格子错峰进场，做出节奏，不是齐刷刷一起弹 */
  .qpb__i:nth-child(2),.qds-content-card:nth-child(2),
  .qds-process-grid>article:nth-child(2),.qds-status-card:nth-child(2){
    animation-range:entry 4% cover 30%}
  .qpb__i:nth-child(3),.qds-content-card:nth-child(3),
  .qds-process-grid>article:nth-child(3),.qds-status-card:nth-child(3){
    animation-range:entry 4% cover 34%}
  .qpb__i:nth-child(4),.qds-content-card:nth-child(4),
  .qds-process-grid>article:nth-child(4),.qds-status-card:nth-child(4){
    animation-range:entry 4% cover 38%}
  .qpb__i:nth-child(5),.qds-content-card:nth-child(5),
  .qds-process-grid>article:nth-child(5),.qds-status-card:nth-child(5){
    animation-range:entry 4% cover 42%}
  .qds-process-grid>article:nth-child(6){animation-range:entry 4% cover 46%}
}

/* ── 3. 金线：进视口时从左划过去 ───────────────────────────────
   参照那套每节标题上面都有一条金色短线。让它「划」出来，
   一条线动起来，整节就活了。 */
@keyframes qxDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.eyebrow::before{transform-origin:left center}
@supports (animation-timeline: view()) {
  .eyebrow::before{
    animation:qxDraw .8s cubic-bezier(.16,1,.3,1) both;
    animation-timeline:view();
    animation-range:entry 6% cover 22%}
  /* 六阶轨道那条金线：跟着滚动一路铺过去 */
  .qds-process-grid::before{
    transform-origin:left center;
    animation:qxDraw 1.2s linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 34%}
  /* 五道门的菱形：进视口时转进来 */
  .qds-status-card::before{
    animation:qxSpin .7s cubic-bezier(.16,1,.3,1) both;
    animation-timeline:view();
    animation-range:entry 8% cover 26%}
}
@keyframes qxSpin{
  from{transform:rotate(0deg) scale(.5);opacity:0}
  to{transform:rotate(45deg) scale(1);opacity:1}
}

/* ── 4. 常态的活：不靠滚动也在动的几处 ─────────────────────────
   页面停住不动时也得有东西在呼吸，否则还是一张死图。 */
@keyframes qxLed{
  0%,100%{box-shadow:0 0 0 0 rgba(95,199,154,.55)}
  70%{box-shadow:0 0 0 7px rgba(95,199,154,0)}
}
.qdemo__led{animation:qxLed 2.6s ease-out infinite}

@keyframes qxGlow{
  0%,100%{opacity:.55;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:1;transform:translate3d(2%,-2%,0) scale(1.06)}
}
.qdemo__glow{animation:qxGlow 12s ease-in-out infinite;
  will-change:opacity,transform}

/* 事实带那五个数字：鼠标扫过金色亮起并轻微上浮 */
.qpb__i b{transition:color .32s cubic-bezier(.16,1,.3,1),
  transform .32s cubic-bezier(.16,1,.3,1)}
.qpb__i:hover b{transform:translate3d(0,-3px,0)}

/* 案例格：hover 时幽灵序号亮一档并轻移 */
section[aria-labelledby="s-cases"] .qds-content-card::before{
  transition:color .4s cubic-bezier(.16,1,.3,1),
    transform .5s cubic-bezier(.16,1,.3,1)}
section[aria-labelledby="s-cases"] .qds-content-card:hover::before{
  color:rgba(196,151,73,.22)!important;transform:translate3d(-6px,0,0)}

/* 主按钮：一道光每隔几秒扫过金面 */
@keyframes qxSheen{
  0%{background-position:-140% 0}
  60%,100%{background-position:240% 0}
}
.qh3__btn,.nav-cta{
  background-image:linear-gradient(100deg,
    transparent 0%,rgba(255,255,255,.28) 46%,transparent 62%)!important;
  background-size:220% 100%;background-repeat:no-repeat;
  animation:qxSheen 6.5s ease-in-out infinite}

} /* /prefers-reduced-motion */