/* ==========================================================================
   RXCTEM 官网 · 动效层 motion.css
   依赖 style.css 中的 :root 变量（--navy / --orange / --dark）
   全部纯 CSS + 矢量，零外部依赖，可离线运行
   ========================================================================== */

:root{--ez:cubic-bezier(.19,1,.22,1)}

/* ---------- 0. 顶部滚动进度条 ---------- */
#sbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;pointer-events:none;
  background:linear-gradient(90deg,var(--orange),#ffb25e 55%,#ffd9a8);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---------- 1. 顶栏滚动收紧 ---------- */
header{transition:box-shadow .35s ease}
header .nav{transition:height .38s var(--ez)}
header .nav img.logo{transition:height .38s var(--ez),opacity .3s}
header.sm .nav{height:58px}
header.sm .nav img.logo{height:30px}
header.sm{box-shadow:0 6px 22px rgba(10,30,70,.13)}

/* ---------- 2. HERO 背景：走线缓慢漂移 ---------- */
.hero .pat{inset:-170px;will-change:transform}
.hero .pat img{animation:patDrift 52s linear infinite}
@keyframes patDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-120px,-120px,0)}}

/* ---------- 3. HERO 电流流光 ---------- */
.hero .flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}
.hero .flow .base{fill:none;stroke:rgba(132,182,240,.4);stroke-width:1.3;vector-effect:non-scaling-stroke}
.hero .flow .sp{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:20 980;stroke-dashoffset:1000;animation:flowRun 5.4s linear infinite;
  filter:drop-shadow(0 0 5px rgba(248,120,5,.9))}
@keyframes flowRun{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.hero .flow .d1{animation-delay:0s}
.hero .flow .d2{animation-delay:1.25s}
.hero .flow .d3{animation-delay:2.5s}
.hero .flow .d4{animation-delay:3.55s}
.hero .flow .d5{animation-delay:4.4s}

/* ---------- 4. HERO 扫光带 ---------- */
.hero .scan{position:absolute;top:-30%;left:0;width:32%;height:160%;pointer-events:none;
  background:linear-gradient(96deg,transparent 0%,rgba(255,255,255,.06) 40%,rgba(255,182,100,.17) 52%,rgba(255,255,255,.05) 64%,transparent 100%);
  mix-blend-mode:screen;will-change:transform;
  animation:sweep 8.5s cubic-bezier(.55,.05,.25,1) infinite}
@keyframes sweep{
  0%{transform:skewX(-14deg) translateX(-70vw)}
  55%,100%{transform:skewX(-14deg) translateX(150vw)}}

/* ---------- 5. HERO 装饰板卡剪影 ---------- */
.hero .ghost{position:absolute;right:-3%;top:50%;width:540px;max-width:48vw;pointer-events:none;
  opacity:.15;z-index:1;will-change:transform;
  animation:floaty 9.5s ease-in-out infinite}
.hero .ghost img{width:100%;display:block}
@keyframes floaty{
  0%,100%{transform:translateY(-50%) rotate(-7deg)}
  50%{transform:translateY(calc(-50% - 18px)) rotate(-5.4deg)}}

/* ---------- 6. HERO 内容分级入场 ---------- */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .ln>i{display:block;font-style:normal}
html.js .hero h1 .ln>i{transform:translateY(115%);opacity:0;
  transition:transform 1.05s var(--ez),opacity .75s ease}
html.js .hero.ready h1 .ln>i{transform:none;opacity:1}
html.js .hero.ready h1 .ln:nth-child(2)>i{transition-delay:.17s}

html.js .hero [data-hv]{opacity:0;transform:translateY(22px);
  transition:opacity .85s ease,transform .85s var(--ez)}
html.js .hero.ready [data-hv]{opacity:1;transform:none}

/* 芯片标签逐个弹入 */
html.js .hero .chips span{opacity:0}
html.js .hero.ready .chips span{opacity:1;animation:popIn .65s var(--ez) backwards;
  animation-delay:calc(.62s + var(--i,0) * .09s)}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.9)}}
.hero .chips span{transition:transform .3s var(--ez),border-color .3s,background .3s,color .3s}
.hero .chips span:hover{transform:translateY(-4px);border-color:rgba(248,120,5,.9);
  background:rgba(248,120,5,.22);color:#fff}

/* 按钮扫光 */
.btn{position:relative;overflow:hidden;transition:background .3s,transform .3s var(--ez),box-shadow .3s}
.btn.o:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(248,120,5,.35)}
.btn.n:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(4,54,125,.3)}
.btn.ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn::after{content:"";position:absolute;top:-20%;left:-130%;width:55%;height:140%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg)}
.btn:hover::after{animation:shine .75s ease}
@keyframes shine{from{left:-130%}to{left:150%}}

/* ---------- 7. 通用滚动进场 ---------- */
html.js .rv{opacity:0;transform:translateY(26px)}
html.js .rv.iv{opacity:1;transform:none;
  transition:opacity .8s ease var(--d,0s),transform .8s var(--ez) var(--d,0s)}

/* 标题下方橙色短杠：从中间展开 */
html.js .sec-h .bar{transform:scaleX(0);transition:transform .95s var(--ez) .28s}
html.js .sec-h.iv .bar{transform:scaleX(1)}

/* 卡片细节 */
.card .bimg img,.pd .bimg img{transition:transform .65s var(--ez)}
.card:hover .bimg img{transform:translateY(-6px) scale(1.035)}
.card .bd .go{transition:transform .3s var(--ez),color .3s}
.card:hover .bd .go{transform:translateX(6px)}

.biz::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;border-radius:12px 12px 0 0;
  background:linear-gradient(90deg,var(--orange),#ffc27a);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ez)}
.biz:hover::after{transform:scaleX(1)}
.biz .ic{transition:color .4s,transform .4s var(--ez)}
.biz:hover .ic{color:rgba(248,120,5,.55);transform:translateY(-3px) scale(1.08)}

.q{transition:transform .35s var(--ez),box-shadow .35s,border-top-color .35s}
.q:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(8,35,80,.12);border-top-color:var(--orange)}

.step{transition:transform .35s var(--ez),box-shadow .35s}
.step:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(8,35,80,.12)}
.step .n{transition:background .35s,transform .35s var(--ez)}
.step:hover .n{background:var(--orange);transform:scale(1.1)}

.tech .plat span{transition:color .35s,transform .35s var(--ez)}
.tech .plat span:hover{color:#fff;transform:translateY(-4px)}

details{transition:border-color .3s,box-shadow .3s}
details[open]{border-color:rgba(4,54,125,.3);box-shadow:0 8px 22px rgba(8,35,80,.08)}
details summary{transition:color .3s}
details summary:hover{color:var(--navy)}

/* ---------- 8. 页脚顶部流动走线 ---------- */
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--orange) 0 26px,transparent 26px 62px);
  background-size:62px 2px;animation:footRun 2.8s linear infinite}
@keyframes footRun{to{background-position:62px 0}}

/* ---------- 9. 回到顶部 ---------- */
#totop{position:fixed;right:26px;bottom:34px;width:46px;height:46px;border:0;border-radius:50%;
  background:var(--navy);color:#fff;font-size:19px;line-height:1;cursor:pointer;z-index:90;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(4,54,125,.35);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .35s var(--ez),transform .35s var(--ez),background .3s}
#totop.on{opacity:1;transform:none;pointer-events:auto}
#totop:hover{background:var(--orange);transform:translateY(-5px)}

/* ---------- 10. 降级：系统开启"减弱动态效果" ---------- */
@media (prefers-reduced-motion: reduce){
  .hero .pat img,.hero .flow .sp,.hero .scan,.hero .ghost,footer::before{animation:none!important}
  html.js .rv,html.js .hero [data-hv],html.js .hero .chips span,html.js .hero h1 .ln>i{opacity:1!important;transform:none!important}
  html.js .sec-h .bar{transform:none!important}
  .card:hover .bimg img{transform:none}
}

/* ---------- 11. 移动端收敛 ---------- */
@media (max-width:960px){
  .hero .scan{display:none}
  .hero .ghost{opacity:.09;right:-14%}
  .hero .flow{opacity:.5}
  #totop{right:14px;bottom:18px;width:42px;height:42px}
}