/* ========================================
   CRT扫描线
   ======================================== */
#crt-scanlines {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 9995;
  animation: scanlineFlicker 0.12s infinite;
}
@keyframes scanlineFlicker {
  0% { opacity: 1; }
  3% { opacity: 0.92; }
  6% { opacity: 1; }
  9% { opacity: 0.95; }
  12% { opacity: 1; }
  50% { opacity: 0.97; }
  53% { opacity: 1; }
  100% { opacity: 1; }
}

/* ========================================
   CRT暗角
   ======================================== */
#crt-vignette {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 45%,
    rgba(0,0,0,0.25) 75%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
  z-index: 9994;
}

/* ========================================
   CRT RGB阴罩（Canvas渲染，这里是CSS备用）
   ======================================== */
#crt-mask {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9993;
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* ========================================
   故障覆盖层
   ======================================== */
#glitch-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9996;
  opacity: 0;
}

/* ========================================
   故障标题效果
   ======================================== */
.glitch-title {
  position: relative;
}
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
}
.glitch-title::before {
  color: #ff0000;
  animation: glitchShift1 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
  opacity: 0.7;
}
.glitch-title::after {
  color: #0000ff;
  animation: glitchShift2 4s infinite;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  opacity: 0.7;
}
@keyframes glitchShift1 {
  0%, 88%, 100% { transform: translate(0); }
  89% { transform: translate(-3px, 1px); }
  91% { transform: translate(3px, -1px); }
  93% { transform: translate(-2px, 0); }
  95% { transform: translate(0); }
}
@keyframes glitchShift2 {
  0%, 88%, 100% { transform: translate(0); }
  90% { transform: translate(3px, -1px); }
  92% { transform: translate(-3px, 1px); }
  94% { transform: translate(2px, 0); }
  96% { transform: translate(0); }
}

/* ========================================
   输入框聚焦时的CRT高亮
   ======================================== */
.form-input:focus {
  box-shadow: 0 0 8px rgba(0,0,128,0.4);
}

/* ========================================
   按钮点击故障效果
   ======================================== */
.enter-btn:active ~ #glitch-overlay,
.glitch-active #glitch-overlay {
  animation: glitchFlash 0.3s ease-out;
}
@keyframes glitchFlash {
  0% { opacity: 0; }
  10% { opacity: 0.8; background: rgba(255,0,0,0.1); }
  20% { opacity: 0.2; }
  30% { opacity: 0.9; background: rgba(0,0,255,0.1); }
  40% { opacity: 0.1; }
  50% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* ========================================
   开机动画（只改透明度和亮度，不动transform，避免抖动）
   ======================================== */
.boot-animation #login-screen {
  animation: crtPowerOn 1.0s ease-out;
  animation-fill-mode: both;
}
@keyframes crtPowerOn {
  0% {
    opacity: 0;
    filter: brightness(6);
  }
  30% {
    opacity: 0.3;
    filter: brightness(4);
  }
  60% {
    opacity: 0.8;
    filter: brightness(2);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

/* ========================================
   通知框打字光标
   ======================================== */
.notification-content::after {
  content: '_';
  animation: cursorBlink 1s infinite;
  color: #000;
}
@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ========================================
   远方炮火暖光：铺在所有建筑【背后】，故障瞬间在地平线方向亮起暖橙渐变、再缓缓熄灭；
   建筑是不透明暗剪影，背后亮光自然勾出轮廓(真正的逆光)，无需逐栋处理、也不存在跟随问题
   ======================================== */
#fire-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;            /* 最下层：黑底之上、所有建筑(z1-4)之下，建筑剪影挡住光形成逆光 */
  opacity: 0;
  /* 光心对齐最远景建筑带(约屏幕31%高度)，范围收窄；光心冷白 #b9c9ce → 红光 #b74f5c → 透明 */
  background: radial-gradient(
    ellipse 70% 30% at var(--gx, 50%) 31%,
    rgba(185,201,206,.5) 0%,
    rgba(185,201,206,.5) 45%,
    rgba(183,79,92,0) 78%
  );
}
/* 两个交替的动画类：靠 JS 每次挂不同的 animation-name 来"全新播放"。
   单靠重复添加同一个 class 在 forwards 填充状态下不可靠，会叠出常亮的光。 */
#fire-glow.flash-a { animation: fireGlowA 1.3s ease-out forwards; }
#fire-glow.flash-b { animation: fireGlowB 1.3s ease-out forwards; }
/* 火光瞬间炸开 → 短暂持续 → 缓缓熄灭（调时长/强弱改这里）。
   两条关键帧内容一致，分开定义只是为了能交替触发。 */
@keyframes fireGlowA {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  35%  { opacity: .85; }
  100% { opacity: 0; }
}
@keyframes fireGlowB {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  35%  { opacity: .85; }
  100% { opacity: 0; }
}

/* ===== Boot Gate (first-paint loader) ===== */
#boot-gate{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:100000;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s ease,visibility 0s linear 0s;}
#boot-gate.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s;}
body.boot-hold #login-screen,body.boot-hold #login-screen *,body.boot-hold #crt-scanlines{animation-play-state:paused !important;}