/* ==================== 登录页样式（北京恒石道路科技集团，2026-09-01 起作为统一登录样式） ====================
   素材来源：桌面「新建文件夹 (3)/logo.html」，选择器全部限定在 #access-gate 内，避免污染系统其它部分；
   body 级样式(背景/字体/溢出)改为 .access-gate 自身；保留全部动画。 */

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
  background:
    radial-gradient(circle at 12% 15%, rgba(0,110,255,0.36), transparent 32%),
    radial-gradient(circle at 88% 15%, rgba(0,150,255,0.30), transparent 34%),
    radial-gradient(circle at 50% 90%, rgba(0,120,220,0.22), transparent 40%),
    linear-gradient(180deg, #050d1c 0%, #071228 45%, #0a1f3a 100%);
}

.access-gate[hidden] { display: none !important; }
.access-gate [hidden] { display: none !important; }

.access-gate .bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: transform 0.18s ease-out;
}

/* 全局巨型背景Logo：减少模糊，加入呼吸闪烁 */
.access-gate .global-bg-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.access-gate .global-bg-logo img {
  width: 75vh;
  height: 75vh;
  object-fit: contain;
  opacity: 0.11;
  filter: blur(1px) drop-shadow(0 0 60px rgba(0,140,255,0.25));
  animation: logoBgPulse 4s ease-in-out infinite;
}

@keyframes logoBgPulse {
  0%, 100% {
    opacity: 0.08;
    filter: blur(1px) drop-shadow(0 0 60px rgba(0,140,255,0.25));
  }
  50% {
    opacity: 0.14;
    filter: blur(1px) drop-shadow(0 0 80px rgba(0,140,255,0.35));
  }
}

.access-gate .ring-glow {
  position: absolute;
  width: 800px;
  height: 800px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0,130,255,0.32);
  box-shadow:
    0 0 60px rgba(0,130,255,0.16),
    inset 0 0 60px rgba(0,130,255,0.16);
  animation: ringRotate 22s linear infinite;
}

.access-gate .ring-glow::before,
.access-gate .ring-glow::after {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px solid rgba(0,190,255,0.18);
  animation: ringRotate 16s linear infinite reverse;
}

.access-gate .ring-glow::after {
  inset: -80px;
  border-color: rgba(80,120,255,0.12);
  animation-duration: 30s;
}

@keyframes ringRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.access-gate .side-light {
  position: absolute;
  width: 70vw;
  height: 140vh;
  top: -20vh;
  background: radial-gradient(circle at center, rgba(0,150,255,0.14), transparent 45%);
  filter: blur(60px);
  animation: sidePulse 9s ease-in-out infinite;
}

.access-gate .side-light.left { left: -45vw; }
.access-gate .side-light.right { right: -45vw; animation-delay: -4.5s; }

@keyframes sidePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.65; }
}

.access-gate .road-grid {
  position: absolute;
  bottom: -350%;
  left: 50%;
  width: 320vw;
  height: 320vw;
  transform: translateX(-50%) perspective(520px) rotateX(68deg);
  background-image:
    linear-gradient(rgba(0,170,230,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,170,230,0.14) 1px, transparent 1px);
  background-size: 84px 84px;
  animation: roadFlow 12s linear infinite;
}

@keyframes roadFlow {
  0% { transform: translateX(-50%) perspective(520px) rotateX(68deg) translateY(0); }
  100% { transform: translateX(-50%) perspective(520px) rotateX(68deg) translateY(84px); }
}

.access-gate .road-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 240px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0,200,255,0.6),
    rgba(0,200,255,0.12),
    transparent
  );
  filter: blur(1px);
  animation: roadLinePulse 2.6s ease-in-out infinite;
}

@keyframes roadLinePulse {
  0%, 100% { opacity: 0.3; height: 240px; }
  50% { opacity: 1; height: 360px; }
}

.access-gate .data-line {
  position: absolute;
  width: 180%;
  height: 1px;
  left: -40%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,150,255,0.45),
    rgba(0,150,255,0.1),
    transparent
  );
  animation: dataSweep 7.2s linear infinite;
}

.access-gate .data-line:nth-child(1) { top: 22%; animation-delay: 0s; }
.access-gate .data-line:nth-child(2) { top: 46%; animation-delay: -2.2s; }
.access-gate .data-line:nth-child(3) { top: 68%; animation-delay: -4.4s; }

@keyframes dataSweep {
  0% { transform: translateX(-40%); opacity: 0.2; }
  50% { opacity: 1; }
  100% { transform: translateX(40%); opacity: 0.2; }
}

.access-gate .particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.42);
  filter: blur(1px);
  animation: floatParticle 11s ease-in-out infinite;
}

.access-gate .particle.small { width: 5px; height: 5px; }
.access-gate .particle.medium {
  width: 8px;
  height: 8px;
  background: rgba(0,190,255,0.52);
}

.access-gate .particle:nth-child(1) { left: 4%; top: 12%; animation-delay: 0s; }
.access-gate .particle:nth-child(2) { left: 18%; top: 82%; animation-delay: -1.2s; }
.access-gate .particle:nth-child(3) { left: 48%; top: 8%; animation-delay: -2.4s; }
.access-gate .particle:nth-child(4) { left: 82%; top: 78%; animation-delay: -4.2s; }
.access-gate .particle:nth-child(5) { left: 92%; top: 14%; animation-delay: -6s; }
.access-gate .particle:nth-child(6) { left: 8%; top: 48%; animation-delay: -8s; }

@keyframes floatParticle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.14;
  }
  50% {
    transform: translateY(-90px) translateX(30px);
    opacity: 0.7;
  }
}

.access-gate .login-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-gate .login-card {
  position: relative;
  width: 520px;
  padding: 40px 36px 32px;
  background: rgba(8,18,40,0.88);
  border: 1px solid rgba(0,160,255,0.28);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 50px rgba(0,130,255,0.26),
    inset 0 0 0 1px rgba(255,255,255,0.02);
  animation: cardFadeIn 0.45s ease-out forwards;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.access-gate .login-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,180,255,0.5);
  box-shadow:
    0 10px 60px rgba(0,130,255,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

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

.access-gate .card-top-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 60%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.8), transparent);
}

.access-gate .logo-block {
  text-align: center;
  margin-bottom: 24px;
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
}

.access-gate .logo-img-wrap {
  width: 100px;
  height: 100px;
  animation: logoFloat 2.5s ease-in-out infinite 1.0s,
             logoSmallPulse 4s ease-in-out infinite 0.5s;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.access-gate .logo-block:hover .logo-img-wrap {
  transform: scale(1.08);
  filter: drop-shadow(0 0 12px rgba(0,190,255,0.55));
}

.access-gate .logo-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes logoSmallPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0,190,255,0.35)); }
  50% { filter: drop-shadow(0 0 18px rgba(0,190,255,0.75)); }
}

.access-gate .logo-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,190,255,0.8);
  opacity: 0;
}

.access-gate .logo-particle:nth-child(1) { animation: particleToLogo 1.2s ease-out forwards 0.05s; --tx: -90px; --ty: -90px; --tz: -60px; }
.access-gate .logo-particle:nth-child(2) { animation: particleToLogo 1.2s ease-out forwards 0s; --tx: 90px; --ty: -70px; --tz: -50px; }
.access-gate .logo-particle:nth-child(3) { animation: particleToLogo 1.2s ease-out forwards 0.1s; --tx: 110px; --ty: 80px; --tz: -70px; }
.access-gate .logo-particle:nth-child(4) { animation: particleToLogo 1.2s ease-out forwards 0.06s; --tx: -100px; --ty: 90px; --tz: -60px; }
.access-gate .logo-particle:nth-child(5) { animation: particleToLogo 1.2s ease-out forwards 0s; --tx: 120px; --ty: -60px; --tz: -40px; }
.access-gate .logo-particle:nth-child(6) { animation: particleToLogo 1.2s ease-out forwards 0.08s; --tx: -130px; --ty: 70px; --tz: -80px; }
.access-gate .logo-particle:nth-child(7) { animation: particleToLogo 1.2s ease-out forwards 0.03s; --tx: 80px; --ty: 100px; --tz: -60px; }
.access-gate .logo-particle:nth-child(8) { animation: particleToLogo 1.2s ease-out forwards 0.12s; --tx: -70px; --ty: -110px; --tz: -50px; }

@keyframes particleToLogo {
  0% { transform: translate3d(var(--tx), var(--ty), var(--tz)) scale(0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate3d(0, 0, calc(var(--tz) + 30px)) scale(1); opacity: 0; }
}

.access-gate .logo-rotate-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(0,190,255,0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  animation: logoRingExpand 1.0s ease-out forwards 0.2s;
}

@keyframes logoRingExpand {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4) rotate(180deg); opacity: 0; }
}

.access-gate .company-name {
  font-size: 25px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1.8px;
  text-align: center;
  opacity: 0;
  animation: textFadeIn 0.6s ease-out forwards 1.2s;
}

.access-gate .company-en {
  font-size: 11px;
  color: rgba(180,220,255,0.75);
  margin-top: 8px;
  letter-spacing: 0.5px;
  text-align: center;
  opacity: 0;
  animation: textFadeIn 0.6s ease-out forwards 1.35s;
}

.access-gate .tagline {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  opacity: 0;
  animation: textFadeIn 0.6s ease-out forwards 1.5s;
}

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

.access-gate .form-group {
  margin-bottom: 22px;
  opacity: 0;
  animation: textFadeIn 0.6s ease-out forwards 1.7s;
  position: relative;
}

.access-gate .form-group input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,160,255,0.24);
  border-radius: 9px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: 0.25s;
}

.access-gate .form-group input:focus {
  border-color: #00c8ff;
  box-shadow:
    0 0 0 2px rgba(0,200,255,0.08),
    0 0 18px rgba(0,200,255,0.18);
  background: rgba(255,255,255,0.08);
}

.access-gate .form-group input::placeholder {
  color: rgba(255,255,255,0.35);
}

.access-gate .input-pulse {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 9px;
  border: 1px solid #00c8ff;
  opacity: 0;
}

.access-gate .form-group input:focus ~ .input-pulse {
  animation: pulseRing 1s ease-out forwards;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* 登录/注册按钮（gate-submit）复用素材渐变按钮；disabled 态保持可用 */
.access-gate .login-btn {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(90deg, #0d6efd, #00b4ff, #0d6efd);
  background-size: 200% 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  animation: textFadeIn 0.6s ease-out forwards, btnGradient 5s linear infinite;
  animation-delay: 1.9s;
  transition: transform 0.15s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.access-gate .login-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: translate(-50%, -50%);
}

.access-gate .login-btn:active::after {
  animation: btnRipple 0.5s ease-out forwards;
}

@keyframes btnRipple {
  0% { width: 0; height: 0; opacity: 0.8; }
  100% { width: 300px; height: 300px; opacity: 0; }
}

@keyframes btnGradient {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.access-gate .login-btn:hover {
  box-shadow: 0 0 22px rgba(0,180,255,0.45);
  background-size: 300% 100%;
}

.access-gate .login-btn:active { transform: scale(0.97); }

.access-gate .footer-tip {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  opacity: 0;
  animation: textFadeIn 0.6s ease-out forwards 2.1s;
}

/* 错误提示（登录/注册失败） */
.access-gate .gate-err {
  color: #f87171;
  font-size: 12px;
  min-height: 16px;
  text-align: center;
  margin: -6px 0 10px;
  opacity: 0;
  animation: textFadeIn 0.6s ease-out forwards 1.8s;
}

/* 登录/注册切换链接 */
.access-gate .gate-switch { margin-top: 14px; }
.access-gate .gate-switch a {
  color: #00b4ff;
  cursor: pointer;
  text-decoration: none;
  margin-left: 4px;
}
.access-gate .gate-switch a:hover { text-decoration: underline; }

@media (max-width: 580px) {
  .access-gate .login-card {
    width: 92%;
    padding: 30px 22px 24px;
  }

  .access-gate .global-bg-logo img {
    width: 90vh;
    height: 90vh;
    opacity: 0.06;
  }

  .access-gate .side-light { display: none; }

  .access-gate .ring-glow {
    width: 420px;
    height: 420px;
  }

  .access-gate .logo-block { height: 110px; }
  .access-gate .logo-img-wrap { width: 90px; height: 90px; }
  .access-gate .company-name { font-size: 22px; }
}