/* ==========================================================================
   入口环境检测 · 过渡动画（Entry Gate）
   参考：正在准备访问 / 设备环境 / 网络环境 / 访问策略 → 准备完成 → 点击进入
   ========================================================================== */
.gate{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% -10%,#F3EFFF 0%,#F7F5FE 38%,#F4F2FB 100%);
  overflow:hidden;
  transition:opacity .55s var(--ease),visibility .55s;
}
.gate.leaving{opacity:0;visibility:hidden;pointer-events:none}
.gate__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.gate__glow{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,252,.20) 0%,rgba(124,92,252,0) 62%);
  filter:blur(6px);animation:orbFloat 9s ease-in-out infinite;
}
.gate__glow.b{width:420px;height:420px;top:auto;bottom:-120px;right:-120px;
  background:radial-gradient(circle,rgba(90,150,255,.18) 0%,rgba(90,150,255,0) 62%);
  animation-delay:-3.5s}
@keyframes orbFloat{0%,100%{transform:translate3d(-16%,-8%,0) scale(1)}50%{transform:translate3d(12%,10%,0) scale(1.1)}}

.gate__inner{
  position:relative;z-index:2;width:100%;max-width:352px;padding:0 22px;
  display:flex;flex-direction:column;align-items:center;
}

/* 品牌标识 */
.gate__brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:26px;
  animation:fadeUp .7s var(--ease-out) both}
.gate__logo{
  position:relative;width:66px;height:66px;border-radius:22px;
  background:linear-gradient(140deg,var(--brand-2),var(--brand) 55%,var(--brand-deep));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 18px 40px rgba(124,92,252,.42);
  animation:logoIn .9s var(--spring) both;
}
.gate__logo svg{width:32px;height:32px}
@keyframes logoIn{0%{opacity:0;transform:scale(.6) rotate(-12deg)}100%{opacity:1;transform:none}}
.gate__logo::before,.gate__logo::after{
  content:"";position:absolute;inset:-6px;border-radius:28px;
  border:1.5px solid rgba(124,92,252,.35);animation:pulseRing 2.6s var(--ease-out) infinite;
}
.gate__logo::after{animation-delay:1.3s}
@keyframes pulseRing{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.gate__brandname{font-size:19px;font-weight:700;letter-spacing:3px;color:var(--t1)}
.gate__brandsub{font-size:12px;color:var(--t3);letter-spacing:1.2px;margin-top:-4px}

/* 检测卡 */
.gate__card{
  width:100%;background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:26px;padding:26px 22px 22px;
  box-shadow:0 20px 60px rgba(38,28,90,.13),0 2px 6px rgba(38,28,90,.05);
  border:1px solid rgba(255,255,255,.9);
  animation:cardIn .8s var(--ease-out) .1s both;
  transition:transform .5s var(--ease-out),opacity .4s;
}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.gate.done .gate__card{transform:scale(.985)}
.gate__title{font-size:18px;font-weight:700;text-align:center;letter-spacing:.6px}
.gate__desc{
  font-size:12.5px;color:var(--t2);text-align:center;margin-top:8px;line-height:1.6;
}

.gate__steps{margin:20px 0 4px;display:flex;flex-direction:column;gap:2px}
.gate__step{
  display:flex;align-items:center;gap:11px;
  height:40px;opacity:0;transform:translateX(-8px);
  transition:opacity .42s var(--ease),transform .42s var(--ease-out);
}
.gate__step.in{opacity:1;transform:none}
.gate__dot{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;position:relative;
  display:grid;place-items:center;
  background:#F1F0F7;color:var(--t3);font-size:11px;font-weight:700;
  transition:all .34s var(--spring);
}
.gate__step.active .gate__dot{background:var(--brand-soft);color:var(--brand-deep)}
.gate__step.done .gate__dot{
  background:var(--ok);color:#fff;transform:scale(1.04);
  box-shadow:0 4px 12px rgba(18,185,129,.35);
}
.gate__dot svg{width:12px;height:12px;opacity:0;transform:scale(.4);transition:all .3s var(--spring)}
.gate__step.done .gate__dot svg{opacity:1;transform:scale(1)}
.gate__step.done .gate__dot .gate__num,
.gate__step.done .gate__dot .gate__spin{display:none}
.gate__spin{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--brand);border-right-color:var(--brand);
  animation:spin .72s linear infinite;opacity:0;
}
.gate__step.active:not(.done) .gate__spin{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.gate__label{flex:1;font-size:13.5px;color:var(--t2);transition:color .3s}
.gate__step.active .gate__label{color:var(--t1);font-weight:600}
.gate__step.done .gate__label{color:var(--t1)}
.gate__meta{font-size:11px;color:var(--t4);font-variant-numeric:tabular-nums}

/* 进度条 */
.gate__bar{
  margin-top:18px;height:6px;border-radius:99px;background:#EDEBF5;overflow:hidden;position:relative;
}
.gate__fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand),var(--brand-deep));
  transition:width .5s var(--ease-out);
  position:relative;
}
.gate__fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:fillSheen 1.5s linear infinite;
}
@keyframes fillSheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.gate__status{
  margin-top:10px;text-align:center;font-size:11.5px;color:var(--t3);
  font-variant-numeric:tabular-nums;min-height:17px;
}
.gate__status.ok{color:var(--ok);font-weight:600}

/* 进入按钮 */
.gate__enter{
  width:100%;margin-top:16px;height:50px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;font-weight:600;letter-spacing:1px;color:#fff;
  background:linear-gradient(135deg,var(--brand-2),var(--brand) 45%,var(--brand-deep));
  box-shadow:0 12px 30px rgba(124,92,252,.38);
  opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:all .5s var(--spring);
  position:relative;overflow:hidden;
}
.gate__enter.show{opacity:1;transform:none;pointer-events:auto}
.gate__enter:active{transform:scale(.97)}
.gate__enter:focus{outline:none}
.gate__enter:focus-visible{outline:none;box-shadow:0 12px 30px rgba(124,92,252,.38),0 0 0 4px rgba(124,92,252,.22)}
.gate__enter::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-130%);animation:sheen 2.8s var(--ease) infinite;
}
.gate__hint{
  margin-top:14px;text-align:center;font-size:11px;color:var(--t4);letter-spacing:.3px;
  animation:fadeUp .6s var(--ease-out) .5s both;
}

/* 安全提示小锁 */
.gate__secure{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:11px;color:var(--t3);
  animation:fadeUp .6s var(--ease-out) .4s both;
}
.gate__secure svg{width:12px;height:12px;color:var(--ok)}

/* 拒绝/失败态 */
.gate__card.fail .gate__title{color:var(--danger)}
.gate__card.fail .gate__fill{background:linear-gradient(90deg,#FCA5A5,var(--danger))}

@media (max-width:360px){
  .gate__card{padding:22px 18px 18px;border-radius:22px}
  .gate__title{font-size:17px}
}