/* ===== 赛博朋克设计系统 =====
   共享 CSS 变量、工具类、关键帧动画。
   入口页 (index.html) 和仿真页 (gravsim.html) 共用。
*/

:root {
  /* 背景 */
  --cyber-bg: #050508;
  --cyber-bg-alt: #0a0a18;
  --cyber-panel: #0d0d1a;
  --cyber-panel-alt: #14142c;
  --cyber-border: #1a1a3a;

  /* 霓虹原色 */
  --neon-cyan: #00ffff;
  --neon-magenta: #ff00ff;
  --neon-green: #39ff14;
  --neon-yellow: #ffff00;
  --neon-red: #ff3333;

  /* 发光预设 */
  --glow-cyan-sm: 0 0 4px rgba(0, 255, 255, 0.4);
  --glow-cyan-md: 0 0 8px rgba(0, 255, 255, 0.3), 0 0 16px rgba(0, 255, 255, 0.1);
  --glow-cyan-lg: 0 0 12px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.2);
  --glow-magenta-sm: 0 0 4px rgba(255, 0, 255, 0.4);
  --glow-magenta-md: 0 0 8px rgba(255, 0, 255, 0.3);
  --glow-green-sm: 0 0 4px rgba(57, 255, 20, 0.4);
  --glow-red-sm: 0 0 4px rgba(255, 51, 51, 0.4);

  /* 字体 */
  --font-mono: 'Courier New', Courier, 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --font-display: 'Courier New', monospace;

  /* 语义映射 —— 供 style.css 继承 */
  --accent: var(--neon-cyan);
  --accent-dim: rgba(0, 255, 255, 0.12);
  --accent-glow: rgba(0, 255, 255, 0.25);
  --body1: var(--neon-cyan);
  --body2: var(--neon-magenta);
  --text: #b8e0e0;
  --text-dim: #5a8a8a;
  --danger: var(--neon-red);

  /* 布局（保留原值） */
  --topbar-h: 48px;
  --tabbar-h: 56px;
  --tap: 44px;
}

/* ===== 工具类 ===== */

/* CRT 扫描线 */
.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
}

/* Glitch 动画触发 */
.glitch {
  position: relative;
}
.glitch:hover {
  animation: glitch-text 0.3s ease-in-out;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.glitch:hover::before {
  color: var(--neon-magenta);
  opacity: 0.8;
  animation: glitch-text 0.3s ease-in-out 0.05s reverse;
}
.glitch:hover::after {
  color: var(--neon-cyan);
  opacity: 0.8;
  animation: glitch-text 0.3s ease-in-out 0.1s;
}

/* 霓虹边框面板 */
.neon-border {
  border: 1px solid var(--neon-cyan);
  box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.08), var(--glow-cyan-sm);
}

/* 赛博背景 */
.cyber-bg {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 255, 255, 0.03), transparent 60%),
    var(--cyber-bg);
  color: var(--text);
}

/* 闪烁光标 */
.cursor-blink {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  background: var(--neon-cyan);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

/* 终端面板 */
.terminal-panel {
  background: var(--cyber-panel);
  border: 1px solid var(--cyber-border);
  border-top: 2px solid var(--neon-cyan);
  font-family: var(--font-mono);
}

/* ===== 关键帧 ===== */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes glitch-text {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 1px); }
  40%  { transform: translate(2px, -1px); }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

@keyframes scanlines-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 4px; }
}

@keyframes rgb-shift {
  0%   { clip-path: inset(0 0 98% 0); }
  10%  { clip-path: inset(20% 0 40% 0); }
  20%  { clip-path: inset(60% 0 5% 0); }
  30%  { clip-path: inset(10% 0 70% 0); }
  40%  { clip-path: inset(80% 0 2% 0); }
  50%  { clip-path: inset(0 0 97% 0); }
  100% { clip-path: inset(30% 0 50% 0); }
}

@keyframes flicker {
  0%   { opacity: 0.06; }
  95%  { opacity: 0.06; }
  96%  { opacity: 0.02; }
  97%  { opacity: 0.06; }
  99%  { opacity: 0.03; }
  100% { opacity: 0.06; }
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cyber-bg); }
::-webkit-scrollbar-thumb { background: var(--neon-cyan); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-magenta); }

/* ===== 无障碍 ===== */
@media (max-width: 767px) {
  .scanlines::after { opacity: 0.03 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .scanlines::after,
  .glitch,
  .glitch:hover,
  .cursor-blink,
  .neon-pulse {
    animation: none !important;
  }
  .glitch::before,
  .glitch::after { display: none; }
}