/* =====================================================================
   texture.css —— 线条与纹理层（叠在 cyber.css / neon.css 之上）
   只在 <html class="agh-cyber"> 时生效；删掉 index.html 里这一行就整层撤掉。

   三件事：
     1 HUD 角标：卡片四角来一小段直角括号，像仪表读数框
     2 纹理：斜发丝线（卡片内部）+ 极淡噪点（整页）+ 竖向分栏线
     3 线条语言：区块标题前一道短横、分隔线改成虚线霓虹、顶栏底加一条刻度尺
   ⚠ 约束：纹理一律压在文字下面且透明度极低（≤ .06），
     不许影响读字；作者口径「红与跳过必须长得不一样」这里也不碰语义色。
   ===================================================================== */

/* ----------  1. 整页极淡噪点（SVG feTurbulence，不联网、不外链）  ---------- */
html.agh-cyber body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>");
  mix-blend-mode: overlay;
}

/* ----------  2. 竖向分栏线：像原理图上的列线  ---------- */
html.agh-cyber .container {
  position: relative;
}
html.agh-cyber .container::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(125, 200, 255, .05) 1px, transparent 1px);
  background-size: 25% 100%;
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* ----------  3. 卡片：斜发丝纹理 + HUD 四角  ---------- */
html.agh-cyber .card {
  background-image:
    repeating-linear-gradient(135deg, rgba(125, 200, 255, .035) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(17, 24, 46, .93) 0%, rgba(9, 13, 27, .95) 100%) !important;
}
/* 四角括号：用两条渐变当"角"，不额外加 DOM */
html.agh-cyber .card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(#7DF9FF, #7DF9FF) left 1px top 1px / 13px 1px no-repeat,
    linear-gradient(#7DF9FF, #7DF9FF) left 1px top 1px / 1px 13px no-repeat,
    linear-gradient(#FF7AC0, #FF7AC0) right 1px bottom 1px / 13px 1px no-repeat,
    linear-gradient(#FF7AC0, #FF7AC0) right 1px bottom 1px / 1px 13px no-repeat;
  opacity: .5;
  transition: opacity .22s cubic-bezier(.22, .61, .36, 1);
}
html.agh-cyber .card:hover::after { opacity: 1; }

/* ----------  4. 区块标题：前面一道短横 + 后面一条走远的细线  ---------- */
html.agh-cyber h1::before,
html.agh-cyber h2::before,
html.agh-cyber .card-title::before {
  content: ""; display: inline-block; width: 16px; height: 2px; margin-right: 8px;
  vertical-align: middle;
  background: linear-gradient(90deg, #7DF9FF, rgba(125, 249, 255, 0));
}
html.agh-cyber h1, html.agh-cyber h2 {
  border-bottom: 1px solid rgba(125, 200, 255, .12);
  padding-bottom: 6px;
}

/* ----------  5. 分隔线：实线太"表格式"，改虚线霓虹  ---------- */
html.agh-cyber hr,
html.agh-cyber [style*="border-top: 1px solid" i],
html.agh-cyber [style*="border-bottom: 1px solid" i] {
  border-color: rgba(125, 200, 255, .14) !important;
}
html.agh-cyber .card + .card { border-top: 1px dashed rgba(125, 200, 255, .16) !important; }

/* ----------  6. 顶栏底部一条刻度尺（科技感主要来自这种"仪器感"细节）  ---------- */
html.agh-cyber .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 5px;
  background-image:
    repeating-linear-gradient(90deg, rgba(125, 249, 255, .5) 0 1px, transparent 1px 14px),
    linear-gradient(90deg, rgba(34, 211, 238, .3), rgba(139, 123, 255, .18) 50%, rgba(255, 61, 154, .3));
  -webkit-mask-image: linear-gradient(180deg, #000 0 2px, transparent 2px 60%);
  mask-image: linear-gradient(180deg, #000 0 2px, transparent 2px 60%);
  pointer-events: none;
}
html.agh-cyber .topbar { position: relative; }

/* ----------  7. 按钮与标签：加一道内描边，像面板按键  ---------- */
html.agh-cyber .btn-ghost2, html.agh-cyber .btn-soft {
  background-image: repeating-linear-gradient(135deg, rgba(125, 200, 255, .05) 0 1px, transparent 1px 6px) !important;
  box-shadow: inset 0 0 0 1px rgba(125, 200, 255, .1), 0 0 0 0 rgba(0, 0, 0, 0);
}
html.agh-cyber .tag {
  background-image: repeating-linear-gradient(90deg, rgba(125, 249, 255, .07) 0 1px, transparent 1px 5px) !important;
}

/* ----------  8. 输入框：底边一条"待填写"的霓虹下划线  ---------- */
html.agh-cyber input, html.agh-cyber textarea, html.agh-cyber select {
  background-image: linear-gradient(90deg, rgba(125, 249, 255, .35), rgba(125, 249, 255, 0)) !important;
  background-size: 100% 1px !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
}
html.agh-cyber input:focus, html.agh-cyber textarea:focus {
  background-size: 100% 2px !important;
}

/* ----------  9. 表格/列表行：斑马纹压成极淡的一层  ---------- */
html.agh-cyber tr:nth-child(even) { background: rgba(125, 200, 255, .025) !important; }

/* ---------- 10. 慢速扫光：只在卡片上偶尔过一次（30 秒一轮，不吵）  ---------- */
html.agh-cyber .card > .agh-sweep, html.agh-cyber .card::first-line { --none: 0; }
@keyframes tex-sweep {
  0%, 86%  { transform: translateX(-120%); opacity: 0; }
  90%      { opacity: .5; }
  100%     { transform: translateX(120%); opacity: 0; }
}

/* ---------- 11. 关动效 / 晕动：纹理留着，动的东西全停  ---------- */
html.agh-cyber.agh-nomotion .card::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.agh-cyber .card::after { transition: none; }
}

/* ---------- 12. 浅色主题下这层完全不参与（保险）  ---------- */
html:not(.agh-cyber) body::before,
html:not(.agh-cyber) .container::after { display: none; }