/* QONE fx.css — site-wide visual effects */

/* ---------- 5. partner logo marquee ---------- */
.logo-strip.fx-marquee{flex-wrap:nowrap;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marquee .fx-track{display:flex;align-items:center;gap:56px;width:max-content;
  animation:fxMarquee 36s linear infinite;will-change:transform}
.fx-marquee:hover .fx-track{animation-play-state:paused}
.fx-marquee .fx-track img{height:28px;width:auto;max-width:120px;object-fit:contain;
  opacity:.75;filter:grayscale(1);transition:.25s}
.fx-marquee .fx-track img:hover{opacity:1;filter:none;transform:scale(1.12)}
@keyframes fxMarquee{to{transform:translateX(-50%)}}

/* ---------- 6. product card hover ---------- */
.prod-card,.cat-preview-card,.story-card{transition:transform .35s cubic-bezier(.2,.7,.3,1.2),box-shadow .35s;position:relative;overflow:hidden}
.prod-card:hover,.cat-preview-card:hover{transform:translateY(-8px) scale(1.015);
  box-shadow:0 18px 40px -14px rgba(10,60,100,.28)}
.story-card:hover{transform:translateY(-5px);box-shadow:0 14px 32px -14px rgba(10,60,100,.22)}
.prod-card::after,.cat-preview-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s ease}
.prod-card:hover::after,.cat-preview-card:hover::after{transform:translateX(120%)}
.prod-card img,.cat-preview-card img{transition:transform .6s ease}
.prod-card:hover img,.cat-preview-card:hover img{transform:scale(1.06)}

/* ---------- 9. reveal stagger + button micro-interactions ---------- */
.reveal{transition-duration:.7s !important}
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(10,90,150,.5)}
.btn:active{transform:translateY(0) scale(.97)}
.fx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);
  transform:scale(0);animation:fxRipple .6s ease-out forwards;pointer-events:none}
@keyframes fxRipple{to{transform:scale(3.2);opacity:0}}
.wa-fab{animation:fxPulse 2.6s ease-in-out infinite}
@keyframes fxPulse{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.22),0 0 0 0 rgba(37,211,102,.45)}
  55%{box-shadow:0 4px 14px rgba(0,0,0,.22),0 0 0 14px rgba(37,211,102,0)}}

/* ---------- 2. countup ---------- */
.fx-count{font-variant-numeric:tabular-nums}

/* ---------- 4. factory process scroll animation ---------- */
.step-row .step{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s;border-top-color:var(--line,#e6e8eb)}
.step-row .step::before{content:'';display:block;height:3px;background:linear-gradient(90deg,#0a72b8,#39c2ff);
  width:0;margin-top:-3px;transition:width .8s ease .15s;border-radius:2px}
.step-row .step.lit{opacity:1;transform:none}
.step-row .step.lit::before{width:100%}
.step-row .step.lit .no{animation:fxGlow 1.2s ease}
@keyframes fxGlow{0%{text-shadow:0 0 0 rgba(10,114,184,0)}40%{text-shadow:0 0 16px rgba(10,114,184,.8)}100%{text-shadow:none}}

/* ---------- 10. form success card ---------- */
.fx-success{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#eaf7ef,#e7f3fb);
  border:1px solid #bfe3cc;border-radius:14px;padding:20px 22px;margin-top:16px;
  animation:fxPop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes fxPop{from{transform:scale(.85);opacity:0}}
.fx-success svg{flex:0 0 52px}
.fx-success .ck{stroke:#1fa75c;stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60;animation:fxDraw .7s ease .25s forwards}
.fx-success .cir{stroke:#1fa75c;stroke-width:3;fill:none;stroke-dasharray:170;stroke-dashoffset:170;
  animation:fxDraw .8s ease forwards}
@keyframes fxDraw{to{stroke-dashoffset:0}}
.fx-success h5{font-size:16px;margin:0 0 3px}
.fx-success p{font-size:13.5px;color:#41505c;margin:0}
.fx-success a{color:#128c4b;font-weight:700}

/* ---------- hero ambience (homepage) ---------- */
.hero.fx-hero{position:relative;overflow:hidden}
.hero.fx-hero .wrap{position:relative;z-index:2}
#fxHeroFx{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero.fx-hero::before{content:'';position:absolute;inset:-40%;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(38% 42% at 22% 30%,rgba(57,194,255,.20),transparent 70%),
             radial-gradient(34% 38% at 78% 22%,rgba(10,114,184,.16),transparent 70%),
             radial-gradient(30% 34% at 60% 80%,rgba(120,210,255,.14),transparent 70%);
  animation:fxAurora 16s ease-in-out infinite alternate}
@keyframes fxAurora{from{transform:translate3d(-3%,-2%,0) rotate(-1.5deg)}to{transform:translate3d(3%,2%,0) rotate(1.5deg)}}
.hero .grad{background-size:200% auto;animation:fxGradShift 6s ease-in-out infinite alternate;
  -webkit-background-clip:text;background-clip:text}
@keyframes fxGradShift{to{background-position:100% center}}

@media (prefers-reduced-motion: reduce){
  .fx-marquee .fx-track,.wa-fab,.hero.fx-hero::before,.hero .grad{animation:none !important}
  .prod-card,.cat-preview-card,.btn{transition:none}
  .step-row .step{opacity:1;transform:none}
}

/* T1 defensive: global card image fallback is always light */
.global-card .gc-img{background-color:#eef3f7 !important}

/* ---------- 8. global route network (moved here so it can never be dropped) ---------- */
.qmap{margin:38px 0 8px;position:relative}
.qmap svg{width:100%;height:auto;display:block}
.qmap .note{text-align:center;font-size:13px;color:var(--ink-soft,#5b6066);margin-top:10px}
.qmap .arc{fill:none;stroke:url(#qarcGrad);stroke-width:1.6;stroke-linecap:round;
 stroke-dasharray:6 7;animation:qDash 1.4s linear infinite;opacity:.85}
@keyframes qDash{to{stroke-dashoffset:-13}}
.qmap .node{fill:#0a72b8}
.qmap .pulse{fill:none;stroke:#39c2ff;stroke-width:1.4;opacity:.8;transform-box:fill-box;transform-origin:center;
 animation:qPulse 2.4s ease-out infinite}
@keyframes qPulse{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
.qmap .hub{fill:#ff8a3d}
.qmap .hubpulse{stroke:#ff8a3d}
.qmap text{font-size:11px;fill:#41505c;font-weight:700}
.qmap .grat{fill:none;stroke:#c9dcea;stroke-width:.8;opacity:.65}
@media (prefers-reduced-motion: reduce){.qmap .arc,.qmap .pulse{animation:none !important}}