/* 单位实验台 · 导入页样式
 *   风格：沿用 LIBAI 的水蓝治愈风，但压暗成"实验室"的底色。
 *   ⚠ 不用 emoji 当图标、不写游戏化措辞（用户 UI 红线）。
 *   ⚠ 点「进入」后的黑幕扩散动画在这里定义（.gate-curtain）。 */

:root {
  --gate-bg: #0a0e14;
  --gate-ink: #e8f2fa;
  --gate-dim: rgba(232, 242, 250, .58);
  --gate-line: rgba(140, 190, 220, .22);
  --gate-accent: #aee0f8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body.gate-page {
  background: var(--gate-bg);
  color: var(--gate-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 背景微光：两个柔光斑，呼应主页的补光斑偏好 */
  background-image:
    radial-gradient(circle at 22% 26%, rgba(120, 190, 235, .13), transparent 46%),
    radial-gradient(circle at 78% 74%, rgba(150, 205, 240, .10), transparent 44%);
}

.gate {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  padding: 0 28px;
  text-align: center;
  animation: gateIn .9s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes gateIn {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 入场后整页淡出（点进入时用） */
.gate.leaving {
  animation: gateOut .34s cubic-bezier(.55, 0, .9, .35) both;
  pointer-events: none;
}
@keyframes gateOut {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(.985); }
}

.gate-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gate-dim);
}

.gate-title {
  margin: 0 0 20px;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: .08em;
}

.gate-lead {
  margin: 0 0 14px;
  font-size: clamp(15px, 2.6vw, 17px);
  color: var(--gate-ink);
}

.gate-note {
  margin: 0 auto 34px;
  max-width: 400px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--gate-dim);
}

.gate-enter {
  position: relative;
  display: inline-block;
  padding: 14px 40px;
  font-size: 15px;
  font-family: inherit;
  letter-spacing: .12em;
  color: var(--gate-bg);
  background: var(--gate-accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .24s cubic-bezier(.22, .61, .36, 1),
              box-shadow .24s, background .24s;
  box-shadow: 0 6px 22px rgba(120, 190, 235, .26);
}

.gate-enter:hover {
  transform: translateY(-2px);
  background: #c4e9fc;
  box-shadow: 0 10px 30px rgba(120, 190, 235, .40);
}

.gate-enter:active { transform: translateY(0) scale(.985); }

.gate-back {
  display: block;
  margin: 26px auto 0;
  font-size: 13px;
  color: var(--gate-dim);
  text-decoration: none;
  transition: color .2s;
}
.gate-back:hover { color: var(--gate-accent); }

/* ---------- 黑幕：从中间扩散开来 ---------- */
#gateCurtain {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9;
}

#gateCurtain.expand {
  animation: curtainGrow var(--curtain-dur, .78s) cubic-bezier(.36, 0, .3, 1) both;
}
@keyframes curtainGrow {
  0% { width: 0; height: 0; opacity: 1; }
  100% { width: 300vmax; height: 300vmax; opacity: 1; }
}

@media (max-width: 560px) {
  .gate-enter { padding: 13px 32px; font-size: 14.5px; }
}