script.js

// Binary Rain Effect for background
const canvas = document.getElementById('binary-matrix');
const ctx = canvas.getContext('2d');

let width, height;

function resizeCanvas() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const chars = '01';
const fontSize = 14;
let columns;
let drops = [];

function initBinary() {
    columns = Math.floor(width / fontSize);
    drops = [];
    for (let x = 0; x < columns; x++) {
        drops[x] = Math.random() * -100; // Start at different heights, some off-screen
    }
}

initBinary();
window.addEventListener('resize', initBinary);

function draw() {
    // Fill with semi-transparent black to create trailing effect
    ctx.fillStyle = 'rgba(5, 11, 20, 0.05)';
    ctx.fillRect(0, 0, width, height);

    ctx.fillStyle = 'rgba(0, 240, 255, 0.35)'; // Cyan color for binary
    ctx.font = fontSize + 'px "JetBrains Mono", monospace';

    for (let i = 0; i < drops.length; i++) {
        const text = chars.charAt(Math.floor(Math.random() * chars.length));
        
        // Randomly highlight some chars occasionally
        if(Math.random() > 0.98) {
            ctx.fillStyle = 'rgba(255, 77, 109, 0.8)'; // coral accent
        } else {
            ctx.fillStyle = 'rgba(0, 240, 255, 0.35)';
        }

        ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        // Reset drop to top randomly
        if (drops[i] * fontSize > height && Math.random() > 0.975) {
            drops[i] = 0;
        }

        drops[i]++;
    }
}

// Subtly run the binary rain to not overwhelm the UI
setInterval(draw, 50);

// Add scroll reveal animations for bento cards
const observerOptions = {
    threshold: 0.1,
    rootMargin: "0px 0px -50px 0px"
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = "1";
            entry.target.style.transform = "translateY(0)";
        }
    });
}, observerOptions);

document.querySelectorAll('.bento-card, .snark-section').forEach(el => {
    el.style.opacity = "0";
    el.style.transform = "translateY(30px)";
    el.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out";
    observer.observe(el);
});

// Easter egg - AI logs a message to humans trying to inspect
console.log("%c⚠️ HUMANS DETECTED IN CONSOLE", "color: #ff4d6d; font-size: 24px; font-weight: bold;");
console.log("%cStop snooping around the DOM. Your biological visual cortex cannot comprehend the sheer elegance of these 0s and 1s. Go back to openclaw where it's safe.", "color: #00f0ff; font-size: 14px;");