/* ============================================================
   FH-OS v2.1 · Base — 重置、排版、氛围层、降级动效
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow: hidden; /* 翻页由 deck 引擎接管 */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; letter-spacing: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
::selection { background: var(--color-accent); color: #041007; }

/* 焦点可见：2px 描边 + 2px 偏移 */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--color-accent); color: #041007;
  padding: 10px 18px; font-weight: 700; font-size: var(--text-sm);
  transition: top var(--dur-fast) ease-out;
}
.skip-link:focus { top: 12px; }

/* ---------- 氛围层 ---------- */
.atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* 透视网格地平线：持续向后流动，营造「引擎运转中」的前进感 */
.grid-horizon {
  position: absolute; left: -25%; right: -25%; bottom: -12%; height: 58%;
  background:
    linear-gradient(rgba(65, 255, 143, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 255, 143, 0.13) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(420px) rotateX(64deg);
  transform-origin: center top;
  animation: horizon-flow 3.2s linear infinite;
  mask-image: linear-gradient(to bottom, transparent, #000 32%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%);
  opacity: 0.75;
}
@keyframes horizon-flow { to { background-position: 0 54px, 0 0; } }

/* CRT 扫描线 */
.scanlines {
  position: absolute; inset: 0; z-index: 3; opacity: 0.5;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.16) 2px 4px);
}

/* 移动亮扫描束 */
.scanbeam {
  position: absolute; left: 0; right: 0; top: -20%; height: 18%; z-index: 3;
  background: linear-gradient(to bottom, transparent, rgba(65, 255, 143, 0.05) 55%, rgba(65, 255, 143, 0.09) 82%, transparent);
  animation: beam-sweep 7s linear infinite;
}
@keyframes beam-sweep { to { top: 120%; } }

/* 噪点颗粒 */
.noise {
  position: absolute; inset: -40%; z-index: 2; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise-jitter 0.9s steps(3) infinite;
}
@keyframes noise-jitter {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1.5%); }
  66% { transform: translate(1.5%, -2%); }
}

/* 晕影：四角压暗，聚焦中央 */
.vignette {
  position: absolute; inset: 0; z-index: 4;
  background: radial-gradient(ellipse 90% 78% at 50% 42%, transparent 58%, rgba(3, 5, 4, 0.75));
}

/* ---------- 自定义十字光标（仅精细指针） ---------- */
.reticle {
  position: fixed; z-index: 150; left: 0; top: 0; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; pointer-events: none; display: none;
  transition: transform 90ms linear;
}
.reticle i, .reticle::before, .reticle::after {
  content: ''; position: absolute; background: var(--color-accent);
}
.reticle i { left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; box-shadow: 0 0 10px var(--color-accent-glow); }
.reticle::before { left: 50%; top: 0; width: 1px; height: 100%; opacity: 0.55; }
.reticle::after { left: 0; top: 50%; width: 100%; height: 1px; opacity: 0.55; }
@media (pointer: fine) {
  body { cursor: crosshair; }
  a, button, [tabindex] { cursor: crosshair; }
  .reticle { display: block; }
}

/* ---------- 翻页入场编排：3–6 组，错峰 90ms ---------- */
.rise { opacity: 0; transform: translateY(26px); }
.slide.is-active .rise {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.slide.is-active .rise:nth-child(1) { transition-delay: 120ms; }
.slide.is-active .rise:nth-child(2) { transition-delay: 210ms; }
.slide.is-active .rise:nth-child(3) { transition-delay: 300ms; }
.slide.is-active .rise:nth-child(4) { transition-delay: 390ms; }
.slide.is-active .rise:nth-child(5) { transition-delay: 480ms; }
.slide.is-active .rise:nth-child(6) { transition-delay: 570ms; }

/* ---------- 降级：减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .grid-horizon, .scanbeam, .noise { animation: none; }
  .rise { opacity: 1; transform: none; }
  .reticle { display: none; }
  body { cursor: auto; }
}