.login-bg-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #08090a;
  transition: opacity 0.5s ease;
}

/* 全屏登录：沿用 Linear 径向，线性渐变压暗（营销页 #d0d6e0 全屏会过白） */
.login-bg-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      52.53% 57.5% at 50% 100%,
      rgba(8, 9, 10, 0) 0%,
      rgba(8, 9, 10, 0.72) 100%
    ),
    linear-gradient(
      180deg,
      #08090a 0%,
      #08090a 70%,
      #101318 84%,
      #181d24 93%,
      #242a33 100%
    );
  pointer-events: none;
}

.login-bg-root::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0) 88%
  );
  pointer-events: none;
}

html.login-page,
body.login-page {
  background: #08090a;
  min-height: 100%;
}

#login-bg-sky {
  display: none !important;
}

.login-bg-root--backdrop {
  z-index: 0;
}

body.login-page--ready #app {
  position: relative;
  z-index: 2;
}

.login-bg-root.fade-out {
  opacity: 0;
}

.login-bg-root.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.login-bg-layer {
  position: absolute;
  inset: 0;
  background: #080808 center/cover no-repeat;
  z-index: 0;
}

.login-bg-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

.login-bg-sky .login-galaxy-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.login-bg-layer--solid {
  background: #08090a;
}

.login-bg-layer--enter {
  animation: login-bg-layer-fade-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.login-bg-layer--blur::before {
  content: '';
  position: absolute;
  inset: -40px;
  background-image: var(--login-bg-image);
  background-size: cover;
  background-position: center;
  filter: blur(var(--login-blur-px, 28px));
  transform: scale(1.08);
}

.login-bg-blur__img--fixed,
.login-bg-blur__dim--fixed {
  position: fixed;
  pointer-events: none;
}

.login-bg-blur__img--fixed {
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  transform: scale(1.08);
  display: block;
  z-index: 0;
}

.login-bg-blur__dim--fixed {
  inset: 0;
  z-index: 1;
}

.login-bg-image__img--fixed,
.login-bg-image__dim--fixed {
  position: fixed;
  pointer-events: none;
}

.login-bg-image__img--fixed {
  inset: -32px;
  width: calc(100% + 64px);
  height: calc(100% + 64px);
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  --login-image-blur: 24px;
  --login-image-scale: 1.06;
  --login-image-reveal-ms: 900ms;
  filter: blur(var(--login-image-blur));
  transform: scale(var(--login-image-scale));
  transform-origin: center center;
  will-change: filter, transform;
  transition:
    filter var(--login-image-reveal-ms) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--login-image-reveal-ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.login-bg-image__img--revealed {
  --login-image-blur: 0px;
  --login-image-scale: 1;
}

.login-bg-image__dim--fixed {
  inset: 0;
  z-index: 1;
  --login-image-overlay: 0.18;
  --login-image-overlay-final: 0;
  --login-image-reveal-ms: 900ms;
  background: rgba(0, 0, 0, var(--login-image-overlay));
  transition: background var(--login-image-reveal-ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.login-bg-image__dim--revealed {
  background: rgba(0, 0, 0, var(--login-image-overlay-final));
}

.login-bg-layer--blur-v2 {
  background: transparent !important;
}

.login-bg-layer--blur-v2 .login-bg-blur__img {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform, filter;
  display: block;
}

.login-bg-layer--blur-v2 .login-bg-blur__dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-bg-layer--blur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--login-overlay-opacity, 0.35));
}

.login-bg-layer--css-dim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--login-overlay-opacity, 0.25));
  pointer-events: none;
}

.login-bg-layer--css {
  background: #08090a;
}

.login-bg-tenant {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.login-bg-tenant--top-left {
  top: clamp(20px, 4vh, 36px);
  left: clamp(24px, 5vw, 48px);
}

.login-bg-tenant__logo {
  display: block;
  height: clamp(28px, 4.5vh, 44px);
  width: auto;
  max-width: min(42vw, 280px);
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}

.login-bg-brand--fade-out {
  transition: opacity 0.55s ease;
  opacity: 0;
}

.login-bg-brand {
  position: absolute;
  inset: 0;
  z-index: 2;
  --brand-inset-left: clamp(40px, 5vw, 72px);
  --brand-logo-splash-w: min(36vw, 360px);
  --brand-logo-splash-h: min(26vw, 260px);
  --brand-logo-ready-w: min(18vw, 180px);
  --brand-logo-ready-h: min(13vw, 130px);
  --brand-ready-scale: 1;
  --brand-tagline-gap: clamp(160px, 14vw, 240px);
  --brand-tagline-size: clamp(36px, 4.5vw, 60px);
  --brand-settle-duration: 2.5s;
  --brand-tagline-duration: 1.1s;
  --brand-mark-final-x: calc(clamp(40px, 5vw, 72px) + min(9vw, 90px));
  --brand-tagline-left: calc(clamp(40px, 5vw, 72px) + min(18vw, 180px) + clamp(160px, 14vw, 240px));
}

.login-bg-brand__stage {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 42% 45%;
}

.login-bg-brand__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform, filter;
  backface-visibility: hidden;
}

.login-bg-brand--loading .login-bg-brand__mark {
  width: var(--brand-logo-splash-w);
  height: var(--brand-logo-splash-h);
  transform: translate(-50%, -50%);
}

.login-bg-brand__logo {
  position: relative;
  z-index: 2;
  width: var(--brand-logo-splash-w);
  height: var(--brand-logo-splash-h);
  object-fit: contain;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.login-bg-brand--loading .login-bg-brand__logo {
  animation: login-boot-logo-breathe 3.2s ease-in-out infinite;
}

.login-bg-brand--settling .login-bg-brand__logo {
  animation: none;
}

.login-bg-brand--settling .login-bg-brand__mark {
  width: var(--brand-logo-splash-w);
  height: var(--brand-logo-splash-h);
  animation: login-boot-brand-settle var(--brand-settle-duration) cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* 左移结束即最终位置：与 keyframe 100% 完全一致，ready 只加强立体滤镜 */
.login-bg-brand--ready .login-bg-brand__mark {
  width: var(--brand-logo-splash-w);
  height: var(--brand-logo-splash-h);
  animation: none;
  transform: translate(calc(-50vw + var(--brand-mark-final-x)), -50%)
    scale(0.5) rotateY(-11deg) rotateX(4deg);
  transition: filter 0.55s cubic-bezier(0.19, 1, 0.22, 1);
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.62))
    drop-shadow(0 22px 36px rgba(0, 0, 0, 0.42))
    drop-shadow(-4px 0 12px rgba(255, 255, 255, 0.16));
}

.login-bg-brand--ready .login-bg-brand__logo {
  width: var(--brand-logo-splash-w);
  height: var(--brand-logo-splash-h);
  transition: filter 0.55s cubic-bezier(0.19, 1, 0.22, 1);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.48))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.82))
    drop-shadow(0 16px 32px rgba(0, 0, 0, 0.55));
}

.login-bg-brand--loading .login-bg-brand__glow,
.login-bg-brand--settling .login-bg-brand__glow {
  display: block;
}

.login-bg-brand--ready .login-bg-brand__glow,
.login-bg-brand--settling .login-bg-brand__glow {
  animation: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.login-bg-brand__glow {
  position: absolute;
  width: calc(var(--brand-logo-splash-w) * 1.08);
  height: calc(var(--brand-logo-splash-h) * 1.12);
  border-radius: 50%;
  opacity: 0.42;
  animation: login-boot-glow-shift 3.2s ease-in-out infinite;
  pointer-events: none;
}

.login-bg-brand__tagline {
  position: absolute;
  left: var(--brand-tagline-left);
  top: 50%;
  margin: 0;
  font-size: var(--brand-tagline-size);
  font-weight: 300;
  letter-spacing: 0.14em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%) translateX(32px) rotateY(14deg) scale(0.92);
  transform-style: preserve-3d;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.48),
    0 2px 0 rgba(190, 190, 200, 0.28),
    0 5px 8px rgba(0, 0, 0, 0.88),
    0 12px 26px rgba(0, 0, 0, 0.68),
    -2px 0 4px rgba(255, 255, 255, 0.14);
}

.login-bg-brand--ready .login-bg-brand__tagline {
  animation: login-boot-tagline-3d-in var(--brand-tagline-duration) cubic-bezier(0.19, 1, 0.22, 1) 0.08s forwards;
}

.login-bg-lottie {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.login-bg-lottie svg,
.login-bg-lottie canvas {
  width: 100% !important;
  height: 100% !important;
}

@keyframes login-bg-layer-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes login-boot-glow-shift {
  0%, 100% {
    background: radial-gradient(circle, rgba(90, 170, 255, 0.35) 0%, rgba(90, 170, 255, 0) 70%);
    transform: scale(0.92);
  }
  50% {
    background: radial-gradient(circle, rgba(255, 190, 120, 0.42) 0%, rgba(255, 190, 120, 0) 72%);
    transform: scale(1.08);
  }
}

@keyframes login-boot-logo-breathe {
  0%, 100% {
    transform: scale(0.96) rotateY(0deg);
    opacity: 0.88;
    filter: drop-shadow(0 0 24px rgba(100, 180, 255, 0.65)) brightness(0.95);
  }
  33% {
    transform: scale(1.04) rotateY(2deg);
    opacity: 1;
    filter: drop-shadow(0 0 32px rgba(255, 200, 110, 0.7)) brightness(1.12);
  }
  66% {
    transform: scale(1.06) rotateY(-2deg);
    opacity: 1;
    filter: drop-shadow(0 0 36px rgba(190, 150, 255, 0.65)) brightness(1.08);
  }
}

@keyframes login-boot-brand-settle {
  0% {
    transform: translate(-50%, -50%) scale(1.08) rotateY(0deg) rotateX(0deg);
    filter: drop-shadow(0 0 32px rgba(100, 180, 255, 0.55)) brightness(1.06);
  }
  100% {
    transform: translate(calc(-50vw + var(--brand-mark-final-x)), -50%)
      scale(0.5) rotateY(-11deg) rotateX(4deg);
    filter:
      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55))
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.62))
      drop-shadow(0 22px 36px rgba(0, 0, 0, 0.42))
      drop-shadow(-4px 0 12px rgba(255, 255, 255, 0.16));
  }
}

@keyframes login-boot-tagline-3d-in {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(36px) rotateY(14deg) scale(0.9);
    filter: blur(3px);
  }
  60% {
    opacity: 0.92;
    transform: translateY(-50%) translateX(6px) rotateY(3deg) scale(0.98);
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0) rotateY(0deg) scale(1);
    filter: blur(0);
  }
}

/* Top 极简马标：保留微微光晕，弱化 3D */
.login-bg-brand--simple .login-bg-brand__glow {
  display: block;
  opacity: 0.32;
  animation: login-boot-glow-shift-soft 3.6s ease-in-out infinite;
}

.login-bg-brand--simple.login-bg-brand--settling .login-bg-brand__glow,
.login-bg-brand--simple.login-bg-brand--ready .login-bg-brand__glow {
  animation: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.login-bg-brand--simple.login-bg-brand--loading .login-bg-brand__logo {
  animation: login-boot-logo-simple-pulse 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(180, 200, 255, 0.35)) drop-shadow(0 0 48px rgba(255, 220, 180, 0.18));
}

.login-bg-brand--simple .login-bg-brand__tagline {
  font-weight: 700;
  font-family: "PingFang SC", "Heiti SC", "STHeiti", "Microsoft YaHei", "SimHei", -apple-system, sans-serif;
  letter-spacing: 0.12em;
}

.login-bg-brand--simple.login-bg-brand--settling .login-bg-brand__mark {
  animation: login-boot-brand-settle-simple var(--brand-settle-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.login-bg-brand--simple.login-bg-brand--ready .login-bg-brand__mark {
  transform: translate(calc(-50vw + var(--brand-mark-final-x)), -50%) scale(var(--brand-mark-final-scale, 0.42));
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}

.login-bg-brand--simple.login-bg-brand--ready .login-bg-brand__logo {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.65));
}

.login-bg-brand--simple.login-bg-brand--ready .login-bg-brand__tagline {
  animation: login-boot-tagline-fade-in var(--brand-tagline-duration) ease 0.06s forwards;
}

@keyframes login-boot-logo-simple-pulse {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.9;
    filter: drop-shadow(0 0 22px rgba(160, 190, 255, 0.32)) drop-shadow(0 0 40px rgba(255, 210, 160, 0.14));
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
    filter: drop-shadow(0 0 34px rgba(200, 220, 255, 0.42)) drop-shadow(0 0 56px rgba(255, 200, 140, 0.22));
  }
}

@keyframes login-boot-glow-shift-soft {
  0%, 100% {
    background: radial-gradient(circle, rgba(120, 170, 255, 0.28) 0%, rgba(120, 170, 255, 0) 72%);
    transform: scale(0.94);
  }
  50% {
    background: radial-gradient(circle, rgba(255, 210, 150, 0.26) 0%, rgba(255, 210, 150, 0) 74%);
    transform: scale(1.06);
  }
}

@keyframes login-boot-brand-settle-simple {
  0% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 0.95;
  }
  100% {
    transform: translate(calc(-50vw + var(--brand-mark-final-x)), -50%) scale(var(--brand-mark-final-scale, 0.42));
    opacity: 1;
  }
}

@keyframes login-boot-tagline-fade-in {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* linear.app 全屏登录底（径向来自 Frame_background，线性段已压暗） */
.login-bg-layer--css[data-effect="linear-login"] {
  background: #08090a;
  overflow: hidden;
}

.login-bg-layer--css[data-effect="linear-login"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      52.53% 57.5% at 50% 100%,
      rgba(8, 9, 10, 0) 0%,
      rgba(8, 9, 10, 0.72) 100%
    ),
    linear-gradient(
      180deg,
      #08090a 0%,
      #08090a 70%,
      #101318 84%,
      #181d24 93%,
      #242a33 100%
    );
}

.login-bg-layer--css[data-effect="linear-login"]::after {
  display: none;
}