/* =========================================================
   全站动效：鼠标跟随光晕 / 卡片3D倾斜高光 / 图标微动效 / 滚动渐显
   深蓝主题 · 高端大气
   ========================================================= */

/* ---------- 鼠标跟随光晕 ---------- */
.fx-glow{
  position:fixed;left:0;top:0;width:380px;height:380px;border-radius:50%;
  pointer-events:none;z-index:3;
  background:radial-gradient(circle,rgba(125,180,255,.15) 0%,rgba(80,140,235,.09) 40%,rgba(60,120,220,0) 70%);
  transform:translate(-600px,-600px);
  will-change:transform;
}

/* ---------- 卡片 3D 倾斜 + 高光 ---------- */
.fx-tilt{position:relative;transform-style:preserve-3d;transition:transform .25s ease, box-shadow .25s ease;will-change:transform}
.fx-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .28s;z-index:2;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.85),rgba(125,180,255,.22) 45%,rgba(125,180,255,0) 72%)}
.fx-tilt:hover .fx-sheen{opacity:1}

/* ---------- 图标 hover 弹跳 ---------- */
.fx-tilt:hover .fc-ic,
.fx-tilt:hover .cflag,
.fx-tilt:hover .svc .ic,
.fx-tilt:hover .step6 .num,
.fx-tilt:hover .cc-top .flag,
.fx-tilt:hover .ci .ic,
.fx-tilt:hover .type-card .t-head{
  animation:fxPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fxPop{
  0%{transform:scale(1)}
  35%{transform:scale(1.16) rotate(-4deg)}
  70%{transform:scale(.95) rotate(3deg)}
  100%{transform:scale(1) rotate(0)}
}

/* 国家卡片旗标轻微浮动 */
.ccard:hover .cflag{animation:fxFloat 1.8s ease-in-out infinite}
@keyframes fxFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-6px) rotate(3deg)}
}

/* 统计数字弹跳 */
.hero-stats .hs:hover .n{animation:fxBounce .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes fxBounce{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Logo 轻浮动 */
.logo .lg{animation:fxLogo 4s ease-in-out infinite}
@keyframes fxLogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- 滚动渐显 ---------- */
.fx-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.fx-reveal.in{opacity:1;transform:none}

/* ---------- Hero 装饰呼吸 ---------- */
.hero::before{animation:heroBreath 9s ease-in-out infinite}
.hero::after{animation:heroBreath 12s ease-in-out infinite reverse}
@keyframes heroBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---------- 按钮流光 ---------- */
.btn-primary,.btn-accent{position:relative;overflow:hidden}
.btn-primary::after,.btn-accent::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::after,.btn-accent:hover::after{left:170%}

/* ---------- 触屏 / 减弱动效 ---------- */
@media (pointer:coarse){.fx-glow{display:none}}
@media (prefers-reduced-motion:reduce){
  .fx-glow{display:none}
  .fx-reveal{opacity:1 !important;transform:none !important;transition:none}
  .fx-tilt{transition:none !important}
  .fx-sheen{display:none}
  .logo .lg,.hero::before,.hero::after{animation:none !important}
}

/* ---------- PWA 手机客户端 ---------- */
#pwa-install-btn{position:fixed;right:18px;bottom:18px;z-index:900;padding:11px 18px;border:none;border-radius:999px;
  background:linear-gradient(135deg,#0e3f73,#14559c);color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 22px rgba(20,85,156,.4);transition:all .2s}
#pwa-install-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,85,156,.5)}
.pwa-modal{position:fixed;inset:0;background:rgba(8,44,82,.55);z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.pwa-modal-box{background:#fff;border-radius:18px;max-width:380px;width:100%;padding:28px 26px;text-align:center;position:relative;box-shadow:0 24px 60px rgba(8,44,82,.4)}
.pwa-modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:24px;color:var(--gray);cursor:pointer;line-height:1}
.pwa-modal-close:hover{color:var(--red)}
.pwa-modal-ic{font-size:42px;margin-bottom:10px}
.pwa-modal-box h3{font-size:18px;font-weight:800;margin-bottom:14px}
.pwa-modal-box ol{text-align:left;margin:0 0 12px;padding-left:20px;font-size:14px;color:var(--ink-2);line-height:2}
.pwa-modal-box .pwa-modal-note{font-size:12px;color:var(--gray);line-height:1.7}
@media(max-width:560px){#pwa-install-btn{right:14px;bottom:14px;padding:10px 16px;font-size:13px}}