.backwapper{
    position:fixed;
    inset:0;
    z-index:-999;
    overflow:hidden;

    /* ── グリッド／ドット／右下グラデーション ───────── */
    background:
      /* 濃い線 */
      linear-gradient(
        color-mix(in srgb,var(--color-accent-0) 20%,transparent) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        color-mix(in srgb,var(--color-accent-0) 20%,transparent) 1px,
        transparent 1px
      ),
      /* 薄い線 */
      linear-gradient(
        color-mix(in srgb,var(--color-accent-0) 10%,transparent) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        color-mix(in srgb,var(--color-accent-0) 10%,transparent) 1px,
        transparent 1px
      ),
      /* グラデーション */
      radial-gradient(ellipse at bottom right,
                      color-mix(in srgb,var(--color-accent-0) 60%,transparent) 0%,
                      var(--color-bg-0) 60%);
    background-size:
      40px 40px,  /* 濃い線: 横 */
      40px 40px,  /* 濃い線: 縦 */
      20px 20px,  /* 薄い線: 横 */
      20px 20px,  /* 薄い線: 縦 */
      100% 100%;  /* グラデーション */

    /* ▼ここが "スクロール × 0.3" で常に変わる */
    background-position:
        calc(-1 * var(--scrollOffsetX)) calc(-1 * var(--scrollOffsetY)),
        calc(-1 * var(--scrollOffsetX)) calc(-1 * var(--scrollOffsetY)),
        calc(-1 * var(--scrollOffsetX)) calc(-1 * var(--scrollOffsetY)),
        calc(-1 * var(--scrollOffsetX)) calc(-1 * var(--scrollOffsetY)),
        0 0;

    /* ── 200 ms で滑らかに補間させる ─────────────── */
    transition:background-position 1600ms ease-out;
    will-change:background-position;

    /* ── マスク（光が走るアニメ） ────────────── */
    mask-image:repeating-linear-gradient(
      120deg,
      transparent 0%, transparent 8%,
      color-mix(in srgb,var(--color-bg-0) 20%,transparent) 12%,
      color-mix(in srgb,var(--color-bg-0) 50%,transparent) 16%,
      color-mix(in srgb,var(--color-bg-0) 80%,transparent) 20%,
      black 24%, black 36%,
      color-mix(in srgb,var(--color-bg-0) 80%,transparent) 40%,
      color-mix(in srgb,var(--color-bg-0) 50%,transparent) 44%,
      color-mix(in srgb,var(--color-bg-0) 20%,transparent) 48%,
      transparent 52%, transparent 58%,
      color-mix(in srgb,var(--color-bg-0) 20%,transparent) 62%,
      color-mix(in srgb,var(--color-bg-0) 50%,transparent) 66%,
      color-mix(in srgb,var(--color-bg-0) 80%,transparent) 70%,
      black 74%, black 86%,
      color-mix(in srgb,var(--color-bg-0) 80%,transparent) 90%,
      color-mix(in srgb,var(--color-bg-0) 50%,transparent) 94%,
      color-mix(in srgb,var(--color-bg-0) 20%,transparent) 98%,
      transparent 100%
    );
    -webkit-mask-image:repeating-linear-gradient(120deg,transparent 0%,transparent 8%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 12%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 16%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 20%,black 24%,black 36%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 40%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 44%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 48%,transparent 52%,transparent 58%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 62%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 66%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 70%,black 74%,black 86%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 90%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 94%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 98%,transparent 100%);
    mask-size:200% 200%;
    mask-repeat:no-repeat;
    animation:flowMask 16s linear infinite;
}

@keyframes flowMask{
    0%   {mask-position:0% 0%;}
    100% {mask-position:100% 100%;}
}