/*
================================================================================
WHAT:
  Shared login-themed visual styles reused by the waitlist static landing page.
WHY:
  Keep the same atmosphere and interaction language as the game login screen.
================================================================================
*/

@import url("https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@400&family=Ma+Shan+Zheng&display=swap");

html,
body {
  line-height: 1.5;
}

/* --- CSS 变量 --- */
:root {
  --login-ink: #0a0a0a;
  --login-paper: #f0e6d2;
  --login-cinnabar: #b83b3b;
  --login-gold: #d4af37;
  --login-jade: #4a8075;
  /* 增强光晕浓度，使其更明显 */
  --login-glow-color: rgba(200, 235, 255, 0.3);
}

/* --- 登录页面根容器 --- */
.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* 底色：深邃的午夜蓝，增加通透感 */
  background: #05080c;
  color: var(--login-paper);
  user-select: none;
  font-family:
    "LXGW WenKai TC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    cursive;
}

/* --- 背景层容器 --- */
.login-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 0;
  overflow: hidden;
}

/* 1. 核心背景图 */
.bg-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  z-index: 0;
  /*
   * 滤镜说明：
   * 1. invert(1): 反色，白变黑，黑变白
   * 2. brightness(1.5): 提高亮度，让反色后的线条变成耀眼的银光
   * 3. contrast(1.2): 增加对比度，去除灰蒙蒙的感觉
   */
  filter: invert(1) contrast(1.2) hue-rotate(190deg);
  opacity: 0.85;
  background-image: url("/bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  animation: login-panBg 30s ease-in-out infinite alternate;
}

/* 2. 灵气呼吸层 */
.bg-glow-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vmax;
  height: 120vmax;
  z-index: 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    var(--login-glow-color) 0%,
    transparent 65%
  );
  mix-blend-mode: screen;
  animation: login-breatheGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}

/* 灵气爆发状态 */
.bg-glow-layer.burst {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(4);
  transition: all 1.5s ease-in;
}

/* 3. 粒子容器 */
.particle-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* 粒子样式 */
.dust {
  position: absolute;
  top: -10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  animation: login-floatUp linear infinite;
}

/* --- 背景动画 --- */
@keyframes login-panBg {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-10%);
  }
}

@keyframes login-breatheGlow {
  0% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes login-floatUp {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}

/* --- 游戏 Logo --- */
.game-logo {
  position: absolute;
  top: 10%;
  right: 10%;
  writing-mode: vertical-rl;
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 80px;
  color: var(--login-paper);
  text-shadow:
    0 0 10px #000,
    0 0 30px rgba(0, 0, 0, 0.8);
  z-index: 10;
  cursor: default;
  letter-spacing: 15px;
}

.game-logo span {
  display: inline-block;
  transition: transform 0.5s;
}

.game-logo:hover span {
  transform: translateX(-10px);
  color: var(--login-gold);
}

.sub-logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  color: #ddd;
  text-shadow: 0 0 5px #000;
  letter-spacing: 5px;
  padding-right: 10px;
  font-family:
    "LXGW WenKai TC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    cursive;
}

/* --- 登录交互区 --- */
.login-gate-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: rgba(10, 15, 20, 0.75);
  padding: 50px 40px;
  padding-bottom: 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  transition: height 0.3s;
}

/* 登录成功消失动画 */
.login-gate-container.entering {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  opacity: 0;
  transform: translateY(-50%) scale(0.8);
}

/* 金色边角装饰 */
.login-gate-container::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--login-gold);
  border-left: 2px solid var(--login-gold);
}

.login-gate-container::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid var(--login-gold);
  border-right: 2px solid var(--login-gold);
}

.login-gate {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* --- 输入框组 --- */
.input-group {
  position: relative;
  transition: all 0.3s;
}

/* 注册专用字段（确认密码） */
.reg-field {
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: -30px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.login-gate.mode-register .reg-field {
  height: 50px;
  opacity: 1;
  margin-top: 0;
}

/* 水墨风输入框 */
.ink-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #777;
  color: #fff;
  font-size: 18px;
  font-family: inherit;
  letter-spacing: inherit;
  padding: 10px 5px;
  outline: none;
  transition: all 0.3s;
  box-sizing: border-box;
}

.ink-input:focus {
  border-bottom-color: var(--login-gold);
  box-shadow: 0 5px 10px -5px rgba(212, 175, 55, 0.3);
}

.ink-input::placeholder {
  color: #888;
  font-family: "Ma Shan Zheng";
  font-size: 16px;
}

/* 输入框右侧标签 */
.input-label {
  position: absolute;
  right: 0;
  top: 8px;
  font-size: 14px;
  color: #aaa;
  pointer-events: none;
  font-family: "Ma Shan Zheng";
  writing-mode: vertical-rl;
}

/* --- 破印按钮 --- */
.enter-seal-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px auto 0;
  cursor: pointer;
  user-select: none;
}

.enter-seal {
  width: 100%;
  height: 100%;
  border: 1px solid #777;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Ma Shan Zheng";
  font-size: 32px;
  color: #ccc;
  transform: rotate(45deg);
  transition: all 0.3s;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.enter-seal span {
  transform: rotate(-45deg);
  transition:
    color 0.3s,
    opacity 0.3s;
  z-index: 2;
  display: block;
}

/* 按钮填充效果 */
.seal-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: var(--login-cinnabar);
  transform: translate(-50%, -50%) rotate(-45deg) translateY(100%);
  transition: transform 0.05s linear;
  z-index: 0;
  box-shadow: 0 0 30px var(--login-cinnabar);
}

/* 按钮悬停效果 */
.enter-seal-container:hover .enter-seal {
  border-color: var(--login-cinnabar);
  color: #fff;
  box-shadow: 0 0 25px rgba(184, 59, 59, 0.6);
  transform: rotate(45deg) scale(1.05);
}

/* 提示文字 */
.hint-text {
  position: absolute;
  bottom: -40px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #888;
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity 0.3s;
}

.enter-seal-container:hover .hint-text {
  opacity: 1;
}

/* --- 切换模式链接 --- */
.switch-mode-link {
  text-align: center;
  margin-top: 60px;
  font-size: 12px;
  color: #888;
  cursor: pointer;
  transition: color 0.3s;
  letter-spacing: 1px;
}

.switch-mode-link:hover {
  color: var(--login-gold);
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.switch-mode-link span {
  border-bottom: 1px solid #777;
}

/* --- 错误信息 --- */
.error-message {
  text-align: center;
  font-size: 12px;
  color: var(--login-cinnabar);
  letter-spacing: 1px;
  padding: 8px;
  background: rgba(184, 59, 59, 0.1);
  border: 1px solid rgba(184, 59, 59, 0.3);
  border-radius: 4px;
  animation: login-errorFadeIn 0.3s ease-out;
  margin-top: 20px;
}

@keyframes login-errorFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 破印闪白特效 --- */
.break-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
}

.break-effect.active {
  transition: opacity 1.5s ease-in;
  opacity: 1;
}

/* --- 鼠标云雾特效 --- */
.mouse-cloud-container .cloud-puff {
  position: absolute;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(5px);
  animation: dissipate 1.5s forwards ease-out;
  pointer-events: none;
}

@keyframes dissipate {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      scale(2.5);
  }
}