script.js

// Космический фон на Canvas
const canvas = document.getElementById('cosmo-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
for (let i = 0; i < 250; i++) {
    particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 5 + 1,
        speedX: Math.random() * 1 - 0.5,
        speedY: Math.random() * 1 - 0.5,
        color: `hsl(${Math.random() * 360}, 100%, 85%)`,
        alpha: Math.random() * 0.6 + 0.4
    });
}

function animateCosmo() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => {
        ctx.globalAlpha = p.alpha;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        ctx.fillStyle = p.color;
        ctx.fill();
        p.x += p.speedX;
        p.y += p.speedY;
        p.alpha = Math.sin(Date.now() * 0.002 + p.x) * 0.6 + 0.4;
        if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
        if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
    });
    requestAnimationFrame(animateCosmo);
}
animateCosmo();

// Управление продуктом (ПК: мышь, мобильные: сенсор)
const product = document.getElementById('cosmo-product');
if ('ontouchstart' in window) {
    let touchStartX = 0, touchStartY = 0;
    product.addEventListener('touchstart', (e) => {
        touchStartX = e.touches[0].clientX;
        touchStartY = e.touches[0].clientY;
    });
    product.addEventListener('touchmove', (e) => {
        const deltaX = (e.touches[0].clientX - touchStartX) / 8;
        const deltaY = (e.touches[0].clientY - touchStartY) / 8;
        product.style.transform = `perspective(3000px) rotateY(${deltaX}deg) rotateX(${-deltaY}deg)`;
    });
    product.addEventListener('touchend', () => {
        product.style.transform = 'perspective(3000px) rotateY(0deg) rotateX(0deg)';
    });
} else {
    document.addEventListener('mousemove', (e) => {
        const xAxis = (window.innerWidth / 2 - e.pageX) / 8;
        const yAxis = (window.innerHeight / 2 - e.pageY) / 8;
        product.style.transform = `perspective(3000px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
    });
    // Дополнительная анимация при наведении на продукт
    product.addEventListener('mouseenter', () => {
        product.style.filter = 'brightness(1.5)';
    });
    product.addEventListener('mouseleave', () => {
        product.style.filter = 'brightness(1)';
    });
}

// Заказ
function orderNow() {
    document.body.style.transition = 'background 0.8s';
    document.body.style.background = 'radial-gradient(circle, #00ffcc, #ff007a, #000)';
    const title = document.getElementById('cosmo-title');
    title.style.transform = 'scale(1.2)';
    setTimeout(() => {
        document.body.style.background = '#000';
        title.style.transform = 'scale(1)';
    }, 1500);
    alert('Revolut запущен. Твоя кожа — космос!');
}

// Эффекты подов
function podEffect(element) {
    element.style.transform = 'translateY(-40px) scale(1.25) translateZ(40px)';
    element.style.boxShadow = '0 0 60px rgba(0, 255, 204, 1)';
}

function podReset(element) {
    element.style.transform = 'translateY(0) scale(1) translateZ(0)';
    element.style.boxShadow = 'none';
}

function podTouch(element) {
    element.classList.add('active');
    setTimeout(() => element.classList.remove('active'), 800);
}

// Обновление размеров Canvas при изменении окна
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});