/* ============================================================ gate.css · 入口封面 · 模糊背景：虚化的品牌花标 + 顶部金辉 + 细颗粒 · 点缀：两圈扩散金环 + 十点金色星点 · 居中主文案「点击查询正品防伪」 默认 display:none，只有 时才出现 —— boot 标记由 js/boot.js 打上且永不撤除，所以无 JS 时封面不会挡住页面。 ============================================================ */ .gate{display:none} /* gate-armed 由 js/gate.js 亲自打上 —— 谁显示封面，谁就必须负责点击后的放行。 所以 gate.js 一旦没跑起来，封面根本不出现，页面自动退回内容默认可见。 */ .gate-armed .gate{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; overflow:hidden; background:radial-gradient(118% 78% at 50% 36%, rgba(28,22,24,.90) 0%, rgba(12,12,14,.95) 58%, var(--bg) 100%); -webkit-backdrop-filter:blur(22px) saturate(126%); backdrop-filter:blur(22px) saturate(126%); cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent; transition:opacity .62s cubic-bezier(.22,.86,.28,1), transform .62s cubic-bezier(.22,.86,.28,1), filter .62s ease; } /* ---------- 背景层 ---------- */ .gate__bg{position:absolute;inset:0;pointer-events:none} .gate__glow{ position:absolute;left:50%;top:-8%; width:154%;height:54%; transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(201,163,78,.17), rgba(201,163,78,0) 72%); } /* 虚化花标 —— "模糊背景"的主角 */ .gate__flower{ position:absolute;left:50%;top:46%; width:min(74vw,330px);height:auto; opacity:.26; filter:blur(30px) saturate(115%); animation:gate-drift 9s ease-in-out infinite; } /* 两圈扩散金环 */ .gate__ring{ position:absolute;left:50%;top:46%; width:min(84vw,400px);aspect-ratio:1; border:1px solid rgba(201,163,78,.34); border-radius:50%; opacity:0; animation:gate-ring 5.2s cubic-bezier(.22,.7,.3,1) infinite; } .gate__ring--b{animation-delay:2.6s} /* 金色星点 */ .gate__dots{position:absolute;inset:0} .gate__dots i{ position:absolute; left:var(--x);top:var(--y); width:var(--s,3px);height:var(--s,3px); margin:calc(var(--s,3px) / -2) 0 0 calc(var(--s,3px) / -2); border-radius:50%; background:var(--gold); box-shadow:0 0 7px rgba(201,163,78,.85); opacity:0; animation:gate-twinkle 4.2s ease-in-out infinite; animation-delay:var(--d,0s); } /* ---------- 居中主文案 ---------- */ .gate__inner{ position:relative; z-index:1; text-align:center; padding:0 26px; transition:opacity .42s ease, transform .42s ease; } .gate__eyebrow{ font-family:var(--latin); font-size:9px; letter-spacing:.44em; text-indent:.44em; color:var(--gold); opacity:.82; } .gate__cta{ margin-top:20px; font-family:var(--serif); font-size:clamp(23px,6.6vw,29px); font-weight:700; letter-spacing:.16em; text-indent:.16em; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.9); animation:gate-breathe 2.8s ease-in-out infinite; } .gate__rule{ display:block; width:46px;height:1px; margin:22px auto 0; background:linear-gradient(90deg,rgba(201,163,78,0),var(--gold),rgba(201,163,78,0)); } .gate__fr{ position:absolute; left:0;right:0; bottom:calc(28px + env(safe-area-inset-bottom)); z-index:1; text-align:center; font-family:var(--latin); font-style:italic; font-size:11.5px; letter-spacing:.02em; color:var(--gray-dim); transition:opacity .4s ease; } /* ---------- 退场 ---------- */ .gate-armed .gate--closing{ opacity:0; transform:scale(1.045); filter:blur(12px); pointer-events:none; } .gate-armed .gate--closing .gate__inner{opacity:0;transform:translateY(-12px)} .gate-armed .gate--closing .gate__fr{opacity:0} .gate-armed .gate--gone{display:none} /* ---------- 封面在场时锁滚动 ---------- */ html.gate-armed:not(.gate-done){overflow:hidden} /* ---------- 关键帧 ---------- */ @keyframes gate-drift{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50% {transform:translate(-50%,-50%) scale(1.07)} } @keyframes gate-ring{ 0% {transform:translate(-50%,-50%) scale(.58);opacity:0} 14% {opacity:.55} 100%{transform:translate(-50%,-50%) scale(1.18);opacity:0} } @keyframes gate-twinkle{ 0%,100%{opacity:0;transform:scale(.4)} 40% {opacity:.9;transform:scale(1)} 70% {opacity:.25;transform:scale(.75)} } @keyframes gate-breathe{ 0%,100%{opacity:.74} 50% {opacity:1} }