/* ============================================================
   换场特效（入场屏）· 供 Astro 页面与应用模板共用
   ------------------------------------------------------------
   复刻 DSH「终末地」主题的 boot 屏（左轨 + 跟随读表 + 海报字标 + 铺满扫 + 淡出）。
   这里只放样式，动效在 /assets/ev-intro.js，结构由页面模板输出（.ti-*）。
   无 JS 兜底：整块默认 display:none，只有 <html class="ev-intro"> 才显示。
   控制权：
     · ?nointro=1            → 完全跳过
     · prefers-reduced-motion → 完全跳过（这里也兜一层）
     · 同板块内部跳转        → 不播（少打断阅读）；跨板块/外部进来 → 播
     · 工具页                → 每次都播（用户明确要求）
   ============================================================ */
html:not(.ev-intro) .ti { display: none !important; }
html.ev-intro body { overflow: hidden; }

.ti {
  --ti-accent: #14d0d0; /* 武陵青 */
  --ti-ink: #101110;
  --ti-paper: #f5f5f0;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--ti-ink);
  color: var(--ti-paper);
  overflow: hidden;
  pointer-events: none; /* 绝不挡住下面的页面 */
  opacity: 1;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.ti[data-ti-exit] { opacity: 0; }
.ti[data-ti-complete] .ti-meter {
  position: fixed !important;
  left: 26px !important;
  top: auto !important;
  bottom: 64px !important;
}

/* 极淡工业网格（与参考同参数：1px/4px 竖纹 + 1px/120px 横纹） */
.ti-tex {
  position: absolute; inset: 0; opacity: 0.55;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.010) 0 1px, transparent 1px 120px);
}
/* 左侧 10px 轨道 + 填充 */
.ti-track {
  position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: rgba(20, 208, 208, 0.10);
}
.ti-fill {
  position: absolute; left: 0; top: 0; width: 10px; height: 0%;
  background: var(--ti-accent);
}
/* 读表：贴着填充前沿往下走（top 由 JS 每帧写 px） */
.ti-meter { position: absolute; left: 26px; top: 0; will-change: top; }
.ti-tick { display: block; width: 4px; height: 15px; background: var(--ti-accent); }
.ti-pct {
  display: block; margin-top: 7px;
  color: var(--ti-accent); font-size: 39px; font-weight: 700; line-height: 1;
  letter-spacing: -0.01em;
}
.ti-status {
  display: block; margin-top: 12px;
  color: #8a8a8a; /* 参考用 #666（3.4:1），这里提到 5.80:1 */
  font-size: 11px; font-weight: 400; letter-spacing: 0.02em;
}
/* 右侧海报字标：右锚定，所有行共用一条左节奏线 */
.ti-brand {
  position: absolute; right: clamp(22px, 7.4vw, 110px); top: 50%; transform: translateY(-50%);
  --ti-word: clamp(30px, min(6.6vh, 5.4vw), 74px);
}
.ti-kicker {
  display: block;
  font-size: max(9px, calc(var(--ti-word) * 0.155));
  font-weight: 600; letter-spacing: 0.26em; white-space: nowrap;
  color: #b8b8b3; margin-bottom: 0.5em; opacity: 0.95;
}
.ti-word {
  display: block;
  margin-left: -0.055em; /* 抵消字形左侧字身空隙，让墨边落在节奏线上 */
  color: var(--ti-paper);
  font-size: var(--ti-word);
  font-weight: 900;
  line-height: 0.80;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ti-word2 { color: var(--ti-accent); }
.ti-detail { display: block; position: relative; margin-top: 1.6em; font-size: var(--ti-word); }
.ti-chev { position: absolute; left: -0.26em; top: 0.02em; width: 0.12em; height: 0.24em; }
.ti-chev::before, .ti-chev::after {
  content: ''; position: absolute; left: 0;
  width: 0.10em; height: 0.10em;
  border-left: 0.028em solid var(--ti-accent);
  border-bottom: 0.028em solid var(--ti-accent);
  transform: rotate(-45deg);
}
.ti-chev::before { top: 0; }
.ti-chev::after { top: 0.09em; }
.ti-sub, .ti-seq, .ti-tag { display: block; white-space: nowrap; }
.ti-sub {
  color: #a8aca6; font-size: max(9px, calc(var(--ti-word) * 0.135));
  font-weight: 500; letter-spacing: 0.12em;
}
.ti-seq {
  margin-top: 0.4em; color: #8a8d88; font-size: max(8px, calc(var(--ti-word) * 0.125));
  font-weight: 500; letter-spacing: 0.10em;
}
.ti-squares { display: grid; grid-template-columns: repeat(6, 0.115em); gap: 0.04em; margin-top: 0.30em; }
.ti-squares i { display: block; height: 0.05em; background: #2e302d; }
.ti-squares i[data-on] { background: var(--ti-accent); }
.ti-tag {
  margin-top: 0.9em; color: #8a8d88; font-size: max(9px, calc(var(--ti-word) * 0.12));
  letter-spacing: 0.14em;
}
/* 完成时的"铺满"层：起手就是那条 10px 轨道，随后向右铺满整屏 */
.ti-wipe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: var(--ti-accent); opacity: 0;
}

@media (max-width: 620px) {
  .ti-brand { right: 18px; --ti-word: clamp(26px, 9vw, 44px); }
  .ti-pct { font-size: 30px; }
  .ti-meter { left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ti { display: none !important; }
}