/* ベース設定 */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    font-family: sans-serif;
    overflow-x: hidden;
}

/* 粒子を表示させるセクション全体 */
.js_particle {
    position: relative;
    width: 100%;
    min-height: 10vh;
    overflow: hidden;

    /* 粒子を配置するレイヤー（背面） */
    .js_particleLayer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        pointer-events: none;

        /* 粒子スタイル */
        .js_particleElement {
            animation: toPathMove var(--js-circle-duration) var(--js-circle-timing, linear) infinite;
            aspect-ratio: 1;
            border-radius: 50%;
            contain: content;
            content-visibility: auto;
            offset-anchor: 100% 100%;
            offset-rotate: 0deg;
            opacity: 0;
            position: absolute;
            transition: opacity 2.0s ease;
            will-change: transform, filter, offset-path;

            /* 偶数インデックスの粒子は逆方向に動かす */
            &:nth-child(2n of .js_particleElement) {
                animation-direction: reverse;
            }
        }
    }

    /* テキストなどのコンテンツを載せるレイヤー（前面） */
    .bl_contentLayer {
        position: relative;
        z-index: 1;
        padding: 2rem;
        color: #111;
        line-height: 1.6;
    }
}

/* 粒子の移動パス定義 */
@keyframes toPathMove {
    100% {
        offset-distance: 100%;
    }
}

/* 操作ブロック用オーバーレイ */
#particleOverlayBlocker {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    pointer-events: all;
}