/* ==========================================================================
   HASH GAME . wire/utils.css
   Section 4 -- utility classes, patterns and motion (loaded last on purpose)
   ========================================================================== */

/* ===== SECTION: utils ===== */

.hx-wrap {
  width: 100%;
  max-width: var(--hx-wrap);
  margin-inline: auto;
  padding-inline: var(--hx-gut);
}

.hx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hx-skip {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--hx-ink);
  color: #fff;
  font-family: var(--hx-mono);
  font-size: var(--hx-fs-xs);
  letter-spacing: 0.1em;
  transition: top 0.2s ease;
}

.hx-skip:focus {
  top: 12px;
}

.hx-mono {
  font-family: var(--hx-mono);
  font-size: var(--hx-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-mute);
}

.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hx-mono);
  font-size: var(--hx-fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hx-signal);
}

.hx-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--hx-signal);
}

.hx-eyebrow--center {
  justify-content: center;
}

/* 间距工具：替代行内样式，保持版式可维护 */
.hx-mt-6 { margin-top: 6px; }
.hx-mt-10 { margin-top: 10px; }
.hx-mt-12 { margin-top: 12px; }
.hx-mt-20 { margin-top: 20px; }
.hx-mt-24 { margin-top: 24px; }
.hx-mt-26 { margin-top: 26px; }
.hx-mt-36 { margin-top: 36px; }
.hx-mb-24 { margin-bottom: 24px; }

/* 条形码 / 哈希指纹纹样：三段不同周期的线性渐变叠加 */
.hx-strip {
  height: 16px;
  background-image:
    repeating-linear-gradient(90deg, var(--hx-ink) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, transparent 0 13px, var(--hx-signal) 13px 15px, transparent 15px 27px),
    repeating-linear-gradient(90deg, transparent 0 7px, var(--hx-teal) 7px 10px, transparent 10px 33px);
  opacity: 0.85;
}

.hx-rule {
  height: 1px;
  background: var(--hx-line);
  border: 0;
}

.hx-keyline {
  border-top: 1px solid var(--hx-line);
  border-bottom: 1px solid var(--hx-line);
}

/* 滚动入场：仅当脚本就绪时才隐藏，脚本失败不影响可读性 */
html.hx-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html.hx-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}