<div class="fx-0803-root">
  <div class="goo-scene" data-goo data-color="#c81e2d">
    <canvas class="goo-canvas" aria-hidden="true"></canvas>
    <div class="goo-hint" aria-hidden="true">Balaye le sang…</div>
  </div>
</div>

.fx-0803-root,
.fx-0803-root *,
.fx-0803-root *::before,
.fx-0803-root *::after {
  box-sizing: border-box
}

.fx-0803-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  position: relative;
  background: rgb(10, 10, 15);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.goo-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background: #0b0406;
  cursor: crosshair;
  touch-action: none;
}

.goo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: blur(7px) contrast(16);
}

.goo-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 12px;
  color: #ff5a5a;
  opacity: .85;
  white-space: nowrap;
  pointer-events: none;
}

(function() {
  /* ============================================================
     JS scopé (IIFE) — Cursed Blood Goo (fx-0803)
     Metaballs de sang sur chaque [data-goo]
  ============================================================ */
  (function() {
    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
    var MAX = 130;

    document.querySelectorAll('.fx-0803-root [data-goo]').forEach(function(scene) {
      var canvas = scene.querySelector('.goo-canvas');
      var ctx = canvas.getContext('2d');
      var dpr = Math.min(window.devicePixelRatio || 1, 2);
      var W = 0, H = 0, drops = [], pool = 0, t = 0, drip = 0;
      var mx = -999, my = -999, on = false, bx = -999, by = -999, pmx = -999, pmy = -999;
      var visible = true, raf = 0, last = 0, awake = 0;

      function blob(x, y, r) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 6.2832);
        ctx.fill();
      }

      function render() {
        if (!W || !H) return;
        ctx.fillStyle = '#0b0406';
        ctx.fillRect(0, 0, W, H);
        ctx.fillStyle = scene.dataset.color || '#c81e2d';
        // flaque (surface ondulée)
        var surf = H - pool;
        ctx.beginPath();
        ctx.moveTo(0, H + 2);
        ctx.lineTo(0, surf);
        for (var x = 0; x <= W + 18 * dpr; x += 18 * dpr) ctx.lineTo(x, surf + Math.sin(x * 0.012 + t * 3) * 6 * dpr);
        ctx.lineTo(W, H + 2);
        ctx.closePath();
        ctx.fill();
        // gouttes
        for (var i = 0; i < drops.length; i++) blob(drops[i].x, drops[i].y, drops[i].r);
        // glob du pointeur
        if (on) blob(bx, by, 34 * dpr);
      }

      function resize() {
        var w = Math.round(scene.clientWidth * dpr);
        var h = Math.round(scene.clientHeight * dpr);
        if (!w || !h || (w === W && h === H)) return;
        if (H) pool = pool * h / H;
        else if (reduce.matches) {
          // mouvement réduit : flaque et gouttes posées d'emblée, rien ne bouge sans le pointeur
          pool = h * 0.22;
          for (var i = 0; i < 9; i++) drops.push({
            x: (0.12 + Math.random() * 0.76) * w,
            y: (0.2 + Math.random() * 0.45) * h,
            vx: 0,
            vy: 0,
            r: (12 + Math.random() * 14) * dpr
          });
        }
        W = canvas.width = w;
        H = canvas.height = h;
        render();
      }

      // f = durée de l'image en images à 60 i/s (bornée à 50 ms) : même vitesse à 60, 120 ou 144 Hz
      function step(f) {
        t += f / 60;
        // dégoulinade depuis le haut (une goutte toutes les 11/60 s), coupée en mouvement réduit
        if (!reduce.matches) {
          drip += f;
          while (drip >= 11) {
            drip -= 11;
            if (drops.length < MAX) drops.push({
              x: Math.random() * W,
              y: -12 * dpr,
              vx: (Math.random() - 0.5) * 0.5,
              vy: 1 + Math.random() * 1.4,
              r: (9 + Math.random() * 9) * dpr
            });
          }
        }
        var floorY = H - pool, damp = Math.pow(0.99, f);
        for (var i = drops.length - 1; i >= 0; i--) {
          var d = drops[i];
          d.vy += 0.28 * dpr * f;
          d.vx *= damp;
          if (on) {
            var ax = mx - d.x,
              ay = my - d.y,
              dist = Math.hypot(ax, ay);
            if (dist < 150 * dpr && dist > 1) {
              var k = (1 - dist / (150 * dpr)) * 0.7 * f;
              d.vx += ax / dist * k;
              d.vy += ay / dist * k;
            }
          }
          d.x += d.vx * f;
          d.y += d.vy * f;
          if (d.y + d.r * 0.4 >= floorY) {
            // chaque goutte nourrit la flaque (part de la hauteur, quelle que soit la largeur)
            pool = Math.min(H * 0.5, pool + H * 0.012 * d.r * d.r / (169 * dpr * dpr));
            drops.splice(i, 1);
            continue;
          }
          if (d.x < -40 * dpr || d.x > W + 40 * dpr) drops.splice(i, 1);
        }
        // la flaque s'écoule doucement : elle monte jusqu'à un équilibre (≈ 20 % de la hauteur)
        pool -= pool * 0.3 * f / 60;
        if (on) {
          var e = 1 - Math.pow(0.7, f);
          bx += (mx - bx) * e;
          by += (my - by) * e;
          var sp = Math.hypot(mx - pmx, my - pmy) / f;
          if (sp > 13 * dpr && drops.length < MAX) drops.push({
            x: bx + (Math.random() - 0.5) * 22 * dpr,
            y: by + (Math.random() - 0.5) * 22 * dpr,
            vx: (mx - pmx) / f * 0.07,
            vy: (my - pmy) / f * 0.07 + 1,
            r: (6 + Math.random() * 6) * dpr
          });
        }
        pmx = mx;
        pmy = my;
      }

      function frame(now) {
        raf = 0;
        var f = last ? Math.min(now - last, 50) * 0.06 : 1;
        last = now;
        step(f);
        render();
        sync();
      }

      // boucle en pause hors écran / onglet caché ; en mouvement réduit, elle ne tourne que 1,5 s après un geste
      function sync() {
        var run = visible && !document.hidden && W > 0 && (!reduce.matches || performance.now() < awake);
        if (run && !raf) raf = requestAnimationFrame(frame);
        if (!run) {
          if (raf) cancelAnimationFrame(raf);
          raf = 0;
          last = 0;
        }
      }

      function point(e) {
        var r = scene.getBoundingClientRect();
        mx = (e.clientX - r.left) * dpr;
        my = (e.clientY - r.top) * dpr;
        if (!on) {
          bx = pmx = mx;
          by = pmy = my;
        }
        on = true;
        awake = performance.now() + 1500;
        sync();
      }

      function leave() {
        on = false;
        mx = my = -999;
      }

      scene.addEventListener('pointerdown', point);
      scene.addEventListener('pointermove', point);
      scene.addEventListener('pointerleave', leave);
      scene.addEventListener('pointercancel', leave);

      resize();
      if ('ResizeObserver' in window) new ResizeObserver(function() {
        resize();
        sync();
      }).observe(scene);
      else window.addEventListener('resize', resize);
      if ('IntersectionObserver' in window) {
        new IntersectionObserver(function(entries) {
          visible = entries[0].isIntersecting;
          sync();
        }).observe(scene);
      }
      if ('MutationObserver' in window) new MutationObserver(render).observe(scene, {
        attributes: true,
        attributeFilter: ['data-color']
      });
      document.addEventListener('visibilitychange', sync);
      if (reduce.addEventListener) reduce.addEventListener('change', sync);
      sync();
    });
  })();
})();