/* ============================================================
   A.C.S.S — Skin 01 "ENDFIELD" 终末地暗色仪器风
   单一光源（地平线）· 无弹性缓动 · steps() 硬切 · 颗粒压顶
   ============================================================ */

:root {
  --bg: #070605;
  --ink: #e8e0d0;
  --inkBright: #f4ecda;
  --dim: #746b5c;
  --gold: #c9a15f;
  --goldDim: rgba(201, 161, 95, 0.38);
  --blue: #3aa4da;
  --orange: #b8551f;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --disp: "Rajdhani", "IBM Plex Mono", sans-serif;
  --zhFont: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 背景层级 ---------- */

#bgCanvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}

#vignette {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 55%, transparent 55%, rgba(0, 0, 0, 0.52));
}

#grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: screen;
  opacity: 0.055;
  animation: grainShift 0.5s steps(1) infinite;
}

@keyframes grainShift {
  0%   { background-position: 0 0; }
  25%  { background-position: -42px 28px; }
  50%  { background-position: 26px -18px; }
  75%  { background-position: -24px -36px; }
  100% { background-position: 34px 14px; }
}

#scanlines {
  position: fixed; inset: 0; z-index: 41; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
  opacity: 0.14;
}

/* ---------- 主页 ---------- */

#home { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
body.homeReady #home { pointer-events: auto; }

[data-reveal] { opacity: 0; }
[data-reveal].on { opacity: 1; transition: opacity 0.45s ease; }

/* 报头 */

#masthead {
  position: absolute; left: 0; right: 0; top: 23vh;
  text-align: center;
}

#mastBadge {
  width: 46px; height: 46px; display: block;
  margin: 0 auto 20px; color: var(--ink);
  opacity: 0;
}
#mastBadge.on { opacity: 0.92; transition: opacity 0.45s ease; }
#mastBadge svg { width: 100%; height: 100%; display: block; }

#mastLine {
  font-size: 12px; letter-spacing: 0.34em; color: var(--dim);
  white-space: nowrap;
}

#mastRule {
  width: 170px; height: 1px; margin: 15px auto;
  background: var(--gold);
  transform: scaleX(0);
}
#mastRule.on {
  transform: scaleX(1);
  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(0.7, 0, 0.25, 1);
}

#mastTitle {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 46px);
  letter-spacing: 0.58em;
  padding-left: 0.58em;
  color: var(--inkBright);
}

/* 导航入口 */

#menu { position: absolute; inset: 0; }

.entry {
  position: absolute;
  display: flex; gap: 14px;
  text-decoration: none; color: inherit;
  cursor: pointer;
}

.entry.e1 { left: 11vw;  top: 52vh; }
.entry.e2 { right: 11vw; top: 52vh; }
.entry.e3 { left: 15vw;  top: 66vh; }
.entry.e4 { left: 50%;   top: 66vh; transform: translateX(-50%); }
.entry.e5 { right: 15vw; top: 66vh; }

.hex { padding-top: 5px; }
.hex svg { display: block; transition: transform 0.16s steps(3); }

.entry:hover .hex svg, .entry.sel .hex svg { transform: rotate(30deg); }

.entryTitle {
  display: block;
  font-family: var(--disp);
  font-weight: 600; font-size: 19px;
  letter-spacing: 0.3em;
  color: var(--ink);
}
.entry:hover .entryTitle, .entry.sel .entryTitle { color: var(--inkBright); }

.entrySub { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }

.zh {
  font-family: var(--zhFont);
  font-weight: 300; font-size: 12px;
  letter-spacing: 0.5em; color: var(--dim);
}

.morseBar {
  font-size: 11px; letter-spacing: 0.18em;
  color: #8a7f68;
  white-space: nowrap; overflow: hidden;
  max-width: 215px;
  min-height: 14px;
}

.entryRule {
  position: absolute; top: 13px;
  left: calc(100% + 18px);
  height: 1px; width: 0;
  background: var(--goldDim);
  transition: width 0.32s cubic-bezier(0.7, 0, 0.3, 1);
}
.alignR .entryRule { left: auto; right: calc(100% + 18px); }
.entry:hover .entryRule, .entry.sel .entryRule { width: 68px; }

/* 地平线基线标注 */

#baseline {
  position: absolute; left: 50%; top: 76vh;
  transform: translateX(-50%);
  text-align: center;
}
.blText { font-size: 11px; letter-spacing: 0.42em; color: var(--dim); white-space: nowrap; }
.blTick { width: 1px; height: 40px; margin: 12px auto 6px; background: rgba(232, 224, 208, 0.35); }
.blCross { font-size: 13px; color: rgba(232, 224, 208, 0.55); }

/* 状态栏 */

#status {
  position: fixed; left: 28px; right: 28px; bottom: 16px; z-index: 12;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  font-size: 10.5px; letter-spacing: 0.22em; color: var(--dim);
  white-space: nowrap;
}
#statusMsg { flex: 1; text-align: center; color: var(--gold); overflow: hidden; }
.dotLive {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); vertical-align: 1px; margin-right: 8px;
  animation: livePulse 1.6s steps(2) infinite;
}
@keyframes livePulse { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }

#replay { color: inherit; text-decoration: none; cursor: pointer; }
#replay:hover { color: var(--ink); }

/* ---------- 开屏公共 ---------- */

#splash { position: fixed; inset: 0; z-index: 35; }
body.homeReady #splash { display: none; }

#crosshair {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  font-size: 17px; color: rgba(232, 224, 208, 0.7);
  opacity: 0;
}
#splash.xhOn #crosshair { animation: xhBlink 1s steps(1) both; }
@keyframes xhBlink {
  0%, 18%  { opacity: 0; }
  19%, 38% { opacity: 1; }
  39%, 55% { opacity: 0; }
  56%, 100% { opacity: 1; }
}

#skipBtn {
  position: absolute; right: 30px; bottom: 46px;
  font-size: 10.5px; letter-spacing: 0.3em; color: var(--dim);
  cursor: pointer; opacity: 0;
  user-select: none;
}
body.splashing #skipBtn { animation: fadeIn 0.4s 0.9s both; }
#skipBtn:hover { color: var(--ink); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 开屏 A：信号线 */

.sigLine {
  position: absolute;
  display: flex; gap: 12px; align-items: baseline;
  opacity: 0;
}
.sigLine.on { opacity: 1; transition: opacity 0.25s steps(2); }
.sigLine .hex { padding-top: 2px; }
.sigText {
  font-size: 12px; letter-spacing: 0.24em;
  color: rgba(232, 224, 208, 0.88);
  white-space: nowrap;
}

/* 开屏 B：清扫显影 */

#home.sweep { animation: sweepClip 1.5s cubic-bezier(0.6, 0, 0.3, 1) both; }
@keyframes sweepClip {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

#splashCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#splashCanvas.fadeOut { opacity: 0; transition: opacity 0.8s ease; }

/* 开屏 C：徽章 */

#cWrap {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.cBadge { width: 230px; height: 230px; color: var(--ink); display: block; margin: 0 auto; }

.cBadge g { transform-box: fill-box; transform-origin: center; }

#cLabel {
  display: inline-block; margin-top: 30px;
  background: var(--orange); color: #f4e8d8;
  font-size: 11px; letter-spacing: 0.32em;
  padding: 5px 14px 4px 18px;
  opacity: 0;
}

#cWrap .bRingOuter, #cWrap .bRingInner, #cWrap .bTicks,
#cWrap .bCrescent, #cWrap .bSat { opacity: 0; }

#cWrap.boot1 .bRingOuter { animation: cRingIn 0.85s steps(9) both; }
#cWrap.boot1 .bRingInner { animation: cRingIn2 0.85s 0.12s steps(9) both; }
#cWrap.boot1 .bTicks     { animation: cFadeStep 0.5s 0.55s steps(4) both; }
#cWrap.boot1 .bCrescent  { animation: cDiscIn 0.55s 0.4s steps(5) both; }
#cWrap.boot1 .bSat       { animation: cFadeStep 0.35s 0.85s steps(3) both; }

@keyframes cRingIn  { from { transform: rotate(-140deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cRingIn2 { from { transform: rotate(110deg);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cDiscIn  { from { transform: scale(0.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cFadeStep { from { opacity: 0; } to { opacity: 1; } }

#cWrap.boot2 #cLabel { animation: cStamp 0.16s steps(2) both; }
@keyframes cStamp {
  from { transform: scale(1.55); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

#cWrap.boot3 .bRingOuter { animation: cSpin 0.95s steps(12) both; }
@keyframes cSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#cWrap.flying #cLabel { opacity: 0; transition: opacity 0.25s steps(2); }

/* ---------- 响应式 ---------- */

@media (max-width: 1019px) {
  #masthead { top: 17vh; }
  #menu {
    position: absolute; left: 11vw; right: auto; top: 44vh;
    display: flex; flex-direction: column; gap: 24px;
  }
  .entry, .entry.e1, .entry.e2, .entry.e3, .entry.e4, .entry.e5 {
    position: static;
    transform: none;
  }
  .alignR .entryRule { right: auto; left: calc(100% + 18px); }
  #baseline { display: none; }
  .morseBar { max-width: 62vw; }
  #status { letter-spacing: 0.12em; }
  #statusMsg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #grain { animation: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}