/* 首页「常用工具」横条的演示片（js/home-motion.js 的 mountTools 挂上 .hm-tool-media 和 .has-media）。
   平时：横条里是演示片第 3.2 秒的静帧，左侧一层暗色渐变让文字看得清；
   鼠标放上去（或键盘聚焦）：画面从横条展开成完整的 16:9，浮在旁边卡片上面，同时开始播；移开收回、停在封面那帧。
   放在 home-entry.css / home-tactile.css 之后加载：那两份给横条定了底色、字色（带 !important）和图标样式，这里要盖过去。
   ⚠️ 别拿 prefers-reduced-motion 关掉展开和播放（有用户系统里关了动画，关掉就像「坏了」），只把过渡变短。 */
#pane-home .hm-tool-launchers>a.has-media{
  position:relative;isolation:isolate;container-type:inline-size;min-height:72px;overflow:visible;
  border-color:transparent;background:#0f0f12;color:#f4f4f6!important;
  transition:z-index 0s .3s;
}
#pane-home .hm-tool-launchers>a.has-media:hover,#pane-home .hm-tool-launchers>a.has-media:active{
  background:#0f0f12;border-color:transparent;color:#fff!important;
}
#pane-home .hm-tool-launchers>a.has-media .hm-tool-media{
  position:absolute;z-index:-1;left:0;right:0;top:50%;height:100%;transform:translateY(-50%);
  border-radius:6px;overflow:hidden;background:#0f0f12;box-shadow:0 0 0 1px rgb(255 255 255 / .07);
  transition:height .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
#pane-home .hm-tool-media>img,#pane-home .hm-tool-media>video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  display:block;pointer-events:none;
}
#pane-home .hm-tool-media>video{opacity:0;transition:opacity .35s ease}
#pane-home .hm-tool-media>video.is-playing{opacity:1}
#pane-home .hm-tool-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgb(12 12 15 / .86) 0%,rgb(12 12 15 / .55) 34%,rgb(12 12 15 / .06) 72%);
  transition:opacity .3s ease;
}
#pane-home .hm-tool-launchers>a.has-media .hm-tool-icon,
#pane-home .hm-tool-launchers>a.has-media:hover .hm-tool-icon,
#pane-home .hm-tool-launchers>a.has-media:active .hm-tool-icon{
  border:1px solid rgb(255 255 255 / .16);background:rgb(255 255 255 / .1);color:#fff;box-shadow:none;transform:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#pane-home .hm-tool-launchers>a.has-media .ui-icon{filter:none}
#pane-home .hm-tool-launchers>a.has-media>span:last-child{text-shadow:0 1px 3px rgb(0 0 0 / .65)}

@media (hover:hover) and (pointer:fine){
  #pane-home .hm-tool-launchers>a.has-media:hover,#pane-home .hm-tool-launchers>a.has-media:focus-visible{z-index:6;transition:none}
  #pane-home .hm-tool-launchers>a.has-media:hover .hm-tool-media,
  #pane-home .hm-tool-launchers>a.has-media:focus-visible .hm-tool-media{
    height:calc((100cqw + 20px) * 9 / 16);   /* cqw 按内容区算，补回横条左右各 10px 内边距 */
    box-shadow:0 22px 48px rgb(0 0 0 / .5),0 0 0 1px rgb(255 255 255 / .12);
  }
  #pane-home .hm-tool-launchers>a.has-media:hover .hm-tool-media::after,
  #pane-home .hm-tool-launchers>a.has-media:focus-visible .hm-tool-media::after{opacity:.55}
}
@media(max-width:600px){
  #pane-home .hm-tool-launchers>a.has-media{min-height:56px}
}
@media(prefers-reduced-motion:reduce){
  #pane-home .hm-tool-launchers>a.has-media .hm-tool-media{transition-duration:.12s}
  #pane-home .hm-tool-media>video{transition-duration:.18s}
}