/* ===============================
   STJH – Global Crosslines Background
   保存为：/assets/css/crosslines.css
   说明：无需改HTML；全站生效；自适应；不遮挡内容；打印时自动隐藏
   =============================== */

/* —— 基础色与可调参数 —— */
:root{
  /* 页面底色（可按需微调成更偏白/更偏灰） */
  --bg-base: #f5f7fb;

  /* 线条颜色（网站黄 + 白）与透明度 */
  --line-yellow-1: rgba(255,200,61,0.20);
  --line-yellow-2: rgba(255,200,61,0.12);
  --line-white-1 : rgba(255,255,255,0.36);
  --line-white-2 : rgba(255,255,255,0.22);

  /* 线距（越大越稀疏）；使用 clamp 保证在不同屏幕自适应 */
  --gap-a: clamp(24px, 2.2vw, 46px);
  --gap-b: clamp(28px, 2.8vw, 60px);
  --gap-c: clamp(32px, 3.4vw, 72px);
  --gap-d: clamp(20px, 1.8vw, 40px);

  /* 画布感大小（不改也行） */
  --tile-a: max(1200px, 100vw);
  --tile-b: max(1200px, 100vw);
  --tile-c: max(1200px, 100vw);
  --tile-d: max(1200px, 100vw);
}

/* —— 全站底色 —— */
html, body{
  min-height: 100%;
  background-color: var(--bg-base);
}

/* —— 固定在视口的“背景层”，不遮挡内容 —— */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;            /* 在所有内容下方 */
  pointer-events: none;   /* 不影响点击 */
  /* 多层不同角度/线距/位移的重复线性渐变，制造“随机感”交叉 */
  background-image:
    /* 白色 45° */
    repeating-linear-gradient(45deg,
      var(--line-white-1) 0 1px, transparent 1px var(--gap-a)),
    /* 黄色 -45° */
    repeating-linear-gradient(-45deg,
      var(--line-yellow-1) 0 1px, transparent 1px var(--gap-b)),
    /* 黄色 22.5° */
    repeating-linear-gradient(22.5deg,
      var(--line-yellow-2) 0 1px, transparent 1px var(--gap-c)),
    /* 白色 -22.5° */
    repeating-linear-gradient(-22.5deg,
      var(--line-white-2) 0 1px, transparent 1px var(--gap-d)),
    /* 白色 67.5°（稀一些） */
    repeating-linear-gradient(67.5deg,
      var(--line-white-2) 0 1px, transparent 1px calc(var(--gap-c) * 1.2)),
    /* 黄色 -67.5°（稀一些） */
    repeating-linear-gradient(-67.5deg,
      var(--line-yellow-2) 0 1px, transparent 1px calc(var(--gap-b) * 1.4));
  /* 不同层给不同的平铺尺寸和偏移，弱化“规则重复感” */
  background-size:
    var(--tile-a) var(--tile-a),
    var(--tile-b) var(--tile-b),
    var(--tile-c) var(--tile-c),
    var(--tile-d) var(--tile-d),
    var(--tile-b) var(--tile-b),
    var(--tile-c) var(--tile-c);
  background-position:
    7vw 5vh,    /* 层1 */
    23vw 19vh,  /* 层2 */
    43vw 11vh,  /* 层3 */
    3vw 37vh,   /* 层4 */
    63vw 29vh,  /* 层5 */
    11vw 57vh;  /* 层6 */
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed; /* 随滚动固定 */
  background-repeat: repeat;
  /* 轻微柔化，避免锐利摩尔纹（可删） */
  filter: none;
}

/* —— 打印或极窄窗口时，自动弱化或隐藏 —— */
@media (max-width: 420px){
  body::before{ opacity: .75; }
}
@media print{
  body::before{ display: none !important; }
}

/* —— 可选：深色页块仍能看见底纹（保留默认即可） —— */
/* section, .card, .hero { background: rgba(255,255,255,0.96); } */