<!--
Se stai leggendo questo messaggio, vuol dire che sei illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
Ciao illa.
-->


<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>ILLA:IS:INSIDE:YOU</title>
  <style>
    html, body {
      margin: 0; padding: 0;
      height: 100vh; width: 100vw;
      overflow: hidden;
      background: black;
      font-family: Arial, sans-serif;
    }
    .background-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: red;
      font-size: 10vw;
      font-weight: bold;
      text-align: center;
      line-height: 1.1;
      z-index: 0;
      pointer-events: none;
      user-select: none;
      white-space: pre-line;
    }
    .counter {
      position: absolute;
      top: 10px;
      left: 10px;
      color: white;
      font-size: 24px;
      font-weight: bold;
      z-index: 10;
      background-color: rgba(0,0,0,0.5);
      padding: 10px 15px;
      border-radius: 8px;
    }
    .illa {
      position: absolute;
      width: 150px;
      height: 150px;
      pointer-events: none;
      user-select: none;
      z-index: 1;
    }
  </style>
</head>
<body>

<div class="background-text">
  ARE YOU ILLA?
</div>

<div class="counter">ILLA: 1</div>

<script>
  let illaCount = 1;
  const imgSize = 150;
  const illas = [];
  const counterEl = document.querySelector('.counter');

  function updateCounter() {
    counterEl.textContent = `ILLA: ${illaCount}`;
  }

  function createIlla() {
    const img = document.createElement('img');
    img.src = './illailla.jpg';
    img.className = 'illa';

    const startX = Math.random() * (window.innerWidth - imgSize);
    const startY = Math.random() * (window.innerHeight - imgSize);
    const speedX = (Math.random() - 0.5) * 4;
    const speedY = (Math.random() - 0.5) * 4;

    const illa = {
      el: img,
      x: startX,
      y: startY,
      dx: speedX,
      dy: speedY
    };

    illas.push(illa);

    img.style.left = `${startX}px`;
    img.style.top = `${startY}px`;
    document.body.appendChild(img);
  }

  for(let i = 0; i < illaCount; i++) {
    createIlla();
  }

  updateCounter();

  function animate() {
    for (const p of illas) {
      p.x += p.dx;
      p.y += p.dy;

      let bounced = false;

      if (p.x <= 0 || p.x + imgSize >= window.innerWidth) {
        p.dx *= -1;
        bounced = true;
      }

      if (p.y <= 0 || p.y + imgSize >= window.innerHeight) {
        p.dy *= -1;
        bounced = true;
      }

      if (bounced) {
        illaCount++;
        updateCounter();
        createIlla();
      }

      p.el.style.left = `${p.x}px`;
      p.el.style.top = `${p.y}px`;
    }

    requestAnimationFrame(animate);
  }

  animate();

  window.addEventListener('resize', () => {
    for (const p of illas) {
      if (p.x + imgSize > window.innerWidth) p.x = window.innerWidth - imgSize;
      if (p.y + imgSize > window.innerHeight) p.y = window.innerHeight - imgSize;
    }
  });
</script>

</body>
</html>