/* ============================================================
   RSH · 货运主题动效 2026.09
   纯 CSS + 内联 SVG，零第三方依赖
   1) .fw-transit  空运 / 海运 / 陆运 三条并行运输带
   2) .fw-port     港口岸桥装柜（吊起 → 平移 → 落装卡车）
   3) .fw-route    航线绘制分隔（滚动进入时描线 + 飞机掠过）
   全部支持 prefers-reduced-motion 降级、移动端降级、离屏暂停
   ============================================================ */

.fw { position: relative; }
.fw [class^="fw-"], .fw svg, .fw div { pointer-events: none; }
.fw-svg { display: block; overflow: visible; }

/* ============================================================
   1. 运输带
   ============================================================ */
.fw-transit {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #071b46;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.fw-transit .fw-lane { position: absolute; left: 0; right: 0; overflow: hidden; }
.fw-transit .fw-lane.air  { top: 0;   height: 36%; background: linear-gradient(180deg, #1c49b0 0%, #12368e 100%); }
.fw-transit .fw-lane.sea  { top: 36%; height: 36%; background: linear-gradient(180deg, #0d2f80 0%, #0a2566 100%); }
.fw-transit .fw-lane.road { top: 72%; height: 28%; background: linear-gradient(180deg, #092159 0%, #071a45 100%); }
.fw-transit .fw-lane.sea::before,
.fw-transit .fw-lane.road::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 125, 0, .5), transparent);
}

/* --- 空运 --- */
/* 云：用径向渐变替代 filter:blur —— 模糊滤镜会让每帧重绘，是最大的卡顿源 */
.fw-cloud {
  position: absolute; width: 96px; height: 20px; border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, 0) 100%);
  animation: fwCloud 38s linear infinite;
  will-change: transform;
}
.fw-cloud.c2 { width: 62px; height: 14px; top: 46%; animation-duration: 52s; animation-delay: -14s; }
@keyframes fwCloud { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 160px)); } }

.fw-dash { position: absolute; left: 0; right: 0; top: 58%; height: 24px; }
.fw-dash svg { width: 100%; height: 100%; }
.fw-dash path {
  fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 1.1;
  stroke-dasharray: 7 12; animation: fwDash 1.5s linear infinite;
}
@keyframes fwDash { to { stroke-dashoffset: -19; } }

.fw-flight {
  position: absolute; left: -110px; top: 26%; width: 86px; color: #eef4fb;
  animation: fwFly 20s linear infinite;
  will-change: transform;
}
@keyframes fwFly { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 220px)); } }
.fw-bob-a { animation: fwBobA 5.4s ease-in-out infinite; }
@keyframes fwBobA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- 海运 --- */
.fw-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 30px; opacity: .55; will-change: transform; }
.fw-wave svg { width: 100%; height: 100%; }
.fw-wave.w1 { animation: fwWave 7.5s linear infinite; }
.fw-wave.w2 { animation: fwWave2 12s linear infinite; opacity: .34; }
@keyframes fwWave  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes fwWave2 { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.fw-ship-wrap {
  position: absolute; left: -210px; bottom: 4px; width: 196px; color: #dce9f6;
  animation: fwSail 52s linear infinite;
  will-change: transform;
}
@keyframes fwSail { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 420px)); } }
.fw-rock { transform-origin: 50% 82%; animation: fwRock 6.5s ease-in-out infinite; }
@keyframes fwRock {
  0%, 100% { transform: rotate(-.9deg) translateY(0); }
  50%      { transform: rotate(.9deg) translateY(-2px); }
}

/* --- 陆运 --- */
/* 路面虚线：条纹放进伪元素，靠 transform 位移循环（合成层动画，不再逐帧重绘背景） */
.fw-road-line { position: absolute; left: 0; right: 0; bottom: 30%; height: 2px; overflow: hidden; }
.fw-road-line::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: calc(100% + 60px);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 26px, transparent 26px 60px);
  animation: fwRoad 2.6s linear infinite;
  will-change: transform;
}
@keyframes fwRoad { to { transform: translateX(-60px); } }

.fw-truck-wrap {
  position: absolute; left: -170px; bottom: 3px; width: 148px; color: #e6eef7;
  animation: fwDrive 17s linear infinite;
  will-change: transform;
}
@keyframes fwDrive { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 340px)); } }
.fw-jog { animation: fwJog 1.15s ease-in-out infinite; }
@keyframes fwJog { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.fw-wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: fwSpin 1.05s linear infinite; }
@keyframes fwSpin { to { transform: rotate(360deg); } }

/* 轨道标签 */
.fw-tag {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: 3px; color: rgba(255, 255, 255, .42);
}

/* ============================================================
   2. 港口装柜
   ============================================================ */
.fw-port {
  position: relative; height: 210px; overflow: hidden;
  background: linear-gradient(180deg, #0e2f78 0%, #082054 62%, #071a45 100%);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* 全宽贯通地面，与舞台内地面齐平 */
.fw-port::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: rgba(255, 255, 255, .07);
}
.fw-port::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 28px; height: 1.4px;
  background: linear-gradient(90deg, rgba(245, 125, 0, .15), rgba(245, 125, 0, .45) 50%, rgba(245, 125, 0, .15));
}
.fw-port .fw-stage { position: absolute; left: 50%; bottom: 0; width: 640px; height: 210px; transform: translateX(-50%); }
.fw-port .fw-stage > svg { width: 100%; height: 100%; }

/* 小车沿主梁行走（水平） */
.fw-hx { animation: fwHoistX 12s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes fwHoistX {
  0%, 10%  { transform: translateX(0); }
  22%      { transform: translateX(0); }
  42%      { transform: translateX(240px); }
  66%      { transform: translateX(240px); }
  78%, 100%{ transform: translateX(0); }
}
/* 吊具升降（垂直） */
.fw-hy { animation: fwHoistY 12s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes fwHoistY {
  0%, 10%   { transform: translateY(0); }
  22%, 42%  { transform: translateY(-84px); }
  54%, 66%  { transform: translateY(-42px); }
  68%, 100% { transform: translateY(0); }
}
/* 被吊箱体：落装后隐去，回程复位 */
.fw-boxlift { animation: fwBoxFade 12s linear infinite; }
@keyframes fwBoxFade {
  0%, 62%   { opacity: 1; }
  64%, 94%  { opacity: 0; }
  96%, 100% { opacity: 1; }
}
/* 已装车箱体：随卡车驶离后清空 */
.fw-boxload { opacity: 0; animation: fwBoxLoad 12s linear infinite; }
@keyframes fwBoxLoad {
  0%, 60%   { opacity: 0; }
  64%, 76%  { opacity: 1; }
  79%, 100% { opacity: 0; }
}
/* 卡车：装载完成 → 驶离 → 由左驶回 */
.fw-ptruck { animation: fwTruckAway 12s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes fwTruckAway {
  0%, 66%    { transform: translateX(0); }
  76%        { transform: translateX(300px); }
  77%        { transform: translateX(-640px); }
  95%, 100%  { transform: translateX(0); }
}

/* ============================================================
   3. 航线分隔
   ============================================================ */
.fw-route { position: relative; height: 84px; overflow: hidden; }
.fw-route svg { width: 100%; height: 100%; }
.fw-rline {
  fill: none; stroke: rgba(11, 46, 131, .18); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
}
.fw-route.in .fw-rline { animation: fwDraw 2s cubic-bezier(.35, .8, .3, 1) forwards; }
@keyframes fwDraw { to { stroke-dashoffset: 0; } }

.fw-rdash {
  fill: none; stroke: rgba(245, 125, 0, .5); stroke-width: 1.4;
  stroke-dasharray: 3 9; opacity: 0; transition: opacity .8s ease 1.1s;
}
.fw-route.in .fw-rdash { opacity: 1; animation: fwDashR 2.6s linear 1.1s infinite; }
@keyframes fwDashR { to { stroke-dashoffset: -24; } }

.fw-rplane { opacity: 0; }
.fw-route.in .fw-rplane { animation: fwPlaneBy 7s ease-in-out 1.2s infinite; }
@keyframes fwPlaneBy {
  0%       { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  7%       { opacity: .85; }
  52%      { transform: translate(52vw, -18px) rotate(-5deg); }
  93%      { opacity: .85; }
  100%     { transform: translate(106vw, 2px) rotate(0deg); opacity: 0; }
}

/* ============================================================
   离屏暂停（节能）
   ============================================================ */
.fw-pause .fw-flight, .fw-pause .fw-ship-wrap, .fw-pause .fw-truck-wrap,
.fw-pause .fw-cloud, .fw-pause .fw-wave, .fw-pause .fw-road-line::before,
.fw-pause .fw-hx, .fw-pause .fw-hy, .fw-pause .fw-ptruck,
.fw-pause .fw-boxlift, .fw-pause .fw-boxload,
.fw-pause .fw-rdash, .fw-pause .fw-rplane { animation-play-state: paused; }

/* ============================================================
   性能自适应：帧率不足时自动减负（由 motion.js 打上类名）
   motion-lite —— 关掉逐帧重绘型动画，保留主体平移
   motion-off  —— 全部静止，停在可读的静态画面
   ============================================================ */
html.motion-lite .fw-cloud,
html.motion-lite .fw-road-line::before,
html.motion-lite .fw-dash path,
html.motion-lite .fw-wheel,
html.motion-lite .fw-bob-a,
html.motion-lite .fw-rock,
html.motion-lite .fw-jog,
html.motion-lite .fw-wave.w2,
html.motion-lite .fw-rdash,
html.motion-lite .fw-hx,
html.motion-lite .fw-hy,
html.motion-lite .fw-boxlift,
html.motion-lite .fw-boxload,
html.motion-lite .fw-ptruck,
html.motion-lite .stats::before,
html.motion-lite .stats::after,
html.motion-lite .page-hero::before,
html.motion-lite .page-hero .route-plane,
html.motion-lite footer::before,
html.motion-lite .hero-media::after,
html.motion-lite .cta::after { animation: none !important; }

/* motion-off —— 与下方 @media (prefers-reduced-motion: reduce) 完全同一套静态终态
   注意：场景根元素是 <div class="fw-transit" data-fw="transit">，没有 .fw 类！
   静态化必须用 [data-fw] 选择器——用 .fw 后代选择器一条都匹配不上（2026-09-19 diag 实锤：motion-off 下仍有 13 个动画在跑） */
html.motion-off [data-fw],
html.motion-off [data-fw] * { animation: none !important; transition: none !important; }
html.motion-off .fw-flight     { left: 14% !important; }
html.motion-off .fw-ship-wrap  { left: 44% !important; }
html.motion-off .fw-truck-wrap { left: 66% !important; }
html.motion-off .fw-cloud      { display: none; }
html.motion-off .fw-hx { transform: translateX(120px); }
html.motion-off .fw-hy { transform: translateY(-84px); }
html.motion-off .fw-boxlift { opacity: 1; }
html.motion-off .fw-boxload { opacity: 0; }
html.motion-off .fw-ptruck  { transform: translateX(0); }
html.motion-off .fw-rline  { stroke-dashoffset: 0; }
html.motion-off .fw-rdash  { opacity: 1; }
html.motion-off .fw-rplane { opacity: .85; transform: translate(38vw, -14px); }
/* 装饰性动画与进场效果也一并静止：motion-off = 全页零动画 */
html.motion-off .stats::before, html.motion-off .stats::after,
html.motion-off .page-hero::before, html.motion-off .page-hero .route-plane,
html.motion-off footer::before, html.motion-off .hero-media::after,
html.motion-off .cta::after { animation: none !important; }
html.motion-off .reveal { opacity: 1; transform: none; transition: none !important; }
html.motion-off .reveal.in .svc-card, html.motion-off .reveal.in .news-card,
html.motion-off .reveal.in .feat-card, html.motion-off .reveal.in .quote-item,
html.motion-off .reveal.in .badge, html.motion-off .reveal.in .contact-card,
html.motion-off .reveal.in .adv-item, html.motion-off .reveal.in .flow-step,
html.motion-off .reveal.in .qr-item, html.motion-off .sections-grid > * { animation: none !important; }

/* ============================================================
   移动端降级
   ============================================================ */
@media (max-width: 900px) {
  .fw-transit { height: 168px; }
  .fw-port { height: 176px; }
  .fw-port .fw-stage { width: 560px; height: 176px; }
  .fw-route { height: 64px; }
  .fw-tag { right: 16px; font-size: 10px; letter-spacing: 2px; }
}
@media (max-width: 640px) {
  .fw-transit { height: 148px; }
  .fw-port { height: 150px; }
  .fw-port .fw-stage { width: 470px; height: 150px; }
  .fw-route { height: 54px; }
  .fw-cloud { display: none; }
  .fw-flight { width: 66px; }
  .fw-ship-wrap { width: 150px; }
  .fw-truck-wrap { width: 116px; }
  .fw-tag { display: none; }
}

/* ============================================================
   无障碍：减弱动效 —— 停在可读的静态终态，不隐藏任何元素
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-fw], [data-fw] *, [data-fw] *::before, [data-fw] *::after { animation: none !important; transition: none !important; }
  .fw-flight   { left: 14% !important; }
  .fw-ship-wrap{ left: 44% !important; }
  .fw-truck-wrap { left: 66% !important; }
  .fw-cloud    { display: none; }
  .fw-hx { transform: translateX(120px); }
  .fw-hy { transform: translateY(-84px); }
  .fw-boxlift { opacity: 1; }
  .fw-boxload { opacity: 0; }
  .fw-ptruck { transform: translateX(0); }
  .fw-rline { stroke-dashoffset: 0; }
  .fw-rdash { opacity: 1; }
  .fw-rplane { opacity: .85; transform: translate(38vw, -14px); }
}