/* ============================================================
 * QANSUN 动态横幅抬头（双语页共用）
 * 来源：Billy哥 提供的「QANSUN千乘横幅抬头」设计稿
 * 沙漠天际线 × 金色EV循环驶过 × 充电桩 × 逐字弹跳标题
 * ============================================================ */

.q-banner{
  --q-night:#0b1026; --q-night2:#141233; --q-deep:#1b1440;
  --q-gold:#e8c15a; --q-gold2:#ffd88a; --q-gold3:#b8892e;
  --q-teal:#2fc4b2; --q-sand:#f5e6c4;
  position:relative;width:100%;height:400px;overflow:hidden;
  background:radial-gradient(ellipse 90% 130% at 28% 40%, var(--q-deep) 0%, var(--q-night2) 48%, var(--q-night) 100%);
  font-family:"Segoe UI","Noto Sans Arabic","Arabic Typesetting","PingFang SC","Microsoft YaHei",sans-serif;
}

/* ===== 光晕球 ===== */
.q-banner .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:qOrbFloat 9s ease-in-out infinite}
.q-banner .orb1{width:380px;height:380px;background:radial-gradient(circle,rgba(232,193,90,.55),transparent 70%);top:-140px;left:4%}
.q-banner .orb2{width:320px;height:320px;background:radial-gradient(circle,rgba(47,196,178,.38),transparent 70%);bottom:-110px;right:4%;animation-delay:3s}
@keyframes qOrbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,16px) scale(1.08)}}

/* ===== 星尘 ===== */
.q-banner .dust i{position:absolute;width:3px;height:3px;background:var(--q-gold2);border-radius:50%;animation:qRise 7s linear infinite}
@keyframes qRise{0%{transform:translateY(0);opacity:0}12%{opacity:.85}100%{transform:translateY(-130px);opacity:0}}

/* ===== 沙漠元素（热浪薄雾+风沙粒子） ===== */
.q-banner .sand-haze{position:absolute;bottom:0;left:0;right:0;height:74px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(140,100,35,.18) 55%,rgba(100,70,25,.3))}
.q-banner .sand i{position:absolute;width:2.6px;height:2.6px;background:rgba(255,216,138,.65);border-radius:50%;
  filter:blur(.4px);animation:qSandDrift 5.5s linear infinite;z-index:5}
@keyframes qSandDrift{
  0%{transform:translate(0,0) scaleX(1);opacity:0}
  12%{opacity:.8}
  85%{opacity:.45}
  100%{transform:translate(-95px,-8px) scaleX(2.6);opacity:0}
}

/* ===== 新月（右上） ===== */
.q-banner .crescent{position:absolute;top:34px;right:6%;width:62px;filter:drop-shadow(0 0 12px rgba(232,193,90,.6));animation:qCresGlow 4s ease-in-out infinite;z-index:5}
@keyframes qCresGlow{0%,100%{opacity:.7}50%{opacity:1}}

/* ===== 金色光束扫过 ===== */
.q-banner .beam{position:absolute;top:0;bottom:0;width:190px;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,216,138,.14),transparent);
  animation:qBeamSweep 6s ease-in-out infinite;pointer-events:none;z-index:4}
@keyframes qBeamSweep{0%{left:-18%}55%{left:105%}100%{left:105%}}

/* ===== 穹顶天际线（底部背景层） ===== */
.q-banner .skyline{position:absolute;bottom:0;left:0;width:100%;height:150px;opacity:.95;z-index:2}
.q-banner .mosque-moon{animation:qMmoon 4.5s ease-in-out infinite}
@keyframes qMmoon{0%,100%{opacity:.6}50%{opacity:1}}
.q-banner .burj-spine{stroke-dasharray:6 90;animation:qSpineRun 3s linear infinite}
@keyframes qSpineRun{to{stroke-dashoffset:-96}}
.q-banner .burj-beacon{animation:qBeacon 2s ease-in-out infinite}
@keyframes qBeacon{0%,100%{opacity:.25}50%{opacity:1}}

/* ===== 底部金路+EV循环驶过 ===== */
.q-banner .road{position:absolute;bottom:16px;left:0;right:0;height:2px;z-index:5;
  background:linear-gradient(90deg,transparent,var(--q-gold) 25%,var(--q-gold2) 50%,var(--q-gold) 75%,transparent);
  box-shadow:0 0 14px rgba(232,193,90,.7);animation:qRoadPulse 2.2s ease-in-out infinite}
@keyframes qRoadPulse{0%,100%{opacity:.5}50%{opacity:1}}
.q-banner .car-svg{position:absolute;bottom:22px;left:0;width:190px;z-index:6;
  filter:drop-shadow(0 0 10px rgba(232,193,90,.45));
  animation:qCarLoop 9s linear infinite}
@keyframes qCarLoop{from{transform:translateX(-220px)}to{transform:translateX(105vw)}}
.q-banner .wheel{animation:qSpin .9s linear infinite;transform-origin:center}
@keyframes qSpin{to{transform:rotate(360deg)}}

/* ===== 充电桩（右侧·金路旁） ===== */
.q-banner .charger{position:absolute;right:2%;bottom:16px;width:78px;z-index:6;pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(232,193,90,.38));
  animation:qChargerPop 1.1s 1.15s cubic-bezier(.2,1.4,.4,1) both}
@keyframes qChargerPop{from{opacity:0;transform:translateY(46px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
.q-banner .charger svg{width:100%;display:block}
.q-banner .chg-fill{transform-box:fill-box;transform-origin:50% 100%;animation:qChgFill 4.5s ease-in-out infinite}
@keyframes qChgFill{0%{transform:scaleY(.05)}70%{transform:scaleY(1)}82%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
.q-banner .chg-bolt{animation:qBoltPulse 4.5s ease-in-out infinite}
@keyframes qBoltPulse{0%,100%{opacity:.5}70%{opacity:1}}
.q-banner .chg-lamp{animation:qLampBreath 2.2s ease-in-out infinite}
@keyframes qLampBreath{0%,100%{opacity:.4}50%{opacity:1}}

/* ===== 汽油加油站（左侧·金路旁，与右侧充电桩呼应） ===== */
.q-banner .gas-station{position:absolute;left:2%;bottom:16px;width:78px;z-index:6;pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(232,193,90,.38));
  animation:qGasPop 1.1s .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes qGasPop{from{opacity:0;transform:translateY(46px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
.q-banner .gas-station svg{width:100%;display:block}
.q-banner .gas-sign{animation:qGasSign 2.4s ease-in-out infinite}
@keyframes qGasSign{0%,100%{opacity:.55}50%{opacity:1}}
.q-banner .gas-drop{transform-box:fill-box;transform-origin:center;animation:qGasDrop 3s ease-in-out infinite}
@keyframes qGasDrop{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(3px)}}
.q-banner .gas-price{animation:qGasPrice 3.4s ease-in-out infinite}
@keyframes qGasPrice{0%,100%{opacity:.6}50%{opacity:1}}

/* ===== 横幅主内容：logo最左 + 垂直金线 + 右侧两行 ===== */
.q-banner .banner-inner{position:relative;z-index:7;height:calc(100% - 40px);display:flex;align-items:center;gap:38px;
  padding:0 6vw;max-width:1280px;margin:0 auto}

/* logo列 */
.q-banner .logo-col{flex:none;animation:qLogoPop 1s cubic-bezier(.2,1.4,.4,1) both}
.q-banner .logo-col img{width:172px;display:block;filter:drop-shadow(0 0 20px rgba(232,193,90,.5));
  animation:qLogoGlow 3.5s 1s ease-in-out infinite}
@keyframes qLogoPop{from{opacity:0;transform:translateX(-60px) scale(.8)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes qLogoGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(232,193,90,.38))}50%{filter:drop-shadow(0 0 28px rgba(232,193,90,.72))}}

/* 垂直阿拉伯金线 */
.q-banner .v-line{flex:none;width:3px;height:170px;position:relative;
  background:linear-gradient(180deg,transparent,var(--q-gold) 20%,var(--q-gold2) 50%,var(--q-gold) 80%,transparent);
  animation:qVGrow .8s .35s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes qVGrow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
.q-banner .v-line::before,.q-banner .v-line::after{content:"✦";position:absolute;left:50%;transform:translate(-50%,-50%);color:var(--q-gold);
  font-size:14px;text-shadow:0 0 10px rgba(232,193,90,.9);animation:qDmTw 3s ease-in-out infinite}
.q-banner .v-line::before{top:-4px}
.q-banner .v-line::after{bottom:-4px}
@keyframes qDmTw{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

/* 文字列：四行（EN 主标题 / AR / FR / CN 出海） */
.q-banner .text-col{flex:1;min-width:0}
.q-banner h1.title-en{font-size:clamp(17px,2.55vw,33px);font-weight:900;letter-spacing:1.2px;line-height:1.15;white-space:nowrap;
  color:#fff;text-shadow:0 0 18px rgba(255,255,255,.28),0 0 34px rgba(232,193,90,.18)}
.q-banner h1.title-en span{display:inline-block;opacity:0;animation:qCharBounce .72s cubic-bezier(.25,.9,.35,1.2) both}
.q-banner h1.title-en span.os-hl{font-size:.52em;font-weight:700;letter-spacing:.5px;vertical-align:2px;
  color:#dbe4ea;text-shadow:none}
/* 逐字弹跳 */
@keyframes qCharBounce{
  0%{opacity:0;transform:translateY(-64px) scale(.55)}
  48%{opacity:1;transform:translateY(10px) scale(1.12)}
  64%{transform:translateY(-11px) scale(.98)}
  80%{transform:translateY(4px) scale(1.03)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* 第二行副标题：阿拉伯语（暗沙金色） */
.q-banner h2.title-ar{margin-top:9px;font-size:clamp(14px,2vw,24px);font-weight:800;color:#c9a86c;direction:rtl;
  line-height:1.45;text-shadow:0 0 16px rgba(201,168,108,.35);text-align:left}
.q-banner h2.title-ar span{display:inline-block;opacity:0;animation:qCharBounce .7s cubic-bezier(.25,.9,.35,1.2) both}
[dir="rtl"] .q-banner h2.title-ar{text-align:right}

/* 第三行副标题：法语（蓝光） */
.q-banner h3.title-fr{margin-top:5px;font-size:clamp(13px,1.85vw,21px);font-weight:800;letter-spacing:1px;line-height:1.35;
  color:#7fd6ff;text-shadow:0 0 14px rgba(127,214,255,.4)}
.q-banner h3.title-fr span{display:inline-block;opacity:0;animation:qCharBounce .7s cubic-bezier(.25,.9,.35,1.2) both}

/* 第四行副标题：千乘出海 · GULF & NORTH AFRICA ...（中文青色高亮） */
.q-banner h4.title-cn{margin-top:9px;font-size:clamp(12px,1.6vw,18px);font-weight:800;letter-spacing:3px;line-height:1.35;
  color:rgba(245,230,196,.82)}
.q-banner h4.title-cn span{display:inline-block;opacity:0;animation:qCharBounce .7s cubic-bezier(.25,.9,.35,1.2) both}
.q-banner h4.title-cn span.zh-hl{background:linear-gradient(180deg,#fff 18%,var(--q-teal) 55%,#1a8f82 85%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}

/* 阿语页：整页 RTL 时阿语副标题右对齐 */
html[dir="rtl"] .q-banner h2.title-ar { text-align: right; }

/* ===== 横幅下方的承接条（CTA + 数据）— 与全站青绿×暗蓝背景融合 ===== */
.banner-strip{
  background:linear-gradient(180deg,rgba(6,34,47,.96) 0%,rgba(8,44,63,.45) 100%);
  color:#c6d4e2;padding:26px 0 34px;border-top:1px solid rgba(94,234,212,.22);
}
.banner-strip .lead{max-width:760px;color:#c6d4e2;font-size:1.02rem;margin:0 auto 18px;text-align:center}
.banner-strip .hero-cta{justify-content:center;margin-top:0}
.banner-strip .hero-stats{justify-content:center;gap:38px;margin-top:26px}

@media (max-width:1100px){
  .q-banner .charger{width:54px;right:.6%}
  .q-banner .gas-station{width:54px;left:.6%}
}
@media (max-width:820px){
  .q-banner{height:360px}
  .q-banner .banner-inner{flex-direction:column;justify-content:center;gap:16px;text-align:center;padding-top:20px}
  .q-banner .logo-col img{width:120px;margin:0 auto}
  .q-banner .v-line{display:none}
  .q-banner h1.title-en{white-space:nowrap;letter-spacing:.4px;font-size:clamp(11px,3.2vw,18px)}
  .q-banner h2.title-ar{text-align:center}
  .q-banner h4.title-cn{text-align:center;letter-spacing:1.5px}
  .q-banner .crescent{width:40px;top:24px;right:4%}
  .q-banner .charger{width:44px;right:3%}
  .q-banner .gas-station{width:44px;left:3%}
  .banner-strip .hero-stats{gap:22px}
}

/* 尊重减少动态偏好 */
@media (prefers-reduced-motion: reduce){
  .q-banner *, .q-banner *::before, .q-banner *::after{animation:none !important}
}