/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 55:0 Unexpected "<"
Line 70:4 Comments in CSS use "/* ... */" instead of "//"
Line 78:4 Comments in CSS use "/* ... */" instead of "//"
Line 84:4 Comments in CSS use "/* ... */" instead of "//"
Line 90:44 Comments in CSS use "/* ... */" instead of "//"
Line 91:44 Comments in CSS use "/* ... */" instead of "//"
Line 97:4 Comments in CSS use "/* ... */" instead of "//"
Line 103:4 Comments in CSS use "/* ... */" instead of "//"
Line 108:8 Comments in CSS use "/* ... */" instead of "//"
... and 10 more hidden warnings

**/
<style>
  /* Fondo negro fijo */
  #stars-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: -10;
    overflow: hidden;
  }

  /* Canvas para las estrellas */
  #stars-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Blur opcional sobre todo (si lo quieres mantener) */
  .siteblur {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: -8;
    backdrop-filter: blur({{ section.settings.site_bg_blur }}px);
    -webkit-backdrop-filter: blur({{ section.settings.site_bg_blur }}px);
    pointer-events: none; /* Para que no interfiera con el ratón */
  }

  /* Ocultamos los elementos antiguos */
  .bgimg {
    display: none !important;
  }
</style>

<!-- Fondo con estrellas interactivas -->
<div id="stars-background">
  <canvas id="stars-canvas"></canvas>
</div>

<!-- Mantengo el blur si lo tienes activado -->
<div class="siteblur"></div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById('stars-canvas');
    const ctx = canvas.getContext('2d');

    // Ajustar tamaño del canvas
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    // Configuración de estrellas
    const starCount = 300;
    const stars = [];
    let mouseX = window.innerWidth / 2;
    let mouseY = window.innerHeight / 2;

    // Crear estrellas
    for (let i = 0; i < starCount; i++) {
      stars.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.random() * 2 + 0.5,
        speedX: Math.random() * 0.5 - 0.25, // movimiento lento horizontal
        speedY: Math.random() * 0.5 - 0.25, // movimiento lento vertical
        opacity: Math.random() * 0.8 + 0.2,
        twinkleSpeed: Math.random() * 0.02 + 0.01
      });
    }

    // Seguimiento del ratón
    document.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    });

    // Animación
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      stars.forEach(star => {
        // Efecto de interacción con el ratón (repulsión suave)
        const dx = star.x - mouseX;
        const dy = star.y - mouseY;
        const distance = Math.sqrt(dx * dx + dy * dy);
        const force = Math.max(100 - distance, 0) / 100; // fuerza máxima a 100px

        if (distance < 150) {
          star.x += (dx / distance) * force * 2;
          star.y += (dy / distance) * force * 2;
        }

        // Movimiento base (flotando)
        star.x += star.speedX;
        star.y += star.speedY;

        // Rebote en bordes
        if (star.x < 0 || star.x > canvas.width) star.speedX *= -1;
        if (star.y < 0 || star.y > canvas.height) star.speedY *= -1;

        // Parpadeo suave (twinkle)
        star.opacity += star.twinkleSpeed;
        if (star.opacity > 1 || star.opacity < 0.3) star.twinkleSpeed *= -1;

        // Dibujar estrella
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
        ctx.fill();
      });

      requestAnimationFrame(animate);
    }

    animate();
  });
</script>

{% schema %}
{
  "name": "t:sections.websitebg.name",
  "settings": [
    {
      "type": "range",
      "id": "site_bg_blur",
      "label": "t:sections.websitebg.settings.site_bg_blur.label",
      "min": 0,
      "max": 75,
      "step": 1,
      "default": 0
    }
  ]
}
{% endschema %}