ひろばニュース｜2026/03/13~2026/03/19号

window.addEventListener('DOMContentLoaded', () => {
    /* --- カスタマイズ設定 --- */
    const config = {
        ratio: 0.75,          // 発生確率：75%（少し高めに設定。20%の確率で静寂が訪れる）
        maxItems: 30,        // 1サイクルで降らせる数（20枚だと寂しかったので40枚に増量！）
        restTime: 60000,     // 休止時間：1分（凝視するユーザーへの優しさ）
        debug: false         // 本番用なので false に設定
    };

    // 【個別投稿ページ除外】 singleクラスがある場合はここで終了
    if (document.body.classList.contains('single')) return;

    const now = new Date();
    const m = now.getMonth() + 1;
    const d = now.getDate();
    const md = m * 100 + d; 

    let mode = ""; let color = ""; let shape = ""; let isRise = false;

    // --- 2. 季節判定ロジック ---
    if (md >= 311 && md <= 415) {
        mode = "sakura"; color = "#ffd1dc"; shape = "50% 0 50% 50%";
    } else if (md >= 601 && md <= 630) {
        mode = "rain"; color = "rgba(174, 198, 207, 0.8)"; shape = "0 0 100% 100%";
    } else if (md >= 715 && md <= 831) {
        mode = "bubble"; color = "rgba(255, 255, 255, 0.4)"; shape = "50%"; isRise = true;
    } else if (md >= 1015 && md <= 1130) {
        mode = "leaf"; color = "#d2691e"; shape = "20% 80% 20% 80%";
    } else if (md >= 1215 || md <= 228) {
        mode = "snow"; color = "#ffffff"; shape = "50%";
    } else if (!config.debug) {
        return;
    }

    // 確率判定
    if (Math.random() > config.ratio) return;

    /* --- 3. CSS注入 --- */
    const style = document.createElement('style');
    style.innerHTML = `
        .seasonal-effect {
            position: fixed; top: -30px; pointer-events: none; z-index: 9999;
            background-color: ${color}; border-radius: ${shape};
            ${mode === 'bubble' ? 'border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 0 10px rgba(255,255,255,0.3);' : ''}
            ${mode === 'snow' ? 'box-shadow: 0 0 5px #fff;' : ''}
        }
        @keyframes fall-anim {
            0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
            100% { transform: translateY(110vh) rotate(720deg) translateX(120px); opacity: 0; }
        }
        @keyframes rise-anim {
            0% { transform: translateY(110vh) translateX(0); opacity: 0; }
            100% { transform: translateY(-30px) translateX(50px); opacity: 0; }
        }
    `;
    document.head.appendChild(style);

    const container = document.createElement('div');
    document.body.appendChild(container);

    let count = 0; let pausing = false;

    function create() {
        if (pausing) return;
        const el = document.createElement('div');
        el.className = 'seasonal-effect';
        const size = Math.random() * (mode === 'rain' ? 3 : (mode === 'snow' ? 6 : 12)) + 8;
        el.style.width = (mode === 'rain' ? '1px' : size + 'px');
        el.style.height = (mode === 'rain' ? '25px' : size * 0.9 + 'px');
        el.style.left = Math.random() * 100 + 'vw';
        const duration = Math.random() * 3 + (mode === 'rain' ? 0.8 : (mode === 'snow' ? 7 : 5));
        el.style.animation = `${isRise ? 'rise-anim' : 'fall-anim'} ${duration}s linear forwards`;
        container.appendChild(el);
        setTimeout(() => el.remove(), duration * 1000);
        count++;
        if (count >= config.maxItems) {
            pausing = true; count = 0;
            setTimeout(() => { pausing = false; }, config.restTime);
        }
    }
    setInterval(create, mode === 'rain' ? 150 : (mode === 'snow' ? 500 : 800));
});