/* ==========================================================
   效果 A：全屏黄色滚动扫描线背景
   —— 3 条柔光黄线自上而下循环扫过 + 细密 CRT 扫描纹
   —— 用法：body 最前面放 <div class="page-bg">…3 个 span…</div>
   —— 调参：改颜色找 #ffd400，改快慢找 animation 秒数，改模糊找 blur()
   ========================================================== */

/* ---------- 演示页面自身样式（接入自己项目时可删） ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #e9e9e0;
    background: #0f100c;          /* 和背景层同色，避免下拉露白 */
    min-height: 100vh;
    padding: 48px 24px 80px;
}
.wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
h1 { font-size: 26px; letter-spacing: 1px; margin-bottom: 12px; }
p  { font-size: 14px; color: #9a9c88; line-height: 1.8; margin-bottom: 20px; }
button {
    font: inherit; font-size: 14px; cursor: pointer;
    padding: 10px 20px; border: 1px solid #3a3b2e; border-radius: 8px;
    background: #1c1d16; color: #ffd400;
}

/* ==========================================================
   1. 容器：铺满视口、垫在最底层、不挡操作
   ========================================================== */
.page-bg {
    position: fixed;       /* 相对视口固定，页面滚动时背景不动 */
    inset: 0;              /* = top/right/bottom/left 全为 0，撑满屏幕 */
    z-index: 0;            /* 垫底；你的内容层记得设 z-index: 1 */
    pointer-events: none;  /* 关键：不吃鼠标事件，否则页面上按钮全点不动 */
    background: #0f100c;   /* 深色底，黄线才够亮 */
    overflow: hidden;      /* 裁掉溢出的动画元素，避免撑出滚动条 */
}

/* ==========================================================
   2.（默认关闭）稀疏扫描纹理
   —— 想要一点点 CRT 质感再启用，默认不加，避免满屏密线
   —— 启用方法：把下面这段的注释符号去掉即可
   ========================================================== */
/* 启用时：删掉下面每一行开头的 * 号（对，包括 * 后面的那个空格）

*.page-bg::before {
*   content: "";
*   position: absolute;
*   inset: -60px 0;          溢出量 = 图案周期，滚动时才不露边
*   background: repeating-linear-gradient(
*       0deg,
*       rgba(255, 212, 0, .06) 0 1px,    亮线 1px，很淡
*       transparent 1px 60px             间隔 59px，周期 60px，越大越稀
*   );
*   animation: scan-roll 20s linear infinite;
*}
*@keyframes scan-roll {
*   to { transform: translateY(60px); }  位移 = 周期 60px，才能无缝循环
*}
*/

/* ==========================================================
   3. 三条柔光扫描黄线
   —— 共用一个动画，靠「负延迟」错开位置
   ========================================================== */
.page-bg .line {
    position: absolute;
    left: -5%; right: -5%; top: 0;   /* 左右各探出 5%，blur 后两端不露硬边 */
    height: 14px;                    /* 本体够粗，模糊后才不会糊没 */
    /* --core 是线芯颜色，--edge 是两端过渡色，由 nth-child 覆盖 */
    background: linear-gradient(90deg,
        transparent,
        var(--edge) 15%,
        var(--core) 50%,
        var(--edge) 85%,
        transparent);
    filter: blur(5px);                               /* ← 模糊程度，调大更朦胧 */
    box-shadow: 0 0 40px 14px var(--halo);           /* 大范围柔光，扩散感来源 */
    will-change: transform;
    animation: scan-down 4.5s linear infinite;
}

/* 负延迟：让三条线一开局就均匀分布，不用等第一圈跑完
   亮度差异写在这里的变量里（不放进 keyframes，避免部分浏览器解析异常） */
.page-bg .line:nth-child(1) {
    animation-delay: 0s;
    --core: rgba(255, 246, 200, 1);
    --edge: rgba(255, 212, 0, .55);
    --halo: rgba(255, 212, 0, .38);
}
.page-bg .line:nth-child(2) {
    animation-delay: -1.5s;
    --core: rgba(255, 232, 140, .85);
    --edge: rgba(255, 200, 0, .40);
    --halo: rgba(255, 212, 0, .28);
}
.page-bg .line:nth-child(3) {
    animation-delay: -3s;
    --core: rgba(255, 220, 110, .70);
    --edge: rgba(255, 190, 0, .30);
    --halo: rgba(255, 212, 0, .20);
}

/* 100vh：正好从屏幕顶部扫到消失在底部 */
@keyframes scan-down {
    0%   { transform: translateY(-30px); opacity: 0; }
    10%  { opacity: 1; }                /* 淡入，避免凭空出现 */
    90%  { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }  /* 淡出 */
}

/* ==========================================================
   4. 最上层文字框（置顶浮层）
   —— z-index: 999 保证压在扫描线背景和普通内容之上
   ========================================================== */
.text-box {
    position: fixed;              /* 固定定位，页面滚动也不动 */
    z-index: 999;                 /* ← 最上层的关键：比 .wrap(1) 和 .page-bg(0) 都高 */

    /* 位置：整体偏上。14vh 表示距顶部占屏高 14%，想更高就改小（如 8vh） */
    top: 1vh;
    left: 50%;
    transform: translateX(-50%);  /* 只需水平居中，不再垂直居中 */

    /* 宽度：680px 上限，窄屏自动收窄 */
    width: min(800px, calc(100vw - 48px));

    /* 高度：不写 height，完全由内容撑开；最多到 70vh，再多就内部滚动 */
    max-height: 1000vh;
    display: flex;                /* 让标题固定、正文区单独滚动 */
    flex-direction: column;

    padding: 26px 32px;
    background: rgba(14, 15, 12, .92);  /* 半透明深底，不挡死背后的扫描线 */
    border: 1px solid rgba(255, 212, 0, .45);
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(255, 212, 0, .15),
                0 18px 50px rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);   /* 毛玻璃，背后的线会变得朦胧 */
}

/* 正文区：真正滚动的部分，标题「系统提示」保持固定在顶部不跟着滑 */
.text-box .body {
    flex: 1 1 auto;
    min-height: 0;                /* flex 子项要能收缩，否则滚动失效 */
    overflow-y: auto;
    overscroll-behavior: contain; /* 滑到底时不带动整个页面滚动 */
    padding-right: 10px;          /* 给滚动条留位置，文字不贴边 */
}

/* 自定义滚动条（Chrome / Edge / Safari） */
.text-box .body::-webkit-scrollbar { width: 8px; }
.text-box .body::-webkit-scrollbar-track {
    background: rgba(255, 212, 0, .06);
    border-radius: 4px;
}
.text-box .body::-webkit-scrollbar-thumb {
    background: rgba(255, 212, 0, .38);
    border-radius: 4px;
}
.text-box .body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 212, 0, .6);
}
/* Firefox */
.text-box .body { scrollbar-width: thin; scrollbar-color: rgba(255,212,0,.38) rgba(255,212,0,.06); }

.text-box h2 {
    font-size: 17px; font-weight: 600;
    color: #ffd400; letter-spacing: .5px;
    margin-bottom: 14px;
}
.text-box p {
    font-size: 14px; line-height: 1.9;
    color: #cfd1c0; margin: 0 0 10px;
}
.text-box p:last-child { margin-bottom: 0; }

.s-font {
    font-family: oblique;
}

/* 想换位置？改 .text-box 的 top / left / transform 这三行：
   垂直居中：top: 50%; transform: translate(-50%, -50%);
   右上角：  top: 24px; right: 24px; left: auto; transform: none;
   再高一点：把 top: 14vh 改成 8vh 或 6vh
   更宽：    把 min(680px, …) 里的 680px 调大
*/

/* ==========================================================
   5. 无障碍：系统开启「减弱动态效果」时停止动画
   ========================================================== */
/* 注意：这里只停动画，不用 display:none。
   否则系统开了「减弱动态效果」的人会连一条线都看不到，以为代码坏了。 */
@media (prefers-reduced-motion: reduce) {
    /* .page-bg::before, */   /* 启用纹理时，把这行前面的注释去掉 */
    .page-bg .line { animation: none; opacity: 1; }
    .page-bg .line:nth-child(2) { top: 33%; }
    .page-bg .line:nth-child(3) { top: 66%; }
}