/* ===== 页面视觉特效（纯 CSS + 原生 JS，零第三方依赖） ===== */

/* ---------- 1. 背景层：渐变流体 + 3D 线框画布 ---------- */
.fx-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-layer canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}

.fx-aurora{position:absolute;inset:-20%;filter:blur(48px);opacity:.85}
.fx-aurora span{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.fx-aurora span:nth-child(1){width:46vw;height:46vw;left:-6vw;top:-12vw;
  background:radial-gradient(circle at 50% 50%,rgba(61,125,255,.55),rgba(61,125,255,0) 68%);
  animation:fxDrift1 26s ease-in-out infinite}
.fx-aurora span:nth-child(2){width:40vw;height:40vw;right:-8vw;top:2vw;
  background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.5),rgba(139,92,246,0) 68%);
  animation:fxDrift2 32s ease-in-out infinite}
.fx-aurora span:nth-child(3){width:38vw;height:38vw;left:28vw;bottom:-16vw;
  background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.34),rgba(34,211,238,0) 70%);
  animation:fxDrift3 38s ease-in-out infinite}

@keyframes fxDrift1{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(10vw,6vw,0) scale(1.18)}}
@keyframes fxDrift2{
  0%,100%{transform:translate3d(0,0,0) scale(1.06)}
  50%{transform:translate3d(-12vw,10vw,0) scale(.9)}}
@keyframes fxDrift3{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-8vw,-8vw,0) scale(1.22)}
  75%{transform:translate3d(6vw,-3vw,0) scale(.95)}}

/* 顶部滚动进度条 */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,#3d7dff,#8b5cf6,#22d3ee);
  box-shadow:0 0 12px rgba(61,125,255,.6);transition:width .1s linear}

/* 鼠标光晕（仅指针设备） */
.fx-glow{position:fixed;left:0;top:0;width:460px;height:460px;margin:-230px 0 0 -230px;
  border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(circle,rgba(61,125,255,.14),rgba(139,92,246,.06) 45%,transparent 70%);
  transition:opacity .4s ease;will-change:transform}
.fx-glow.on{opacity:1}

/* ---------- 2. 首页大屏轮播 ---------- */
.hero-slider{position:relative;z-index:1;height:380px;margin:22px 0 18px;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:#131f3d;isolation:isolate}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;will-change:opacity}
.hero-slide.on{opacity:1}
.hero-slide .ph{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.12);transition:transform 7s linear}
.hero-slide.on .ph{transform:scale(1)}
.hero-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(6,10,22,.92) 0%,rgba(6,10,22,.66) 40%,rgba(6,10,22,.12) 100%)}
.hero-slider .hero-inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 36px;max-width:620px}
.hero-slider .hero-inner h1{margin:0 0 10px;font-size:34px;letter-spacing:1px;
  text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero-slider .hero-inner p{margin:0 0 18px;color:#c2cde4;font-size:15px}

.hero-arrow{position:absolute;top:50%;margin-top:-22px;z-index:4;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(10,16,30,.42);
  color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(6px);
  display:grid;place-items:center;opacity:0;transition:.25s}
.hero-arrow.prev{left:14px}
.hero-arrow.next{right:14px}
.hero-slider:hover .hero-arrow{opacity:1}
.hero-arrow:hover{background:rgba(61,125,255,.55);border-color:transparent}
.hero-dots{position:absolute;left:36px;bottom:22px;z-index:4;display:flex;gap:8px}
.hero-dot{width:8px;height:8px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.32);transition:background .3s,width .3s,transform .3s}
.hero-dot.on{width:26px;background:linear-gradient(90deg,#3d7dff,#8b5cf6)}
.hero-dot:hover{background:rgba(255,255,255,.62);transform:scale(1.2)}
.hero-dot.on:hover{background:linear-gradient(90deg,#3d7dff,#8b5cf6);transform:none}

/* 鼠标按住拖动切换 */
.hero-slider{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.hero-slider.dragging{cursor:grabbing}
.hero-slider.dragging .hero-slide,
.hero-slider.dragging .hero-slide .ph{transition:none}
.hero-slide.peek{z-index:2}
.hero-slider.snap .hero-slide{transition:opacity .3s ease}
.hero-slider.snap .hero-slide .ph{transition:transform .38s cubic-bezier(.22,.8,.3,1)}
.hero-slider .hero-arrow,
.hero-slider .hero-dot{cursor:pointer}
.hero-slider .hero-inner .btn{cursor:pointer;-webkit-user-drag:none;user-select:none}

/* CSS 3D 立方体装饰 */
.fx-cube{position:absolute;z-index:2;width:110px;height:110px;transform-style:preserve-3d;
  animation:fxSpin 22s linear infinite;pointer-events:none}
.fx-cube.c2{width:64px;height:64px;animation:fxSpin 15s linear infinite reverse;opacity:.75}
.fx-cube i{position:absolute;inset:0;border:1px solid rgba(140,180,255,.34);border-radius:6px;
  background:linear-gradient(140deg,rgba(61,125,255,.22),rgba(139,92,246,.14))}
.fx-cube i:nth-child(1){transform:translateZ(55px)}
.fx-cube i:nth-child(2){transform:rotateY(90deg) translateZ(55px)}
.fx-cube i:nth-child(3){transform:rotateY(180deg) translateZ(55px)}
.fx-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(55px)}
.fx-cube i:nth-child(5){transform:rotateX(90deg) translateZ(55px)}
.fx-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(55px)}
.fx-cube.c2 i:nth-child(1){transform:translateZ(32px)}
.fx-cube.c2 i:nth-child(2){transform:rotateY(90deg) translateZ(32px)}
.fx-cube.c2 i:nth-child(3){transform:rotateY(180deg) translateZ(32px)}
.fx-cube.c2 i:nth-child(4){transform:rotateY(-90deg) translateZ(32px)}
.fx-cube.c2 i:nth-child(5){transform:rotateX(90deg) translateZ(32px)}
.fx-cube.c2 i:nth-child(6){transform:rotateX(-90deg) translateZ(32px)}
@keyframes fxSpin{
  0%{transform:rotateX(-18deg) rotateY(0deg)}
  100%{transform:rotateX(-18deg) rotateY(360deg)}}

/* 3D 圆环 */
.fx-ring{position:absolute;z-index:2;border-radius:50%;pointer-events:none;
  border:1px solid rgba(120,170,255,.28);transform-style:preserve-3d;
  animation:fxRing 16s linear infinite}
.fx-ring.r2{border-color:rgba(139,92,246,.26);animation-duration:22s;animation-direction:reverse}
@keyframes fxRing{
  0%{transform:rotateX(72deg) rotateZ(0deg)}
  100%{transform:rotateX(72deg) rotateZ(360deg)}}

/* ---------- 3. 卡片 3D 倾斜 + 光泽扫过 ---------- */
.gcard{position:relative;transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .25s}
.gcard.tilt{transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)}
.gcard:hover{border-color:rgba(61,125,255,.5);
  box-shadow:0 16px 34px rgba(4,10,26,.6),0 0 0 1px rgba(61,125,255,.18)}
.gcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .75s ease}
.gcard:hover::after{transform:translateX(130%)}
.gcard .gmeta{transform:translateZ(22px)}
.gcard .gthumb img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.gcard:hover .gthumb img{transform:scale(1.07)}

/* 面额卡选中反馈 */
.sku{transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .15s,background .15s,box-shadow .15s}
.sku:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(61,125,255,.55)}
.sku.on{transform:translateY(-2px) scale(1.015)}
.sku.pop{animation:fxPop .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes fxPop{0%{transform:scale(.96)}55%{transform:scale(1.05)}100%{transform:scale(1.015)}}

/* 按钮波纹 */
.btn,.tab,.subtab,.hero-arrow{position:relative;overflow:hidden}
.fx-ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.32);animation:fxRipple .62s ease-out forwards}
@keyframes fxRipple{to{transform:scale(2.6);opacity:0}}

/* ---------- 4. 滚动入场 ---------- */
.fx-reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.fx-reveal.in{opacity:1;transform:none}

/* ---------- 5. 其它增强 ---------- */
.hdr{transition:box-shadow .25s,background .25s}
.hdr.scrolled{background:rgba(8,12,24,.9);box-shadow:0 8px 26px rgba(4,8,20,.45)}
.ghead.hasimg{transition:background-position .1s linear}
.search:focus-within{border-color:rgba(61,125,255,.6);box-shadow:0 0 0 3px rgba(61,125,255,.12)}
.field input:focus{transform:translateY(-1px)}
.paybar .btn:not(:disabled){animation:fxBreath 3.4s ease-in-out infinite}
@keyframes fxBreath{
  0%,100%{box-shadow:0 10px 24px rgba(61,125,255,.3)}
  50%{box-shadow:0 10px 30px rgba(61,125,255,.52)}}
.notice{overflow:hidden}
.notice::after{content:"";position:absolute;inset:0}
.result{animation:fxFadeUp .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes fxFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- 移动端 / 降级 ---------- */
@media (max-width:640px){
  .hero-slider{height:300px;margin:16px 0 14px}
  .hero-slider .hero-inner{padding:0 20px;max-width:100%}
  .hero-slider .hero-inner h1{font-size:24px}
  .hero-slider .hero-inner p{font-size:13.5px}
  .hero-dots{left:20px;bottom:16px}
  .fx-cube,.fx-ring{display:none}
  .fx-glow{display:none}
  .gcard::after{display:none}
}
@media (hover:none){
  .gcard::after{display:none}
  .fx-glow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fx-aurora span,.fx-cube,.fx-ring,.paybar .btn:not(:disabled){animation:none!important}
  .fx-reveal{opacity:1;transform:none;transition:none}
  .hero-slide .ph{transform:none;transition:none}
  .fx-layer canvas{opacity:.28}
}