/* 基础变量 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} :root{--bg:#090914;--fg:#eaf6ff;--muted:#8aa0b8;--accent:#ff38ff;--accent2:#00e5ff;--card:#0f0d1a;--glass:rgba(255,56,255,.06);--border:rgba(0,229,255,.16)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} *{box-sizing:border-box}html,body{height:100%}body{margin:0;scroll-behavior:smooth;font-family:"Comic Sans MS",sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 背景画布 + 噪点 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} #bg{position:fixed;inset:0;z-index:-2}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .noise{position:fixed;inset:-40px;pointer-events:none;z-index:-1;background:url('data:image/svg+xml;utf8,') repeat;mix-blend-mode:overlay}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 头部 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .site-header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:13px 19px;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent);backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid var(--border);z-index:9}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .site-header .brand{font-weight:800;letter-spacing:.4px;text-decoration:none;color:var(--fg)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .site-header nav a{margin-left:13px;text-decoration:none;color:var(--muted)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .site-header .btn{margin-left:10px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 按钮 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:8px;border:1px solid var(--border);background:var(--glass);color:var(--fg);cursor:pointer;transition:.2s transform,.2s background,.2s box-shadow}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;box-shadow:0 6px 19px rgba(108,140,255,.25)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .btn.secondary{background:var(--glass)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .btn.ghost{background:transparent}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .btn:hover{transform:translateY(-1px)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 首屏 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;min-height:80vh;padding:64px 19px 38px;max-width:960px;margin:0 auto}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero__content h1{font-size:38px;line-height:1.1;margin:0 0 10px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero__content p{margin:0 0 13px;color:var(--muted)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero .kpis{display:flex;gap:19px;margin-top:14px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero .kpi{display:flex;flex-direction:column}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero .kpi strong{font-size:16px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero__visual{position:relative;height:336px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .blob,.ring,.shine{position:absolute;inset:0;border-radius:19px;filter:saturate(120%)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .blob{background:conic-gradient(from 120deg at 60% 40%, rgba(108,140,255,.55), rgba(255,106,213,.55), rgba(108,140,255,.55));filter:blur(24px);transform:translateZ(0)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .ring{border:1px solid var(--border);background:radial-gradient(80% 80% at 50% 50%, rgba(255,255,255,.06), transparent);box-shadow:inset 0 0 32px rgba(255,255,255,.08);}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .shine{background:radial-gradient(96px 96px at 70% 30%, rgba(255,255,255,.18), rgba(255,255,255,0));mix-blend-mode:screen}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .fx-gradient{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 特色 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .features{max-width:880px;margin:0 auto;padding:32px 19px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .features h2,.catalog h2,.faq h2,.contact h2{font-size:22px;margin:0 0 14px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .features .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .card{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:14px;transition:.25s transform,.25s box-shadow}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.25)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .card .icon{font-size:19px;margin-bottom:6px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 商品卡片 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .catalog{max-width:960px;margin:0 auto;padding:32px 19px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .product{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:13px;overflow:hidden;transition:.25s transform,.25s box-shadow}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .product:hover{transform:translateY(-3px);box-shadow:0 13px 32px rgba(0,0,0,.3)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .product .media{height:128px;background:linear-gradient(135deg, rgba(108,140,255,.2), rgba(255,106,213,.2));display:flex;align-items:center;justify-content:center;position:relative}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .product .media::after{content:"";position:absolute;inset:0;background:radial-gradient(128px 128px at 70% 30%, rgba(255,255,255,.16), transparent)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .product h3{font-size:14px;margin:10px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 10px 6px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .tag{font-size:10px;padding:3px 6px;border-radius:799px;background:var(--glass);border:1px solid var(--border);color:var(--muted)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .meta{display:flex;justify-content:space-between;align-items:center;margin:0 10px 10px;color:var(--muted)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .price{font-weight:800;color:var(--fg)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .actions{display:flex;gap:6px;margin:0 10px 11px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .actions .btn{flex:1;justify-content:center}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .badge{position:absolute;top:8px;left:8px;font-size:10px;padding:3px 8px;border-radius:799px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* FAQ + 联系 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .faq,.contact{max-width:720px;margin:0 auto;padding:32px 19px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .faq details{background:var(--card);border:1px solid var(--border);padding:10px 11px;border-radius:10px;margin-bottom:8px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 页脚 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .site-footer{padding:22px 19px;color:var(--muted);text-align:center;border-top:1px solid var(--border);background:linear-gradient(0deg,rgba(0,0,0,.35),transparent)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 响应式 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} @media (max-width: 768px){/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero{grid-template-columns:1fr;gap:14px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .cards{grid-template-columns:1fr 1fr}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .features .grid{grid-template-columns:1fr}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} }/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} @media (max-width: 512px){/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .cards{grid-template-columns:1fr}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .hero__content h1{font-size:29px}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} }/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 轻量 3D Tilt *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .tilt{transform-style:preserve-3d}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .tilt .icon,.tilt h3,.tilt p{transform:translateZ(16px)}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* 磁性按钮 *//* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .magnet{position:relative;overflow:hidden}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .magnet span{position:relative;z-index:1}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .magnet::before{content:"";position:absolute;inset:auto auto -60% -60%;width:200%;height:200%;background:radial-gradient(96px 96px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 40%);transition:opacity .3s;opacity:.6}/* 滚动显隐 */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} /* Intro 进入蒙层（圆形揭幕 + 百分比） */ .intro{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:radial-gradient(80% 70% at 50% 30%, #132233 0%, #0b131c 60%, #071018 100%);clip-path:circle(var(--r,120%) at var(--cx,50%) var(--cy,50%));transition:clip-path .4s cubic-bezier(.22,.61,.36,1),opacity .3s} .intro.done{--r:0%;opacity:0;pointer-events:none} .intro__inner{position:relative;display:grid;place-items:center;gap:6px} .intro__ring{width:176px;height:176px;border-radius:50%;background:conic-gradient(from 0deg, rgba(102,192,244,.15), rgba(42,71,94,.15) 40%, rgba(102,192,244,.15));filter:blur(.2px);animation:spin 4s linear infinite} .intro__logo{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:34px;letter-spacing:2px;color:#fff;text-shadow:0 0 19px rgba(102,192,244,.6)} .intro__percent{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted)} .scanlines{position:absolute;inset:0;background:repeating-linear-gradient( to bottom, rgba(255,255,255,0) 0px, rgba(255,255,255,.03) 2px, rgba(255,255,255,0) 3px );mix-blend-mode:overlay;opacity:.5;animation:scan 6s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @keyframes scan{0%{background-position-y:0} 100%{background-position-y:200%}} /* 进入后整体淡入与上移 */ html:not(.entered) .site-header, html:not(.entered) .hero__content, html:not(.entered) .hero__visual{opacity:0;transform:translateY(10px)} html.entered .site-header, html.entered .hero__content, html.entered .hero__visual{transition:opacity .3s ease, transform .6s ease;opacity:1;transform:none} html.entered .hero__content{transition-delay:.06s} html.entered .hero__visual{transition-delay:.12s} /* 标题微 Glitch 在进入时播放一次 */ .glitch{position:relative;display:inline-block} .glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;clip-path:inset(0 0 0 0)} .glitch::before{color:#66c0f4;mix-blend-mode:screen;transform:translate(0,0)} .glitch::after{color:#ff6ad5;mix-blend-mode:screen;transform:translate(0,0)} html.entered .glitch{animation:glow 2.2s ease 1} html.entered .glitch::before{animation:glitchX 1.2s ease-in-out 1} html.entered .glitch::after{animation:glitchY 1.2s ease-in-out 1} @keyframes glow{0%{text-shadow:0 0 0 rgba(102,192,244,0)}30%{text-shadow:0 0 19px rgba(102,192,244,.7)}100%{text-shadow:none}} @keyframes glitchX{0%,100%{transform:translate(0,0)}20%{transform:translate(-1px,0)}40%{transform:translate(1px,0)}60%{transform:translate(-2px,0)}80%{transform:translate(2px,0)}} @keyframes glitchY{0%,100%{transform:translate(0,0)}20%{transform:translate(0,-1px)}40%{transform:translate(0,1px)}60%{transform:translate(0,-2px)}80%{transform:translate(0,2px)}} /* Hero 右侧加轨道点旋转 */ .hero__visual .orbit{position:absolute;inset:0;border-radius:19px;pointer-events:none} .hero__visual .orbit::before{content:"";position:absolute;top:10%;left:10%;width:6px;height:6px;border-radius:50%;background:#66c0f4;box-shadow:0 0 10px rgba(102,192,244,.8);animation:orbit 10s linear infinite} @keyframes orbit{0%{transform:translate(0,0)}100%{transform:translate(256px,176px)}} /* 商品卡片在进入后做级联弹入 */ html:not(.entered) .product{opacity:0;transform:translateY(10px)} html.entered .product{opacity:1;transform:none;transition:opacity .3s ease, transform .6s ease;} .product{transition-delay:calc(var(--i, 0) * 60ms)} /* ===== Intro v2 (Steam风，3D开场) ===== */ .intro{position:fixed;inset:0;z-index:999;display:grid;place-items:center;clip-path:circle(var(--r,120%) at var(--cx,50%) var(--cy,50%));transition:clip-path .4s cubic-bezier(.22,.61,.36,1),opacity .3s;background:radial-gradient(80% 70% at 50% 30%, #0b1622 0%, #0a141e 60%, #071018 100%)} .intro.done{--r:0%;opacity:0;pointer-events:none} .intro__inner{position:absolute;inset:0;display:grid;place-items:center;gap:8px} .intro__logo{font-weight:900;font-size:51px;letter-spacing:3px;color:#fff;text-shadow:0 0 19px rgba(102,192,244,.75), 0 0 32px rgba(42,71,94,.6)} .intro__percent{font-variant-numeric:tabular-nums;font-weight:800;color:var(--muted);text-shadow:0 0 11px rgba(102,192,244,.6)} .intro canvas#intro3d{position:absolute;inset:0;width:100%;height:100%;filter:saturate(140%) contrast(110%)} .scanlines{position:absolute;inset:0;background:repeating-linear-gradient(to bottom, rgba(255,255,255,0) 0px, rgba(255,255,255,.03) 2px, rgba(255,255,255,0) 3px);mix-blend-mode:overlay;opacity:.45;pointer-events:none} .gridlines{position:absolute;inset:0;background: repeating-linear-gradient(90deg, rgba(102,192,244,.07) 0 1px, transparent 1px 96px), repeating-linear-gradient(0deg, rgba(102,192,244,.05) 0 1px, transparent 1px 64px); opacity:.18;mix-blend-mode:overlay;pointer-events:none} /* 触发时的冲击波 */ .intro.done::after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at var(--cx,50%) var(--cy,50%), rgba(102,192,244,.35) 0, rgba(102,192,244,.15) 18%, rgba(102,192,244,0) 40%);animation:boom .8s ease-out 1} @keyframes boom{from{transform:scale(.6);opacity:.9}to{transform:scale(1.5);opacity:0}} /* 进入节奏（主块的逐步显现） */ html:not(.entered) .site-header, html:not(.entered) .hero__content, html:not(.entered) .hero__visual{opacity:0;transform:translateY(10px)} html.entered .site-header, html.entered .hero__content, html.entered .hero__visual{transition:opacity .3s ease, transform .6s ease;opacity:1;transform:none} html.entered .hero__content{transition-delay:.06s} html.entered .hero__visual{transition-delay:.12s} /* 标题 Glitch */ .glitch{position:relative;display:inline-block} .glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none} .glitch::before{color:#66c0f4;mix-blend-mode:screen} .glitch::after{color:#ff6ad5;mix-blend-mode:screen} html.entered .glitch{animation:glow 2.2s ease 1} html.entered .glitch::before{animation:glitchX 1.2s ease-in-out 1} html.entered .glitch::after{animation:glitchY 1.2s ease-in-out 1} @keyframes glow{0%{text-shadow:0 0 0 rgba(102,192,244,0)}30%{text-shadow:0 0 19px rgba(102,192,244,.7)}100%{text-shadow:none}} @keyframes glitchX{0%,100%{transform:translate(0,0)}20%{transform:translate(-1px,0)}40%{transform:translate(1px,0)}60%{transform:translate(-2px,0)}80%{transform:translate(2px,0)}} @keyframes glitchY{0%,100%{transform:translate(0,0)}20%{transform:translate(0,-1px)}40%{transform:translate(0,1px)}60%{transform:translate(0,-2px)}80%{transform:translate(0,2px)}} /* 3D装饰轨道点 */ .hero__visual .orbit{position:absolute;inset:0;border-radius:19px;pointer-events:none} .hero__visual .orbit::before{content:"";position:absolute;top:10%;left:10%;width:6px;height:6px;border-radius:50%;background:#66c0f4;box-shadow:0 0 10px rgba(102,192,244,.8);animation:orbit 10s linear infinite} @keyframes orbit{0%{transform:translate(0,0)}100%{transform:translate(256px,176px)}} /* 商品卡片级联延迟 */ html:not(.entered) .product{opacity:0;transform:translateY(10px)} html.entered .product{opacity:1;transform:none;transition:opacity .3s ease, transform .6s ease} .product{transition-delay:calc(var(--i, 0) * 60ms)} /* ===== 详情页 ===== */ .detail{max-width:960px;margin:0 auto;padding:26px 19px} .detail-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center} .detail-media{background:var(--card);border:1px solid var(--border);border-radius:13px;overflow:hidden} .shots{display:flex;transition:transform .5s ease} .shot{flex:0 0 100%;height:304px;display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 10%, rgba(102,192,244,.22), rgba(42,71,94,.15) 60%, rgba(0,0,0,.2));} .shot-inner{font-weight:900;font-size:38px;letter-spacing:2px;color:#fff;text-shadow:0 0 19px rgba(102,192,244,.6)} .dots{display:flex;gap:6px;justify-content:center;padding:8px} .dots button{width:6px;height:6px;border-radius:50%;border:1px solid var(--border);background:var(--glass);cursor:pointer} .dots button.on{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent} .detail-info h1{margin:0 0 6px} .detail-info .price-row{display:flex;gap:13px;align-items:baseline} .detail-info .muted{color:var(--muted)} .detail-reco{max-width:960px;margin:0 auto;padding:19px} /* ===== 结算页 ===== */ .checkout{max-width:880px;margin:0 auto;padding:26px 19px} .checkout-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px} .summary,.pay{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:14px} .sum-item{display:flex;justify-content:space-between;align-items:flex-start} .pay label{display:flex;flex-direction:column;gap:5px;margin:5px 0} .pay input,.pay select{padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--glass);color:var(--fg)} .pay .pm{border:1px dashed var(--border);border-radius:8px;padding:6px} .pay .agree{display:flex;align-items:center;gap:6px;margin:6px 0} /* ===== 成功页 ===== */ .success{max-width:608px;margin:0 auto;padding:51px 19px} .success-wrap{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:19px;text-align:center} /* ===== 响应式扩展 ===== */ @media (max-width: 768px){ .detail-hero{grid-template-columns:1fr} .checkout-wrap{grid-template-columns:1fr} .shot{height:240px} } @media (max-width: 512px){ .shot-inner{font-size:29px} } /* ===== Cyberpunk 调色（默认） ===== */ /* 赛博霓虹按钮/卡片更强发光 */ .btn.primary{box-shadow:0 6px 24px rgba(255,56,255,.25), 0 0 0 1px rgba(0,229,255,.2) inset} .product:hover{box-shadow:0 14px 40px rgba(255,56,255,.25), 0 0 0 1px rgba(0,229,255,.18) inset} .badge{box-shadow:0 0 11px rgba(255,56,255,.6)} /* 地平线网格（透视霓虹） */ .horizon{position:fixed;inset:0;z-index:-1;pointer-events:none} .horizon::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-16%;height:60vh;transform:perspective(640px) rotateX(75deg);background: radial-gradient(120% 120% at 50% 0%, rgba(255,56,255,.25), rgba(0,0,0,0) 60%), repeating-linear-gradient(0deg, rgba(0,229,255,.25) 0 1px, rgba(0,0,0,0) 1px 22px), repeating-linear-gradient(90deg, rgba(255,56,255,.25) 0 1px, rgba(0,0,0,0) 1px 32px); filter: saturate(140%)} /* 搜索条 */ .searchbar{display:flex;gap:6px;align-items:center;margin:6px 0 13px} .searchbar input[type=search]{flex:1;min-width:160px;padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--glass);color:var(--fg)} .searchbar .muted{margin-left:6px} /* 悬浮按钮 */ .fab{position:fixed;z-index:10;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 24px rgba(255,56,255,.35);cursor:pointer;transition:opacity .2s, transform .2s;} .fab:hover{transform:translateY(-2px)} .fab.top{right:18px;bottom:18px;opacity:0;pointer-events:none;background:#00e5ff;color:#001018;border-color:rgba(0,229,255,.7);box-shadow:0 0 14px rgba(0,229,255,.6), 0 10px 27px rgba(0,229,255,.35)} .fab.back{left:18px;bottom:18px;background:#ff38ff;color:#1a0017;border-color:rgba(255,56,255,.7);box-shadow:0 0 14px rgba(255,56,255,.55), 0 10px 27px rgba(255,56,255,.30)} /* 强化悬浮按钮配色与可见度（Top=霓虹绿，Back=琥珀黄） */ .fab{font-weight:800;font-size:14px} .fab.top{right:18px;bottom:18px;opacity:0;pointer-events:none;background:#00e5ff;color:#001018;border-color:rgba(0,229,255,.7);box-shadow:0 0 14px rgba(0,229,255,.6), 0 10px 27px rgba(0,229,255,.35)} .fab.back{left:18px;bottom:18px;background:#ff38ff;color:#1a0017;border-color:rgba(255,56,255,.7);box-shadow:0 0 14px rgba(255,56,255,.55), 0 10px 27px rgba(255,56,255,.30)} /* ===== 赛博朋克分类筛选 ===== */ .categories-filter { position: relative; display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 32px; padding: 19px; background: linear-gradient(135deg, rgba(255,56,255,0.08), rgba(0,229,255,0.08)), rgba(15,13,26,0.6); border-radius: 16px; border: 1px solid rgba(0,229,255,0.25); backdrop-filter: blur(8px); overflow: hidden; } /* 扫描线效果 */ .categories-filter::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, rgba(0,229,255,0.03) 1px, transparent 2px, transparent 3px ); pointer-events: none; opacity: 0.5; } /* 霓虹边框动画 */ .categories-filter::after { content: ""; position: absolute; inset: -2px; background: linear-gradient( 45deg, var(--accent), var(--accent2), var(--accent), var(--accent2) ); background-size: 400% 400%; border-radius: 16px; z-index: -1; opacity: 0.15; filter: blur(6px); animation: gradientShift 8s ease infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .category-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(15,13,26,0.85); border: 1px solid rgba(0,229,255,0.25); border-radius: 22px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.2px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; overflow: hidden; z-index: 1; } /* 悬浮光效背景 */ .category-item::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(0,229,255,0.2) 0%, transparent 60% ); opacity: 0; transition: opacity 0.35s ease; } .category-item:hover::before { opacity: 1; } .category-item:hover { background: rgba(0,229,255,0.12); border-color: var(--accent2); color: var(--fg); transform: translateY(-2px); box-shadow: 0 0 16px rgba(0,229,255,0.4), 0 5px 13px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1); } /* 激活状态 - 霓虹发光 */ .category-item.active { background: linear-gradient(135deg, rgba(255,56,255,0.25), rgba(0,229,255,0.25) ); border: 1px solid var(--accent2); color: #fff; font-weight: 700; text-shadow: 0 0 6px rgba(0,229,255,0.8); box-shadow: 0 0 24px rgba(255,56,255,0.5), 0 0 12px rgba(0,229,255,0.6), 0 6px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.3); } .category-item.active::before { background: radial-gradient( circle at 50% 50%, rgba(255,255,255,0.15) 0%, transparent 70% ); opacity: 1; } /* 图标样式 */ .category-item .icon { font-size: 16px; line-height: 1; filter: drop-shadow(0 0 3px currentColor); transition: transform 0.35s ease; } .category-item:hover .icon { transform: scale(1.15) rotate(5deg); } .category-item.active .icon { filter: drop-shadow(0 0 6px rgba(0,229,255,0.9)); animation: iconPulse 2s ease-in-out infinite; } @keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* 名称 */ .category-item .name { line-height: 1; position: relative; z-index: 1; } /* 数量徽章 */ .category-item .count { padding: 3px 8px; background: rgba(0,229,255,0.15); border: 1px solid rgba(0,229,255,0.3); border-radius: 10px; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent2); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); transition: all 0.35s ease; } .category-item:hover .count { background: rgba(0,229,255,0.25); border-color: var(--accent2); box-shadow: 0 0 8px rgba(0,229,255,0.4), inset 0 1px 2px rgba(0,0,0,0.3); } .category-item.active .count { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.5); color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.5), inset 0 1px 2px rgba(0,0,0,0.2); } /* 响应式优化 */ @media (max-width: 614px) { .categories-filter { gap: 8px; padding: 14px; } .category-item { padding: 8px 13px; font-size: 10px; } .category-item .icon { font-size: 14px; } .category-item .count { font-size: 8px; padding: 2px 6px; } }