/* ============================================================
   华宇瑞得官网 · 全站动效层（motion.css）
   与 index.html 内联版本同源，抽出供全站共用。
   依赖：html 上有 .js 类（由 motion.js 注入）
   ============================================================ */
/* ============================================================
   动效层（纯 CSS + 少量 JS 触发，无 GIF）
   全部走 transform / opacity，不触发重排
   ============================================================ */
:root{--ease:cubic-bezier(.22,.61,.36,1)}

/* --- 首屏文字逐级入场 --- */
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js .hero-txt>*{animation:heroUp .85s var(--ease) both}
.js .hero-txt>*:nth-child(1){animation-delay:.10s}
.js .hero-txt>*:nth-child(2){animation-delay:.22s}
.js .hero-txt>*:nth-child(3){animation-delay:.36s}
.js .hero-txt>*:nth-child(4){animation-delay:.50s}
.js .hero-txt>*:nth-child(5){animation-delay:.62s}

/* --- 首屏照片缓慢推近 --- */
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.055)}}
.js .hero-media .ph img{animation:kenburns 16s ease-out both}

/* --- 标题红下划线画线 --- */
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .hero h1 em::after{transform-origin:left center;animation:drawX .85s .55s var(--ease) both}

/* --- 右侧红框描入 --- */
@keyframes frameIn{from{opacity:0;transform:translate(14px,14px)}to{opacity:1;transform:none}}
.js .hero-media::after{animation:frameIn .9s .62s var(--ease) both}

/* --- 首屏浮层 --- */
@keyframes floatIn{from{opacity:0;transform:translate(-18px,10px)}to{opacity:1;transform:none}}
.js .float{animation:floatIn .9s .78s var(--ease) both}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.js .float{animation:floatIn .9s .78s var(--ease) both,bob 5.5s 1.8s ease-in-out infinite}

/* --- 滚动渐显 --- */
.js [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal="left"]{transform:translateX(-26px)}
.js [data-reveal="left"].in{transform:none}
.js [data-reveal="scale"]{transform:scale(.965)}
.js [data-reveal="scale"].in{transform:none}

/* --- 组内错峰 --- */
.js [data-stagger]>*{opacity:0;transform:translateY(20px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js [data-stagger].in>*{opacity:1;transform:none}
.js [data-stagger].in>*:nth-child(1){transition-delay:.05s}
.js [data-stagger].in>*:nth-child(2){transition-delay:.13s}
.js [data-stagger].in>*:nth-child(3){transition-delay:.21s}
.js [data-stagger].in>*:nth-child(4){transition-delay:.29s}
.js [data-stagger].in>*:nth-child(5){transition-delay:.37s}
.js [data-stagger].in>*:nth-child(6){transition-delay:.45s}

/* --- 章节标题红条展开 --- */
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.js .sec-head.in .num{border-left-color:transparent}
.js .sec-head .num{position:relative}
.js .sec-head.in .num::before{
  content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--brand);
  border-radius:2px;transform-origin:top center;animation:barGrow .5s var(--ease) both}

/* --- 卡片悬停增强（已有 translateY，补图标条与箭头） --- */
.card-img img,.news-i img,.case-img img{transition:transform .6s var(--ease),filter .4s}
.news-i:hover img{transform:scale(1.045)}
.case:hover .case-img img{transform:scale(1.035)}
.tech-i,.card,.news-i{will-change:transform}

/* --- 按钮微交互 --- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18);
  transform:translateX(-101%) skewX(-18deg);transition:transform .55s var(--ease)}
.btn:hover::after{transform:translateX(101%) skewX(-18deg)}
.btn-o::after{background:rgba(178,34,34,.10)}

/* --- 吸顶导航滚动加阴影 --- */
.hd{transition:box-shadow .3s,border-color .3s}
.hd.scrolled{box-shadow:0 6px 24px -12px rgba(26,26,26,.22);border-bottom-color:transparent}

/* --- 顶部滚动进度条 --- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--brand),#d64545);
  z-index:200;transition:width .12s linear;pointer-events:none}

/* --- 数据条数字滚动 --- */
.stat b .cnt{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums}

/* --- 客户 logo 逐个淡入 --- */
.js [data-stagger="fade"]>*{transform:none}
.js [data-stagger="fade"]>*{opacity:0;transition:opacity .5s var(--ease)}
.js [data-stagger="fade"].in>*{opacity:1}
.js [data-stagger="fade"].in>*:nth-child(1){transition-delay:.03s}
.js [data-stagger="fade"].in>*:nth-child(2){transition-delay:.08s}
.js [data-stagger="fade"].in>*:nth-child(3){transition-delay:.13s}
.js [data-stagger="fade"].in>*:nth-child(4){transition-delay:.18s}
.js [data-stagger="fade"].in>*:nth-child(5){transition-delay:.23s}
.js [data-stagger="fade"].in>*:nth-child(6){transition-delay:.28s}
.js [data-stagger="fade"].in>*:nth-child(7){transition-delay:.33s}
.js [data-stagger="fade"].in>*:nth-child(8){transition-delay:.38s}
.js [data-stagger="fade"].in>*:nth-child(9){transition-delay:.43s}

/* --- 无障碍：尊重系统「减少动态效果」 --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js [data-reveal],.js [data-stagger]>*{opacity:1!important;transform:none!important}
  .progress{display:none}
}
/* --- 打印 / 存为PDF：强制全部显形，避免空白页 --- */
@media print{
  .js [data-reveal],.js [data-stagger]>*{opacity:1!important;transform:none!important}
  .progress,.hd{display:none!important}
}