/**
 * KooKoa Folders — Pricing Page decorative rain effect.
 *
 * Decorative canvas animation on the right side of the pricing page:
 * falling neon-green characters on a dark background.
 * Skipped on narrow viewports and when the user has "Reduce motion"
 * enabled at the OS level (accessibility-friendly).
 *
 * @package KookoaWPF
 */
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth < 768) return;
    // Respect the OS-level "Reduce motion" accessibility setting (Windows,
    // macOS, iOS, Android). Users who enable it — for motion sickness,
    // vestibular disorders, epilepsy, ADHD, or just to reduce distraction —
    // will see a clean pricing page without the falling characters.
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    const c = document.createElement('canvas');
    c.id = 'kookoawpf-rain-bg';
    c.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:9990;pointer-events:none;opacity:0.40;';
    document.body.appendChild(c);
    const ctx = c.getContext('2d');
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZアイウエオカキクケコサシスセソタチツテト';
    chars = chars.split('');
    const fontSize = 22;
    let columns = Math.floor(c.width / fontSize);
    let drops = [];
    for (let i = 0; i < columns; i++) drops[i] = Math.floor(Math.random() * -c.height / fontSize);
    // Pricing content is left-aligned; we draw the rain only on the right
    // side — everything from the end of the content area (1370px) to the
    // right edge of the viewport.
    const contentRight = 1370;

    function draw() {
        ctx.fillStyle = 'rgba(13,17,23,0.08)';
        ctx.fillRect(0, 0, c.width, c.height);
        // Clear the content area so nothing bleeds under the pricing cards.
        ctx.clearRect(0, 0, contentRight, c.height);
        ctx.fillStyle = '#39FF14';
        ctx.font = fontSize + 'px monospace';
        for (let i = 0; i < drops.length; i++) {
            const x = i * fontSize;
            if (x < contentRight) continue;
            const text = chars[Math.floor(Math.random() * chars.length)];
            ctx.fillText(text, x, drops[i] * fontSize);
            if (drops[i] * fontSize > c.height && Math.random() > 0.975) drops[i] = 0;
            drops[i]++;
        }
    }
    setInterval(draw, 40);

    window.addEventListener('resize', function() {
        c.width = window.innerWidth;
        c.height = window.innerHeight;
        columns = Math.floor(c.width / fontSize);
        drops = [];
        for (let i = 0; i < columns; i++) drops[i] = Math.floor(Math.random() * -c.height / fontSize);
    });
});
