/* ============================================================ ESPCOOL 产品矩阵 · 全屏产品幻灯片 4 个品牌世界：star 深空 / drip 晴空 / pix 纸票 / luo 宣纸 ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --ease-out:cubic-bezier(.22,1,.36,1); --ease-snap:cubic-bezier(.76,0,.24,1); --font-sans:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; --font-serif:"Noto Serif SC","Songti SC","STSong",serif; } html,body{height:100%;overflow:hidden} body{ font-family:var(--font-sans); background:#0B1020; color:var(--ink,#10233F); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* chrome 主题色（默认深色，随 slide 切换） */ --chrome:#EAF0FF; --chrome-dim:rgba(234,240,255,.62); --chrome-faint:rgba(234,240,255,.22); --chrome-line:rgba(234,240,255,.18); --bar-bg:rgba(8,12,26,.78); --bar-brd:rgba(234,240,255,.13); } body[data-theme="drip"],body[data-theme="pix"],body[data-theme="luo"]{ --chrome:#1B2638; --chrome-dim:rgba(27,38,56,.6); --chrome-faint:rgba(27,38,56,.18); --chrome-line:rgba(27,38,56,.14); --bar-bg:rgba(255,255,255,.76); --bar-brd:rgba(27,38,56,.12); } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} svg{display:block} ::selection{background:rgba(139,155,255,.35)} :focus-visible{outline:2px solid var(--chrome);outline-offset:3px;border-radius:8px} /* ============ 舞台 ============ */ .deck{position:fixed;inset:0} .slide{ position:absolute;inset:0; overflow:hidden; opacity:0;visibility:hidden; transition:opacity .15s linear; } .slide.is-active{opacity:1;visibility:visible;z-index:2} /* 背景层 */ .bg{position:absolute;inset:0;z-index:0;transition:opacity .6s ease} .slide-inner{ position:relative;z-index:3; height:100%; max-width:1280px;margin:0 auto; padding:96px 72px 96px; display:grid;grid-template-columns:1.02fr .98fr; gap:48px;align-items:center; } /* 内容入场（仅每个产品首次登场时播放，切换时不再有过场） */ .rise{opacity:0;transform:translateY(30px)} .slide.is-active.entrance .rise{animation:rise .85s var(--ease-out) calc(var(--i,0)*70ms + 80ms) forwards} @keyframes rise{to{opacity:1;transform:none}} .visual{opacity:0;transform:translateY(38px) scale(1.03);filter:blur(12px)} .slide.is-active.entrance .visual{animation:visualIn 1.1s var(--ease-out) .18s forwards} @keyframes visualIn{to{opacity:1;transform:none;filter:blur(0)}} /* 入场播放完毕后定格可见（避免填充态被类移除而回落） */ .slide.is-active[data-played] .rise{opacity:1;transform:none} .slide.is-active[data-played] .visual{opacity:1;transform:none;filter:none} .slide.is-active[data-played] .bignum{opacity:1;transform:translateY(-50%)} /* 非活动屏暂停氛围动画 */ .slide:not(.is-active) .amb{animation-play-state:paused} .slide:not(.is-active) .amb *{animation-play-state:paused} /* ============ 文案区 ============ */ .brandline{display:flex;align-items:center;gap:12px;margin-bottom:22px} .brandline .logo{width:42px;height:42px;display:grid;place-items:center;flex:none} .brandline .logo img{width:100%;height:100%;object-fit:contain;display:block} .crystal img,.dbrand-drop img{width:100%;height:100%;display:block} /* 星辰屏：产品名悬浮于星云之上，增强可读性（白字 + 暗影 + 品牌色辉光） */ .slide[data-theme="star"] .brandline .bname{color:#FFFFFF;text-shadow:0 2px 22px rgba(6,10,26,.95),0 0 46px rgba(139,155,255,.5)} .slide[data-theme="star"] .brandline .ben{opacity:.82} .slide[data-theme="star"] .brandline .logo{filter:drop-shadow(0 0 16px rgba(139,155,255,.6))} .brandline .bname{font-size:23px;font-weight:700;letter-spacing:.04em;line-height:1} .brandline .ben{font-size:11px;font-weight:500;letter-spacing:.32em;opacity:.55;margin-top:2px} .brandline .btxt{display:flex;flex-direction:column;gap:2px} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:13.5px;font-weight:500;letter-spacing:.04em; padding:7px 15px;border-radius:100px; border:1px solid var(--chip-line);background:var(--chip-bg); color:var(--chip-ink); backdrop-filter:blur(6px); } .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative;flex:none; animation:pulseRing 2s var(--ease-out) 1s infinite} .eyebrow .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent);opacity:.6;animation:ping 2s var(--ease-out) infinite} @keyframes pulseRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}} @keyframes ping{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}} .title{ margin:20px 0 18px; perspective:900px; font-weight:700;line-height:1.18;letter-spacing:-.01em; font-size:clamp(30px,3.5vw,48px); color:var(--ink); } .title .hl{color:var(--accent)} .title .hl2{color:var(--accent-2)} .lead{ font-size:15.5px;line-height:1.85;max-width:520px; color:var(--muted);font-weight:400; } .features{margin:26px 0 0;display:grid;gap:13px} .features li{display:flex;align-items:flex-start;gap:13px} .features .fi{ width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center; background:var(--fi-bg);color:var(--accent); border:1px solid var(--fi-line); } .features .fi svg{width:17px;height:17px} .features b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px} .features small{font-size:12.8px;color:var(--muted);line-height:1.55} .stats{margin:26px 0 0;display:flex;gap:10px;flex-wrap:wrap} .stat{ padding:11px 16px;border-radius:13px;min-width:92px; background:var(--stat-bg);border:1px solid var(--stat-line); backdrop-filter:blur(8px); } .stat b{display:block;font-size:21px;font-weight:800;color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums} .stat b em{font-style:normal;font-size:13px;font-weight:600;opacity:.85} .stat span{font-size:11.5px;color:var(--muted);letter-spacing:.02em;margin-top:3px;display:block} .cta{margin:28px 0 0;display:flex;align-items:center;gap:15px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:9px; padding:14px 27px;border-radius:100px;font-size:15px;font-weight:600; letter-spacing:.02em;transition:transform .35s var(--ease-out),box-shadow .35s,background .3s; position:relative;overflow:hidden;white-space:nowrap; } .btn svg{width:16px;height:16px} .btn.primary{background:var(--accent);color:var(--btn-on);box-shadow:var(--btn-shadow)} .btn.primary:hover{transform:translateY(-2px);box-shadow:var(--btn-shadow-h)} .btn.ghost{border:1.5px solid var(--ghost-line);color:var(--ink)} .btn.ghost:hover{background:var(--ghost-hover);transform:translateY(-2px); box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent),0 10px 26px color-mix(in srgb,var(--accent) 20%,transparent)} .btn .ar{transition:transform .3s var(--ease-out)} .btn:hover .ar{transform:translateX(3px)} .cta-note{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px} .cta-note svg{width:14px;height:14px;color:var(--accent)} /* 大序号 */ .bignum{ position:absolute;z-index:1; font-family:var(--font-serif);font-weight:900; font-size:clamp(200px,30vw,420px);line-height:1; color:var(--bignum); right:3vw;top:50%;transform:translateY(-50%); pointer-events:none;user-select:none; letter-spacing:-.04em; opacity:0; } .slide.is-active.entrance .bignum{animation:numIn 1.2s var(--ease-snap) .1s forwards} @keyframes numIn{from{opacity:0;transform:translateY(-50%) translateX(60px)}to{opacity:1;transform:translateY(-50%)}} /* ============ 固定顶部导航（切换产品时始终存在） ============ */ .topbar{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;gap:clamp(12px,2vw,28px); padding:18px clamp(20px,3vw,40px); color:var(--chrome); background:var(--bar-bg); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--bar-brd); transition:color .25s ease; } /* 纯文字字标（无 logo 图标） */ .wm{display:flex;align-items:center;gap:11px;flex:0 0 auto;cursor:pointer; font-size:16.5px;font-weight:700;letter-spacing:.04em;line-height:1;color:var(--chrome);transition:opacity .3s} .wm:hover{opacity:.85} .wm .cn{transition:letter-spacing .35s var(--ease-out)} .wm:hover .cn{letter-spacing:.16em} .wm b{font-weight:800} .wm i{width:1px;height:15px;background:currentColor;opacity:.32} .wm .cn{font-weight:500;opacity:.88} .tb-nav{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px; overflow-x:auto;scrollbar-width:none; mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)} .tb-nav::-webkit-scrollbar{display:none} .tb-nav button{ flex:0 0 auto; padding:8px 15px;border-radius:100px;font-size:13.5px;font-weight:500; color:var(--chrome);opacity:.62;transition:opacity .3s,background .3s;position:relative; } .tb-nav button:hover{opacity:1} .tb-nav button.is-active{opacity:1;font-weight:700} /* 右侧圆点 */ .dotnav{ position:fixed;right:34px;top:50%;transform:translateY(-50%);z-index:50; display:flex;flex-direction:column;gap:20px; } .dotnav button{display:flex;align-items:center;gap:0;justify-content:flex-end;color:var(--chrome)} .dotnav .dl{ font-size:13px;font-weight:600;letter-spacing:.05em; max-width:0;overflow:hidden;opacity:0;white-space:nowrap; transition:max-width .45s var(--ease-out),opacity .3s,margin .45s; } .dotnav .dd{ width:9px;height:9px;border-radius:50%;flex:none; background:var(--chrome-faint);border:1.5px solid var(--chrome-line); transition:all .4s var(--ease-out);margin-left:0; } .dotnav button:hover .dl,.dotnav button.is-active .dl{max-width:130px;opacity:1;margin-right:13px} .dotnav button.is-active .dd{ background:var(--chrome);height:30px;border-radius:6px;width:9px; } /* ============ 固定底栏：切换控制 + 版权 / 备案 ============ */ .bottombar{ position:fixed;left:0;right:0;bottom:0;z-index:50; height:clamp(56px,7.4vh,68px); display:flex;align-items:center;justify-content:space-between;gap:16px; padding:0 clamp(20px,3vw,40px); background:var(--bar-bg); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1px solid var(--bar-brd); color:var(--chrome); } .bb-left{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);flex:0 0 auto} .scroll-hint{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;color:var(--chrome-dim);font-weight:500;white-space:nowrap} .scroll-hint .wheel{width:20px;height:31px;border:1.5px solid var(--chrome-faint);border-radius:11px;position:relative;flex:0 0 auto} .scroll-hint .wheel::before{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;border-radius:3px;background:var(--chrome);transform:translateX(-50%);animation:wheel 1.8s var(--ease-out) infinite} @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}} .bb-count{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums} .bb-count b{font-family:var(--font-serif);font-size:clamp(20px,2.8vh,26px);font-weight:700;line-height:1} .bb-count i{font-style:normal;opacity:.35} .bb-count span{font-size:12px;opacity:.55;font-weight:500} .bb-arrows{display:flex;gap:8px} .bb-arrows button{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center; border:1.5px solid var(--chrome-line);color:var(--chrome); background:color-mix(in srgb,var(--chrome) 5%,transparent); transition:all .3s var(--ease-out); } .bb-arrows button:hover{background:var(--chrome);color:var(--bg-0,#0B1020)} #prevBtn:hover svg{transform:translateY(-2px)} #nextBtn:hover svg{transform:translateY(2px)} .bb-arrows svg{transition:transform .3s var(--ease-out)} .bb-arrows button:disabled{opacity:.3;cursor:not-allowed} .bb-arrows svg{width:16px;height:16px} .bb-legal{display:flex;align-items:center;gap:clamp(8px,1.3vw,14px); font-size:clamp(10px,1.35vh,11.5px);color:var(--chrome-dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-legal b{font-weight:600;color:var(--chrome)} .bb-legal .sep{width:1px;height:11px;background:var(--chrome-line);flex:0 0 auto} .bb-legal a{transition:color .25s;white-space:nowrap} .bb-legal a:hover{color:var(--chrome);text-decoration:underline;text-underline-offset:3px} .progress{position:fixed;left:0;bottom:0;height:3px;z-index:52;background:var(--chrome);opacity:.9;width:25%;transition:width .35s var(--ease-snap)} /* 品牌色纵向擦除转场 */ .wipe{ position:fixed;inset:0;z-index:80; background:var(--wipe,#0B1020); transform:scaleY(0); transform-origin:top center; pointer-events:none; will-change:transform; display:grid;place-items:center; } .wipe-word{ font-family:var(--font-serif,Georgia,serif); font-size:clamp(30px,6vw,72px); font-weight:900;letter-spacing:.14em; color:var(--wipe-ink,#fff); opacity:0;transform:translateY(14px); white-space:nowrap; } /* 鼠标视口（3D 上下文仅桌面端建立，见末尾 min-width:1025） */ .visual[data-parallax] > *{transition:transform .35s var(--ease-out)} .starfield{position:absolute;inset:0;overflow:hidden} /* ============================================================ 主题变量 ============================================================ */ .slide[data-theme="star"]{ --ink:#EAF0FF;--muted:#A7B2D4;--accent:#8B9BFF;--accent-2:#37D6EE;--bg-0:#0B1020; --chip-line:rgba(139,155,255,.28);--chip-bg:rgba(139,155,255,.1);--chip-ink:#CFD6FF; --fi-bg:rgba(139,155,255,.12);--fi-line:rgba(139,155,255,.26); --stat-bg:rgba(255,255,255,.05);--stat-line:rgba(255,255,255,.1); --btn-on:#0B1020;--btn-shadow:0 12px 32px rgba(120,135,255,.42);--btn-shadow-h:0 16px 46px rgba(120,135,255,.6); --ghost-line:rgba(255,255,255,.28);--ghost-hover:rgba(255,255,255,.09); --bignum:rgba(139,155,255,.075); } .slide[data-theme="drip"]{ --ink:#10233F;--muted:#4E6085;--accent:#2563EB;--accent-2:#12B5C9;--bg-0:#EAF4FF; --chip-line:rgba(37,99,235,.18);--chip-bg:rgba(255,255,255,.62);--chip-ink:#1D4ED8; --fi-bg:rgba(37,99,235,.08);--fi-line:rgba(37,99,235,.16); --stat-bg:rgba(255,255,255,.6);--stat-line:rgba(37,99,235,.12); --btn-on:#fff;--btn-shadow:0 12px 32px rgba(37,99,235,.34);--btn-shadow-h:0 16px 46px rgba(37,99,235,.48); --ghost-line:rgba(16,35,63,.2);--ghost-hover:rgba(255,255,255,.55); --bignum:rgba(37,99,235,.07); } .slide[data-theme="pix"]{ --ink:#102A26;--muted:#516B63;--accent:#0D9488;--accent-2:#34D399;--bg-0:#F6F9F5; --chip-line:rgba(13,148,136,.2);--chip-bg:rgba(255,255,255,.68);--chip-ink:#0B7A70; --fi-bg:rgba(13,148,136,.09);--fi-line:rgba(13,148,136,.18); --stat-bg:rgba(255,255,255,.62);--stat-line:rgba(13,148,136,.14); --btn-on:#fff;--btn-shadow:0 12px 32px rgba(13,148,136,.32);--btn-shadow-h:0 16px 46px rgba(13,148,136,.46); --ghost-line:rgba(16,42,38,.2);--ghost-hover:rgba(255,255,255,.55); --bignum:rgba(13,148,136,.075); } .slide[data-theme="luo"]{ --ink:#2B2620;--muted:#6E6353;--accent:#B23A2E;--accent-2:#8E2A20;--bg-0:#F4EEE2; --chip-line:rgba(178,58,46,.22);--chip-bg:rgba(255,252,246,.62);--chip-ink:#9C2F24; --fi-bg:rgba(178,58,46,.08);--fi-line:rgba(178,58,46,.18); --stat-bg:rgba(255,252,246,.62);--stat-line:rgba(178,58,46,.16); --btn-on:#F7F0E2;--btn-shadow:0 12px 32px rgba(178,58,46,.32);--btn-shadow-h:0 16px 46px rgba(178,58,46,.46); --ghost-line:rgba(43,38,32,.22);--ghost-hover:rgba(255,252,246,.6); --bignum:rgba(178,58,46,.085); } .slide[data-theme="star"] .title,.slide[data-theme="luo"] .title{font-family:var(--font-serif)} .slide[data-theme="star"] .brandline .bname,.slide[data-theme="luo"] .brandline .bname{font-family:var(--font-serif)} /* ============================================================ ① 星辰 · 深空星轨 ============================================================ */ .star-bg{background:radial-gradient(1200px 700px at 72% 18%,#16204a 0%,#0D1430 42%,#080C1C 100%)} .star-bg .neb{position:absolute;border-radius:50%;filter:blur(70px)} .star-bg .neb-a{width:520px;height:520px;left:-120px;top:8%;background:radial-gradient(circle,rgba(120,135,255,.3),transparent 65%)} .star-bg .neb-b{width:460px;height:460px;right:-100px;bottom:-6%;background:radial-gradient(circle,rgba(55,214,238,.16),transparent 65%)} .star-bg .star{position:absolute;border-radius:50%;background:#fff;animation:twinkle 3s ease-in-out infinite} @keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.95;transform:scale(1.15)}} .star-bg .shoot{position:absolute;width:130px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);border-radius:2px;transform:rotate(-22deg);opacity:0;animation:shoot 7s linear infinite} @keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(-22deg)}4%{opacity:1}11%{opacity:0;transform:translate(-340px,140px) rotate(-22deg)}100%{opacity:0}} .star-stage{position:relative;height:min(560px,62vh);perspective:1200px} .orb-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(139,155,255,.16);transform:translate(-50%,-50%)} .orb-ring.r1{width:480px;height:480px;animation:spin 46s linear infinite} .orb-ring.r2{width:380px;height:380px;border-style:dashed;border-color:rgba(55,214,238,.2);animation:spin 32s linear infinite reverse} .orb-ring.r3{width:580px;height:580px;border-color:rgba(139,155,255,.08)} @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}} .crystal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;filter:drop-shadow(0 0 40px rgba(120,135,255,.55));animation:floaty 6s ease-in-out infinite} .crystal-halo{position:absolute;left:50%;top:50%;width:220px;height:220px;border-radius:50%;transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(139,155,255,.22) 0%,rgba(55,214,238,.08) 45%,transparent 68%); animation:haloPulse 4.2s ease-in-out infinite;pointer-events:none} @keyframes haloPulse{0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.75}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}} @keyframes floaty{0%,100%{transform:translate(-50%,-52%)}50%{transform:translate(-50%,-48%)}} .ochip{position:absolute;display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px; background:rgba(20,28,56,.7);border:1px solid rgba(139,155,255,.25);backdrop-filter:blur(10px); font-size:12.5px;font-weight:600;color:#DCE3FF;white-space:nowrap; box-shadow:0 10px 30px rgba(0,0,0,.35)} .ochip i{width:13px;height:13px;border-radius:3px} .ochip.c1{left:2%;top:24%;animation:floaty 7s ease-in-out infinite} .ochip.c2{right:0;top:14%;animation:floaty 8s ease-in-out 1s infinite} .ochip.c3{left:6%;bottom:16%;animation:floaty 7.5s ease-in-out .5s infinite} .ochip.c4{right:5%;bottom:24%;animation:floaty 8.5s ease-in-out 1.5s infinite} /* 玻璃浏览器星图 */ .browser{ position:absolute;left:50%;top:50%;width:470px; transform:translate(-50%,-50%) translate(calc(var(--px,0)*-9px),calc(var(--py,0)*-9px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s var(--ease-out),box-shadow .35s; border-radius:22px;overflow:hidden;z-index:5; background:linear-gradient(165deg,rgba(30,40,78,.82),rgba(14,20,42,.9)); border:1px solid rgba(150,165,255,.28); box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(16px); } .browser .bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid rgba(150,165,255,.16)} .browser .dots{display:flex;gap:6px}.browser .dots i{width:10px;height:10px;border-radius:50%} .browser .url{margin-left:6px;flex:1;height:24px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;padding:0 10px;font-size:11px;color:#9AA6CC;transition:color .3s} .browser .url.flash{color:#DCE3FF} .search-pill{margin:20px 20px 0;display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:100px; background:rgba(255,255,255,.95);color:#5A6488} .search-pill input{flex:1;border:none;outline:none;background:none;font-size:13px;color:#333;font-family:inherit} .search-pill input::placeholder{color:#8A93B0} .search-pill .aib{font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7C8CFF,#5B74FF);padding:7px 14px;border-radius:100px;white-space:nowrap} .search-pill svg{width:16px;height:16px;color:#7C85AC} .st-tabs{display:flex;gap:16px;justify-content:center;margin:16px 0 12px;font-size:12px;color:#9AA6CC} .st-tabs span{transition:color .3s var(--ease-out)} .st-tabs .on{color:#DCE3FF;font-weight:700;position:relative;padding-bottom:5px} .st-tabs .on::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:16px;height:2px;background:#8B9BFF;border-radius:2px;animation:tabLine .38s var(--ease-out)} @keyframes tabLine{from{transform:translateX(-50%) scaleX(0);opacity:0}to{transform:translateX(-50%) scaleX(1);opacity:1}} .st-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 4px;padding:6px 22px 24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border-radius:18px 18px 0 0;margin:0 6px} .st-cell{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 0} .st-cell .tile{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:700;font-size:15px; background:rgba(255,255,255,.92);color:#2A3558;box-shadow:0 6px 14px rgba(0,0,0,.25); transition:transform .35s var(--ease-out),box-shadow .35s;position:relative} .st-cell .tile.ping{transform:scale(1.18);box-shadow:0 0 0 3px rgba(139,155,255,.6),0 10px 22px rgba(0,0,0,.35)} .st-cell .tile.ping::after{content:"NEW";position:absolute;top:-8px;right:-14px;font-size:7px;font-weight:800;letter-spacing:.05em; background:linear-gradient(135deg,#8B9BFF,#5B74FF);color:#fff;border-radius:99px;padding:1.5px 5px;box-shadow:0 3px 8px rgba(91,116,255,.5)} .st-cell span{font-size:10px;color:#A7B2D4} /* ============================================================ ② 点滴 · 晴空水滴 ============================================================ */ .drip-bg{background:linear-gradient(180deg,#DCEBFF 0%,#EAF4FF 46%,#F4FAFF 100%)} .cloud{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,.15));filter:blur(8px)} .cloud.c1{width:340px;height:120px;left:-80px;top:12%;animation:drift 26s ease-in-out infinite} .cloud.c2{width:260px;height:90px;right:-60px;top:8%;animation:drift 30s ease-in-out 3s infinite} .cloud.c3{width:300px;height:100px;left:12%;bottom:4%;animation:drift 34s ease-in-out 1.5s infinite} @keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(36px)}} .drip-drop{position:absolute;width:11px;height:11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg); background:linear-gradient(135deg,#7FC4FF,#2563EB);opacity:.55;animation:fall linear infinite} @keyframes fall{0%{opacity:0;transform:rotate(-45deg) translateY(-20px)}15%{opacity:.6}100%{opacity:0;transform:rotate(-45deg) translateY(60vh)}} .ripple{position:absolute;border:1.5px solid rgba(37,99,235,.3);border-radius:50%;animation:ripple 4s ease-out infinite} @keyframes ripple{0%{transform:scale(.4);opacity:.6}100%{transform:scale(1.6);opacity:0}} .drip-stage{position:relative;height:min(560px,62vh);perspective:1200px} .dbrand-drop{position:absolute;left:50%;top:0;transform:translateX(-50%);width:64px;height:64px;z-index:2; filter:drop-shadow(0 14px 22px rgba(37,99,235,.4));animation:floaty 6s ease-in-out infinite} .dphone{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%) translate(calc(var(--px,0)*-10px),calc(var(--py,0)*-10px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s var(--ease-out); width:286px;height:520px;border-radius:40px;background:#0F1E3A;padding:9px; box-shadow:0 40px 80px rgba(22,48,140,.35),inset 0 1px 0 rgba(255,255,255,.25);z-index:3; } .dphone .screen{height:100%;border-radius:32px;background:linear-gradient(180deg,#F4F9FF,#E3EEFF);overflow:hidden;display:flex;flex-direction:column;position:relative} .dphone .screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:32px; background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,transparent 30%,transparent 62%,rgba(255,255,255,.08) 100%)} .dph-top{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 8px} .dph-top small{font-size:10px;color:#8A98B8} .dph-top b{font-size:17px;color:#10233F} .dph-ring{position:relative;width:52px;height:52px} .dph-ring svg{width:52px;height:52px;transform:rotate(-90deg)} .dph-ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800;color:#2563EB} .dph-stats{display:flex;justify-content:space-around;margin:6px 14px 0;padding:11px 6px;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(37,99,235,.08)} .dph-stats div{text-align:center;font-size:9.5px;color:#8A98B8} .dph-stats em{display:block;font-style:normal;font-size:15px;font-weight:800;color:#10233F;font-variant-numeric:tabular-nums;transition:color .3s} .dph-stats em.flash{color:#2563EB} .dph-kpi{display:flex;gap:8px;margin:10px 14px 0} .dph-kpi .k{flex:1;background:#fff;border-radius:13px;padding:9px 11px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8A98B8} .dph-kpi b{font-size:13px;color:#10233F;font-variant-numeric:tabular-nums} .dph-habit{margin:12px 14px 0;background:#fff;border-radius:16px;padding:11px 13px;flex:1;overflow:hidden} .dph-habit .ht{font-size:11px;font-weight:700;color:#10233F;margin-bottom:9px} .hrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #EEF3FB} .hrow:last-child{border-bottom:none} .hrow .hd{width:17px;height:17px;border-radius:6px;flex:none;display:grid;place-items:center;transition:background .3s} .hrow.done .hd{background:#22B8CF}.hrow .hd svg{width:11px;height:11px;color:#fff} .hrow:not(.done) .hd{border:1.6px solid #C7D4EE} .hrow .hn{font-size:11.5px;color:#33455F;flex:1}.hrow .hs{font-size:9.5px;color:#9AA8C6} .hrow.done .hn{color:#A7B2C8;text-decoration:line-through} .hrow.done .hs{color:#22B8CF;font-weight:700} .plus1{position:absolute;right:14px;font-size:10px;font-weight:800;color:#22B8CF;pointer-events:none; animation:plus1Up 1.1s var(--ease-out) forwards} @keyframes plus1Up{0%{opacity:0;transform:translateY(4px)}25%{opacity:1}100%{opacity:0;transform:translateY(-16px)}} .heat{display:flex;gap:3px;margin-top:11px} .heat i{width:11px;height:11px;border-radius:3px;transition:background .3s,transform .3s var(--ease-out)} .heat i.lit{background:#0EA5E9!important;transform:scale(1.3)} .dchip{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:14px; background:#fff;box-shadow:0 18px 38px rgba(22,48,140,.2);font-size:12px} .dchip b{font-size:13.5px;color:#10233F;font-variant-numeric:tabular-nums}.dchip small{color:#8A98B8;font-size:10.5px} .dchip .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center} .dchip .ic svg{width:17px;height:17px} .dchip.a{right:2%;top:20%;animation:floaty 6.5s ease-in-out infinite} .dchip.b{left:0;bottom:20%;animation:floaty 7.5s ease-in-out 1s infinite} .dmini-card{position:absolute;right:0;bottom:8%;z-index:2;width:150px;padding:13px;border-radius:16px;background:rgba(255,255,255,.72); border:1px solid rgba(37,99,235,.14);backdrop-filter:blur(8px);box-shadow:0 16px 34px rgba(22,48,140,.14);animation:floaty 8s ease-in-out .5s infinite} .dmini-card .t{font-size:10px;color:#8A98B8;margin-bottom:5px} .dmini-card .bar{height:7px;border-radius:4px;background:linear-gradient(90deg,#2563EB,#22B8CF);margin-bottom:8px} .dmini-card .row{display:flex;align-items:flex-end;gap:4px;height:34px} .dmini-card .row i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#6FA3FF,#2563EB);transition:height .7s var(--ease-out)} /* ============================================================ ③ 票小秘 · 纸感票据 ============================================================ */ .pix-bg{background:linear-gradient(170deg,#F7FAF6 0%,#E9F3EC 55%,#F2F7F2 100%)} .pix-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(13,148,136,.13) 1.2px,transparent 1.2px);background-size:26px 26px;opacity:.5; -webkit-mask-image:radial-gradient(800px 600px at 70% 45%,#000,transparent 78%);mask-image:radial-gradient(800px 600px at 70% 45%,#000,transparent 78%)} .pix-blob{position:absolute;border-radius:50%;filter:blur(60px)} .pix-blob.a{width:440px;height:440px;right:-120px;top:-8%;background:radial-gradient(circle,rgba(52,211,153,.3),transparent 66%)} .pix-blob.b{width:360px;height:360px;left:-110px;bottom:-8%;background:radial-gradient(circle,rgba(13,148,136,.2),transparent 66%)} .pix-bg .drift-ticket{position:absolute;opacity:.5;animation:floaty 9s ease-in-out infinite} .pix-stage{position:relative;height:min(560px,62vh)} .inv-stack{position:relative;width:380px;height:470px;margin:0 auto} .inv-back{position:absolute;border-radius:18px;background:#fff;border:1px solid rgba(13,148,136,.16)} .inv-back.b1{inset:0;transform:translate(18px,-16px) rotate(6deg);background:linear-gradient(160deg,#E7F5EF,#fff);opacity:.7} .inv-back.b2{inset:0;transform:translate(-16px,14px) rotate(-5deg);background:linear-gradient(160deg,#EAF5F0,#fff);opacity:.6} .invoice{ position:absolute;inset:0;border-radius:18px;background:#fff;overflow:hidden; border:1px solid rgba(13,148,136,.2);box-shadow:0 40px 80px rgba(13,90,80,.22); transform:rotate(-1.5deg) translate(calc(var(--px,0)*-7px),calc(var(--py,0)*-7px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s var(--ease-out); } .inv-head{background:linear-gradient(135deg,#0F766E,#0D9488);color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center} .inv-head .t{font-size:14px;font-weight:700}.inv-head .s{font-size:10px;opacity:.8;margin-top:3px} .inv-head .tag{font-size:10px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);padding:4px 9px;border-radius:6px} .inv-scan{position:relative;height:3px;background:linear-gradient(90deg,transparent,rgba(13,148,136,.15),transparent)} .inv-scan .scanbar{position:absolute;top:0;width:60px;height:100%;background:linear-gradient(90deg,transparent,#34D399,transparent);box-shadow:0 0 12px rgba(52,211,153,.9);animation:scan 2.6s ease-in-out infinite} @keyframes scan{0%,100%{left:0}50%{left:calc(100% - 60px)}} .inv-body{padding:14px 20px} .inv-field{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed #E6EDE9} .inv-field .k{width:64px;font-size:11.5px;color:#7A8E87;flex:none} .inv-field .v{flex:1;font-size:13px;font-weight:600;color:#102A26} .inv-field .ck{width:20px;height:20px;border-radius:50%;background:#E8F8F2;color:#0D9488;display:grid;place-items:center;flex:none} .inv-field .ck svg{width:12px;height:12px} .inv-amount{color:#0D9488!important;font-size:16px;font-weight:800!important} .inv-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px} .inv-verified{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#0D9488;font-weight:700} .inv-verified .vck{width:22px;height:22px;border-radius:50%;background:#0D9488;color:#fff;display:grid;place-items:center} .inv-verified .vck svg{width:13px;height:13px} .inv-seal{width:56px;height:56px;border-radius:50%;border:2.5px solid #C0513F;color:#C0513F;display:grid;place-items:center; font-size:12px;font-weight:800;transform:rotate(-12deg);background:rgba(192,81,63,.06);line-height:1.1;text-align:center} .pix-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px; background:#fff;box-shadow:0 16px 34px rgba(13,90,80,.18);font-size:11.5px;color:#3D544D;font-weight:600} .pix-chip b{color:#0D9488;font-weight:800} .pix-chip .num{font-variant-numeric:tabular-nums;transition:color .2s,transform .2s} .pix-chip .num.flash{color:#0B7A70;transform:scale(1.08)} .pix-chip .ic{width:28px;height:28px;border-radius:9px;background:#E8F8F2;color:#0D9488;display:grid;place-items:center} .pix-chip .ic svg{width:15px;height:15px} .pix-chip.a{left:0;top:12%;animation:floaty 7s ease-in-out infinite} .pix-chip.b{right:0;bottom:16%;animation:floaty 8s ease-in-out 1.2s infinite} .pix-chip.c{left:4%;bottom:6%;animation:floaty 7.5s ease-in-out .6s infinite} .slide.is-active.entrance .frow{animation:frowIn .55s var(--ease-out) both} .slide.is-active.entrance .frow:nth-child(1){animation-delay:.45s} .slide.is-active.entrance .frow:nth-child(2){animation-delay:.62s} .slide.is-active.entrance .frow:nth-child(3){animation-delay:.79s} .slide.is-active.entrance .frow:nth-child(4){animation-delay:.96s} .slide.is-active.entrance .inv-foot{animation:frowIn .55s var(--ease-out) 1.15s both} @keyframes frowIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} .slide.is-active.entrance .inv-seal{animation:sealPop .6s cubic-bezier(.2,1.3,.4,1) 1.35s both} @keyframes sealPop{0%{opacity:0;transform:scale(1.7) rotate(-20deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}} /* ============================================================ ④ 落印 · 宣纸朱砂 ============================================================ */ .luo-bg{background: radial-gradient(rgba(120,90,50,.05) 1px,transparent 1px), linear-gradient(180deg,#F5EFE3 0%,#F0E8D7 100%);background-size:4px 4px,100% 100%} .luo-bg .paper-grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply; background-image:url("../image/paper-grain.svg")} .luo-bg .seal-mark{position:absolute;right:6%;bottom:6%;width:340px;height:340px;border-radius:22px;opacity:.06; border:8px solid #B23A2E;display:grid;place-items:center;font-family:var(--font-serif);font-weight:900;font-size:150px;color:#B23A2E} .luo-vert{position:absolute;left:30px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl; font-family:var(--font-serif);font-size:16px;letter-spacing:.5em;color:var(--muted);opacity:.7} .luo-bg .chain{position:absolute;left:0;right:0;top:20%;height:1px;background:repeating-linear-gradient(90deg,rgba(178,58,46,.25) 0 8px,transparent 8px 18px)} .luo-bg .chain-pulse{position:absolute;top:20%;width:7px;height:7px;border-radius:50%;background:#B23A2E; box-shadow:0 0 14px rgba(178,58,46,.9);transform:translateY(-50%);animation:chainMove 4.6s linear infinite} @keyframes chainMove{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}} .luo-stage{position:relative;height:min(560px,62vh)} .cert-wrap{position:absolute;inset:0} .cert{ position:absolute;left:50%;top:50%;width:380px;transform:translate(-50%,-50%); background:linear-gradient(180deg,#FDF9F0,#F7F0E1); border:1px solid rgba(178,58,46,.28);border-radius:6px; box-shadow:0 44px 90px rgba(90,50,20,.28); padding:26px 28px 22px; } .cert::before{content:"";position:absolute;inset:8px;border:1px solid rgba(178,58,46,.2);border-radius:3px;pointer-events:none} .cert .cname{font-family:var(--font-serif);font-weight:900;font-size:23px;text-align:center;letter-spacing:.18em;color:#2B2620} .cert .cen{text-align:center;font-size:8.5px;letter-spacing:.28em;color:#A2967F;margin-top:5px} .cert .cf{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(140,110,70,.3);font-size:12px} .cert .cf .k{color:#9A8C73;flex:none}.cert .cf .v{color:#3A332A;text-align:right;font-weight:600} .cert .cf-list{margin-top:6px} .cert .cbot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:16px} .cert .qr{width:58px;height:58px;background: conic-gradient(from 90deg,#2B2620 0 25%,#fff 0 50%,#2B2620 0 75%,#fff 0); background-size:11px 11px;border:5px solid #fff;outline:1px solid #D8CDB4;border-radius:3px} .cseal{position:relative;width:64px;height:64px;display:grid;place-items:center} .cseal .sealbox{width:60px;height:60px;border-radius:10px;background:#B23A2E;color:#F8EFE0;display:grid;place-items:center; font-family:var(--font-serif);font-weight:900;font-size:30px;box-shadow:0 8px 20px rgba(178,58,46,.4)} .slide.is-active.entrance .cseal .sealbox{animation:stamp .7s cubic-bezier(.2,1.3,.4,1) .9s both} @keyframes stamp{0%{opacity:0;transform:scale(2.2) rotate(-18deg)}60%{opacity:1;transform:scale(.94) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}} .cseal .ink{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(178,58,46,.5);opacity:0} .slide.is-active.entrance .cseal .ink{animation:inkspread 1.1s ease-out 1.2s forwards} @keyframes inkspread{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}} .cert .clegal{margin-top:13px;font-size:8.5px;line-height:1.6;color:#A2967F;text-align:justify} .luo-chip{position:absolute;z-index:5;padding:11px 15px;border-radius:10px;background:rgba(255,252,246,.9); border:1px solid rgba(178,58,46,.2);box-shadow:0 16px 34px rgba(90,50,20,.16);font-size:11.5px;color:#6E6353} .luo-chip .mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#2B2620;font-weight:700} .luo-chip .sub{font-size:10px;color:#A2967F;margin-top:2px} .luo-chip .sub b{font-variant-numeric:tabular-nums;transition:color .3s} .luo-chip .sub b.flash{color:#B23A2E} .luo-chip.ok{display:flex;align-items:center;gap:8px;color:#8E2A20;font-weight:700} .luo-chip.ok .ck{width:20px;height:20px;border-radius:50%;background:#B23A2E;color:#fff;display:grid;place-items:center;flex:none} .luo-chip.ok .ck svg{width:12px;height:12px} .luo-chip.ok.ping .ck{animation:okPing 1s var(--ease-out)} @keyframes okPing{0%{transform:scale(1)}50%{transform:scale(1.3);box-shadow:0 0 0 6px rgba(178,58,46,.18)}100%{transform:scale(1)}} .luo-chip.a{left:0;top:14%;animation:floaty 7.5s ease-in-out infinite} .luo-chip.b{right:0;bottom:18%;animation:floaty 8.5s ease-in-out 1s infinite} /* 小屏视觉缩放 */ /* ============================================================ v2 深度优化：开场加载 / 文字编排 / 微交互 / 氛围层 ============================================================ */ /* ── 0. 每屏暗角，增加纵深 ── */ .slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(125% 95% at 50% 42%,transparent 58%,color-mix(in srgb,var(--ink) 8%,transparent) 100%)} /* ── 1. 开场：品牌加载幕 ── */ #loader{position:fixed;inset:0;z-index:200;background:#0B1020;display:grid;place-items:center; transition:opacity .7s var(--ease-out),visibility .7s,transform .9s var(--ease-out)} #loader.done{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.08)} #loader .ld{display:flex;flex-direction:column;align-items:center;gap:18px} /* 公司 Logo：玻璃碎片合拢 */ #loader .ld-logo{position:relative;width:clamp(104px,12vw,132px);aspect-ratio:603/690; filter:drop-shadow(0 14px 42px rgba(0,0,0,.5))} .logo-glow{position:absolute;left:50%;top:50%;width:300%;aspect-ratio:1;z-index:0;pointer-events:none; transform:translate(-50%,-50%) scale(.65);opacity:0;border-radius:50%;filter:blur(7px); background:radial-gradient(circle,rgba(245,130,30,.30) 0%,rgba(139,155,255,.18) 42%,transparent 68%); animation:glowIn 1.15s var(--ease-out) .1s both} @keyframes glowIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:.85;transform:translate(-50%,-50%) scale(1)}} #ldLogo.impact .logo-glow{animation:glowPulse 1.9s var(--ease-out) both} @keyframes glowPulse{0%{opacity:.85;transform:translate(-50%,-50%) scale(1)} 28%{opacity:1;transform:translate(-50%,-50%) scale(1.14)} 100%{opacity:.5;transform:translate(-50%,-50%) scale(1.05)}} .logo-stage{position:absolute;inset:0;z-index:1} .logo-shard{position:absolute;inset:0;opacity:0; background-image:url("../image/logo-tecool-mark.png");background-size:100% 100%;background-repeat:no-repeat; will-change:transform,opacity,filter;backface-visibility:hidden} .logo-final{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain; opacity:0;transition:opacity .28s var(--ease-out);pointer-events:none} #ldLogo.impact .logo-final{opacity:1} /* 拼合瞬间：外扩冲击环 + 整体弹压 */ .logo-ring{position:absolute;left:50%;top:50%;width:88%;aspect-ratio:1;z-index:0;pointer-events:none; border-radius:50%;border:1px solid rgba(139,155,255,.6);opacity:0; transform:translate(-50%,-50%) scale(.5)} #ldLogo.impact .logo-ring{animation:ringImpact 1s var(--ease-out) both} @keyframes ringImpact{0%{opacity:.9;transform:translate(-50%,-50%) scale(.5)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}} #ldLogo.impact{animation:logoLand .85s cubic-bezier(.2,1.3,.35,1)} @keyframes logoLand{0%{transform:scale(1)}34%{transform:scale(1.07)}100%{transform:scale(1)}} /* 拼合后的高光扫过（按 logo 轮廓遮罩） */ .logo-sweep{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;overflow:hidden; mix-blend-mode:screen; -webkit-mask-image:url("../image/logo-tecool-mark.png");mask-image:url("../image/logo-tecool-mark.png"); -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .logo-sweep i{position:absolute;top:-25%;left:-75%;width:45%;height:150%;transform:skewX(-16deg); background:linear-gradient(100deg,transparent,rgba(255,255,255,.95) 45%,rgba(255,255,255,.6) 60%,transparent)} #loader .ld-word{display:flex;font-size:15px;font-weight:800;letter-spacing:.4em;color:#EAF0FF;margin-right:-.4em} #loader .ld-word span{opacity:0;transform:translateY(9px);animation:ldUp .5s var(--ease-out) forwards} #loader .ld-word span:nth-child(1){animation-delay:1.00s} #loader .ld-word span:nth-child(2){animation-delay:1.06s} #loader .ld-word span:nth-child(3){animation-delay:1.12s} #loader .ld-word span:nth-child(4){animation-delay:1.18s} #loader .ld-word span:nth-child(5){animation-delay:1.24s} #loader .ld-word span:nth-child(6){animation-delay:1.30s} #loader .ld-word span:nth-child(7){animation-delay:1.36s} @keyframes ldUp{to{opacity:1;transform:none}} #loader .ld-bar{width:132px;height:2px;border-radius:2px;background:rgba(139,155,255,.16);overflow:hidden} #loader .ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#F0862A,#8B9BFF,#37D6EE);animation:ldBar 1s var(--ease-out) 1.02s forwards} @keyframes ldBar{to{width:100%}} #loader .ld-sub{font-size:10px;letter-spacing:.32em;color:rgba(234,240,255,.38);opacity:0;animation:ldUp .6s var(--ease-out) 1.8s forwards} /* ── 2. 桌面端鼠标氛围光晕 ── */ #cg{position:fixed;left:0;top:0;width:440px;height:440px;border-radius:50%;z-index:1;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--accent,#8B9BFF) 60%,transparent) 0%,transparent 62%); opacity:0;transition:opacity .6s;will-change:transform} #cg.on{opacity:.11} /* ── 3. 固定框架入场（顶栏 / 底栏 / 圆点） ── */ .topbar{transform:translateY(-108%);transition:transform .8s var(--ease-out) .12s,color .25s ease} body.ready .topbar{transform:none} .bottombar{transform:translateY(108%);transition:transform .8s var(--ease-out) .12s} body.ready .bottombar{transform:none} .dotnav{opacity:0;transform:translateY(-50%) translateX(26px); transition:opacity .7s var(--ease-out) .45s,transform .7s var(--ease-out) .45s} body.ready .dotnav{opacity:1;transform:translateY(-50%)} /* ── 4. 顶导航：滑动药丸 ── */ #tbPill{position:absolute;top:0;left:0;height:100%;border-radius:100px;z-index:0;opacity:0;pointer-events:none; background:color-mix(in srgb,var(--chrome) 10%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chrome) 14%,transparent)} #tbPill.go{transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .3s} .tb-nav button{position:relative;z-index:1} /* ── 5. 圆点：激活脉冲环 ── */ .dotnav .dd{position:relative} .dotnav button.is-active .dd::after{content:"";position:absolute;inset:-5px;border-radius:9px; border:1.5px solid var(--chrome);animation:dotPing 2.2s var(--ease-out) infinite} @keyframes dotPing{0%{transform:scale(.65);opacity:.65}80%,100%{transform:scale(1.4);opacity:0}} /* ── 6. 标题：逐词上显 ── */ .title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em} .title .w>i{display:inline-block;font-style:normal;transform:translateY(118%);opacity:0} .slide.is-active.entrance .title .w>i{animation:wIn .95s var(--ease-out) var(--d,0ms) forwards} @keyframes wIn{from{transform:rotateX(62deg) translateY(118%);opacity:0}to{transform:none;opacity:1}} .slide.is-active[data-played] .title .w>i{transform:none;opacity:1} /* ── 7. 高亮词：渐变流光 + 落印线 ── */ .title .hl,.title .hl2{background:linear-gradient(92deg,var(--accent) 0%,var(--accent-2) 45%,var(--accent) 92%); background-size:230% 100%;-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent;animation:hlPan 7.5s ease-in-out infinite} @keyframes hlPan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* ── 8. 按钮：高光扫过 ── */ .btn::after{content:"";position:absolute;top:0;bottom:0;left:-90%;width:55%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg);transition:left .65s var(--ease-out)} .btn:hover::after{left:135%} .btn.ghost::after{background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--chrome) 24%,transparent),transparent)} /* ── 9. 数据卡：聚光 hover ── */ .stat{position:relative;overflow:hidden;transition:transform .35s var(--ease-out),border-color .3s} .stat:hover{transform:translateY(-3px)} .stat::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s; background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%)} .stat:hover::before{opacity:1} .stat b .pre{font-size:.82em;font-weight:700;margin-right:1px} /* ── 10. 特性行：滑移 hover ── */ .features li{transition:transform .3s var(--ease-out)} .features li:hover{transform:translateX(7px)} .features .fi{transition:transform .35s var(--ease-out),box-shadow .35s} .features li:hover .fi{transform:scale(1.1) rotate(-5deg);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 30%,transparent)} /* ── 11. 品牌 Logo：弹入 ── */ .slide.is-active.entrance .brandline .logo{animation:logoIn .9s cubic-bezier(.2,1.2,.4,1) both} @keyframes logoIn{0%{opacity:0;transform:scale(.4) rotate(-25deg)}100%{opacity:1;transform:none}} /* ── 12. 大序号：漂移呼吸 ── */ .slide.is-active[data-played] .bignum{opacity:1;transform:translateY(-50%);animation:numFloat 10s ease-in-out 2.4s infinite} @keyframes numFloat{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-16px)}} /* ── 13. 进度条辉光 / 滚动提示隐退 / 方向键联动 ── */ .progress{box-shadow:0 0 14px var(--chrome),0 0 4px var(--chrome)} .scroll-hint{transition:opacity .5s,transform .5s} .scroll-hint.hide{opacity:0;transform:translateX(-10px)} .bb-arrows button.pressed{background:var(--chrome);color:var(--bg-0,#0B1020);transform:scale(.92)} /* ── 14. ① 星辰：星链 / 轨道卫星 / 晶体晕光 / AI 呼吸 ── */ .constel{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible} .constel line{stroke:rgba(139,155,255,.4);stroke-width:1} .constel circle{opacity:0;transition:opacity .6s} .constel.on circle{opacity:.95} .orb-ring.r1::after,.orb-ring.r2::after{content:"";position:absolute;border-radius:50%} .orb-ring.r1::after{top:-4px;left:calc(50% - 4px);width:8px;height:8px;background:#B9C4FF;box-shadow:0 0 14px rgba(139,155,255,.95)} .orb-ring.r2::after{top:-3px;left:calc(50% - 3px);width:6px;height:6px;background:#37D6EE;box-shadow:0 0 12px rgba(55,214,238,.95)} .crystal-sheen{position:absolute;left:50%;top:50%;width:300px;height:300px;border-radius:50%;z-index:0;pointer-events:none; background:conic-gradient(from 20deg,rgba(139,155,255,0) 0%,rgba(139,155,255,.3) 16%,rgba(55,214,238,.2) 32%,rgba(139,155,255,0) 52%,rgba(139,155,255,0) 100%); filter:blur(30px);transform:translate(-50%,-50%);animation:spin 16s linear infinite} .search-pill .aib{animation:aibPulse 3.4s ease-in-out infinite} @keyframes aibPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,140,255,.45)}55%{box-shadow:0 0 0 7px rgba(124,140,255,0)}} /* ── 15. ② 点滴：海浪 / 气泡 / 进度环灌注 / 打卡水花 ── */ .wave{position:absolute;left:0;right:0;bottom:0;height:110px;z-index:1;pointer-events:none} .wave svg{position:absolute;left:0;bottom:0;width:200%;height:100%} .wave .w1{animation:waveX 9s ease-in-out infinite} .wave .w2{animation:waveX 13s ease-in-out infinite reverse} @keyframes waveX{0%,100%{transform:translateX(0)}50%{transform:translateX(-50%)}} .bub{position:absolute;bottom:-26px;border-radius:50%;border:1.5px solid rgba(37,99,235,.26); background:rgba(255,255,255,.28);animation:bubRise linear infinite;opacity:0;pointer-events:none} @keyframes bubRise{0%{opacity:0;transform:translate(0,0)}12%{opacity:.85}50%{transform:translate(14px,-44vh)}100%{opacity:0;transform:translate(-10px,-88vh)}} .slide.is-active.entrance .dph-ring circle:last-child{animation:ringFill 1.5s var(--ease-out) .55s both} @keyframes ringFill{from{stroke-dashoffset:138}to{stroke-dashoffset:115}} .hrow .hd{position:relative} .splash{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;pointer-events:none; border:2px solid #22B8CF;animation:splashOut .7s var(--ease-out) forwards} @keyframes splashOut{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}} /* ── 16. ③ 票小秘：取景框 / 票据高光 / 扫描增亮 ── */ .vf{position:absolute;width:24px;height:24px;z-index:6;pointer-events:none; border:2.5px solid var(--accent);animation:vfPulse 2.8s ease-in-out infinite} .vf.tl{top:-13px;left:-13px;border-right:none;border-bottom:none;border-radius:8px 0 0 0} .vf.tr{top:-13px;right:-13px;border-left:none;border-bottom:none;border-radius:0 8px 0 0} .vf.bl{bottom:-13px;left:-13px;border-right:none;border-top:none;border-radius:0 0 0 8px} .vf.br{bottom:-13px;right:-13px;border-left:none;border-top:none;border-radius:0 0 8px 0} @keyframes vfPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.95;transform:scale(1.07)}} .invoice::after{content:"";position:absolute;top:-10%;left:-70%;width:42%;height:120%;z-index:3;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-14deg);animation:glare 6.5s ease-in-out 1.8s infinite} @keyframes glare{0%,55%{left:-70%}100%{left:135%}} .scanbar{transition:box-shadow .3s,filter .3s} .scanbar.flash{box-shadow:0 0 24px rgba(52,211,153,1),0 0 48px rgba(52,211,153,.55);filter:brightness(1.5)} /* ── 17. ④ 落印：墨点上浮 / 盖章墨溅 ── */ .inkdot{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(178,58,46,.42); animation:inkFloat linear infinite;opacity:0;pointer-events:none} @keyframes inkFloat{0%{opacity:0;transform:translateY(0)}14%{opacity:.75}100%{opacity:0;transform:translateY(-62vh)}} .inkp{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#B23A2E;opacity:0;pointer-events:none} .slide.is-active.entrance .inkp{animation:inkFly .85s var(--ease-out) both} @keyframes inkFly{0%{opacity:.95;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px))) scale(.25)}} /* ── 18. 桌面：舞台多层视差（CSS 变量驱动，带缓动） ── */ .star-stage,.drip-stage,.pix-stage,.luo-stage{ transform:translate(calc(var(--px,0)*-14px),calc(var(--py,0)*-14px));transition:transform .35s var(--ease-out)} /* ============================================================ v3 电影级增强：环境粒子 / 光束 / 切换飞入 / 签名动效 ============================================================ */ /* ── 19. 主题环境粒子层（canvas，JS 注入 .bg 内） ── */ .pfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} /* ── 20. 首屏光束扫过（加载幕后） ── */ .godray{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0; background:linear-gradient(102deg,transparent 33%,rgba(255,255,255,.09) 44%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.09) 56%,transparent 67%)} body.godray-on .godray{animation:godraySweep 1.15s var(--ease-out) .08s 1 forwards} @keyframes godraySweep{0%{opacity:0;transform:translateX(-62%)}18%{opacity:1}100%{opacity:0;transform:translateX(62%)}} /* ── 21. 重复切换：内容方向性飞入（--dir：1 从下 / -1 从上） ── */ .slide.is-active[data-played].enter-again .rise{animation:rise2 .72s var(--ease-out) calc(var(--i,0)*45ms) forwards} @keyframes rise2{from{opacity:0;transform:translateY(calc(var(--dir,1)*26px))}to{opacity:1;transform:none}} .slide.is-active[data-played].enter-again .visual{animation:visualIn2 .9s var(--ease-out) .06s forwards} @keyframes visualIn2{from{opacity:0;transform:translateY(calc(var(--dir,1)*36px)) scale(.95);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}} .slide.is-active[data-played].enter-again .bignum{animation:numAgain .95s var(--ease-snap) forwards} @keyframes numAgain{from{opacity:0;transform:translateY(-50%) translateX(calc(var(--dir,1)*54px))}to{opacity:1;transform:translateY(-50%)}} .slide.is-active[data-played].enter-again .brandline .logo{animation:logoIn .8s cubic-bezier(.2,1.2,.4,1) both} .slide.is-active[data-played].enter-again .frow{animation:frowIn .55s var(--ease-out) both} .slide.is-active[data-played].enter-again .frow:nth-child(1){animation-delay:.32s} .slide.is-active[data-played].enter-again .frow:nth-child(2){animation-delay:.46s} .slide.is-active[data-played].enter-again .frow:nth-child(3){animation-delay:.6s} .slide.is-active[data-played].enter-again .frow:nth-child(4){animation-delay:.74s} .slide.is-active[data-played].enter-again .inv-foot{animation:frowIn .55s var(--ease-out) .88s both} .slide.is-active[data-played].enter-again .cseal .sealbox{animation:stamp .7s cubic-bezier(.2,1.3,.4,1) .5s both} .slide.is-active[data-played].enter-again .cseal .ink{animation:inkspread 1.1s ease-out .82s forwards} .slide.is-active[data-played].enter-again .inkp{animation:inkFly .85s var(--ease-out) both} .slide.is-active[data-played].enter-again .dph-ring circle:last-child{animation:ringFill 1.5s var(--ease-out) .45s both} /* ── 22. 数字滚动收尾弹跳 ── */ .stat b .n{display:inline-block} .stat b .n.pop{animation:nPop .55s cubic-bezier(.2,1.5,.4,1)} @keyframes nPop{45%{transform:scale(1.24)}} /* ── 23. ① 星辰：站点芯片周期点亮（星链活跃感） ── */ .ochip.ping{border-color:rgba(139,155,255,.85);box-shadow:0 0 0 4px rgba(139,155,255,.14),0 10px 30px rgba(0,0,0,.35)} .ochip{transition:border-color .4s,box-shadow .4s} /* ── 24. ② 点滴：归档左滑 / 新日补入 / 完成彩带 ── */ .hrow{transition:transform .5s var(--ease-out),opacity .5s} .hrow.archive{transform:translateX(-118%);opacity:0} .hrow.pre-enter{transform:translateX(72%);opacity:0} .dph-habit{position:relative} .cfi{position:absolute;width:5px;height:5px;border-radius:2px;pointer-events:none; animation:cfiFly .95s var(--ease-out) forwards} @keyframes cfiFly{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}} /* ── 25. ③ 票小秘：字段重扫高亮 / 盖章震票 ── */ .inv-field{transition:background .35s var(--ease-out)} .frow.reflash{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent),transparent 78%);border-radius:8px} .frow.reflash .ck{animation:ckPop .45s cubic-bezier(.2,1.5,.4,1)} @keyframes ckPop{50%{transform:scale(1.38)}} .inv-stack.shake{animation:stackShake .5s var(--ease-out)} @keyframes stackShake{0%,100%{transform:translate(0,0) rotate(0)}18%{transform:translate(-5px,2px) rotate(-.6deg)}38%{transform:translate(5px,-2px) rotate(.6deg)}58%{transform:translate(-3px,1px) rotate(-.35deg)}80%{transform:translate(2px,-1px) rotate(.2deg)}} /* ── 26. ④ 落印：上链震证 ── */ .cert-wrap.shake{animation:wrapShake .5s var(--ease-out)} @keyframes wrapShake{0%,100%{transform:translate(0,0)}22%{transform:translate(-6px,3px)}48%{transform:translate(6px,-3px)}74%{transform:translate(-3px,2px)}} /* ── 27. 加载幕：四产品矩阵点名 ── */ #loader .ld-matrix{display:flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.2em;color:#EAF0FF} #loader .ld-matrix span{display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(6px); animation:ldUp .5s var(--ease-out) forwards} #loader .ld-matrix span::after{content:"";width:3px;height:3px;border-radius:50%;background:rgba(139,155,255,.55);flex:none} #loader .ld-matrix span:last-child::after{display:none} #loader .ld-matrix span:nth-child(1){animation-delay:1.42s} #loader .ld-matrix span:nth-child(2){animation-delay:1.52s} #loader .ld-matrix span:nth-child(3){animation-delay:1.62s} #loader .ld-matrix span:nth-child(4){animation-delay:1.72s} /* ============ 平板 / 手机：分屏内可纵向滚动 ============ */ @media (max-width:1024px){ /* 移动端改原生页面流：仅激活屏参与布局，随页面自然滚动，规避固定屏+内部滚动容器的合成层缺陷 */ html,body{height:auto;overflow-x:hidden;overflow-y:visible} .deck{position:static;inset:auto} .slide{position:relative;inset:auto;min-height:100vh;height:auto;overflow:hidden} .slide:not(.is-active){display:none} .slide.is-active{display:block;opacity:1;visibility:visible;z-index:auto} .slide-inner{ position:relative;z-index:3;inset:auto;max-width:none;margin:0;height:auto; display:flex;flex-direction:column;justify-content:flex-start;align-items:center; gap:24px;padding:82px 26px 130px; overflow:visible; } .copy{order:1;width:100%;max-width:620px} .visual{order:2;width:100%;max-width:460px;margin:0 auto;flex:none} .star-stage{height:472px} .drip-stage{height:540px} .browser{width:386px} /* 票小秘发票 / 落印证书：移动端彻底展平 3D、正常流定位，规避合成层坍缩 */ #slide-pix .visual,#slide-luo .visual{transform-style:flat} .pix-stage,.luo-stage{display:block;height:auto;padding:0;perspective:none} .inv-stack{position:relative;width:332px;height:418px;margin:0 auto} .inv-stack .invoice{position:relative;inset:auto;width:332px;height:418px;margin:0;transform:rotate(0);transform-style:flat} .cert-wrap{position:relative;width:332px;height:432px;margin:0 auto} .cert-wrap .cert{position:relative;inset:auto;left:auto;top:auto;width:100%;height:100%;margin:0;transform:rotateY(0) rotate(0);transform-style:flat} .bignum{right:-4vw;font-size:30vw} .luo-vert{display:none} .tb-nav{display:none} /* 浮动卡片在窄屏会与主体重叠，隐藏 */ .ochip,.pix-chip,.dchip,.luo-chip,.luo-chip.ok,.dmini-card{display:none!important} .dotnav{right:15px;gap:16px} .topbar{padding:14px 20px} } @media (max-width:680px){ .slide-inner{padding:74px 18px 150px;gap:20px} .dotnav .dl{display:none} .title{font-size:clamp(26px,8vw,34px);margin:14px 0 12px} .lead{font-size:13.6px;line-height:1.7;max-width:none} .features{margin-top:16px;gap:10px} .features small{display:none} .features li{gap:10px} .features .fi{width:30px;height:30px;border-radius:9px} .features b{font-size:13.6px} .stats{margin-top:16px;gap:7px} .stat{padding:9px 12px;min-width:0;flex:1} .stat b{font-size:17px} .stat span{font-size:10.5px} .cta{margin-top:18px;gap:12px} .btn{padding:12px 20px;font-size:14px} .brandline{margin-bottom:13px} .brandline .logo{width:36px;height:36px} .brandline .bname{font-size:20px} .scroll-hint span{display:none} .bb-count b{font-size:20px} .bottombar{height:auto;padding:9px 16px;flex-wrap:wrap;gap:8px} .bb-legal{font-size:9.5px;white-space:normal} .bignum{display:none} .dotnav{right:11px;gap:14px} .dotnav .dd{width:8px;height:8px} .dotnav button.is-active .dd{height:24px} .star-stage{height:472px} .drip-stage{height:424px} .visual{max-width:380px} .browser{width:min(330px,90vw)} .dphone{transform:translate(-50%,-50%) scale(.8)} .inv-stack{width:min(300px,92vw);height:376px} .inv-stack .invoice{width:min(300px,92vw);height:376px} .cert-wrap{width:min(300px,92vw);height:430px} .pix-blob{display:none} } /* 3D 视角仅在桌面端启用；移动端级联中完全不含 3D，规避合成层把卡片渲染成边缘 */ @media (min-width:1025px){ .visual{transform-style:preserve-3d} .pix-stage{perspective:1200px} .luo-stage{perspective:1400px} .cert{transform:translate(-50%,-50%) rotateY(-8deg) rotate(1.5deg) translate(calc(var(--px,0)*-8px),calc(var(--py,0)*-8px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease-out)} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .rise,.visual{opacity:1;transform:none} .bignum{opacity:1;transform:translateY(-50%)} .title .w>i{opacity:1!important;transform:none!important} #loader{display:none} .stat::before,.btn::after,.constel,.godray,.pfield,.cfi{display:none} } /* ============================================================ SEO / 无障碍辅助 ============================================================ */ /* 视觉隐藏但保留给屏幕阅读器与搜索引擎 */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* 无 JS 兜底内容（仅