<div class="fx-0609-root">
  <canvas class="pff-canvas" role="img" aria-label="Blue and violet particles following the currents of a Perlin noise field"></canvas>
</div>

.fx-0609-root,
.fx-0609-root * {
  box-sizing: border-box;
}

.fx-0609-root {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0a0f;
}

/* Fixed height by default; --pff-height also accepts 100% inside a parent of known height */
.fx-0609-root .pff-canvas {
  display: block;
  width: 100%;
  height: var(--pff-height, 300px);
}

(function () {
  // Perlin Flow Field: each particle follows the direction given by 3D Perlin noise (x, y, time).
  var SCALE = 0.0035;        // size of the currents: smaller = wider currents
  var DRIFT = 0.00009;       // how fast the field changes (noise units per ms)
  var DENSITY = 480;         // one particle per 480 px² of area
  var TRAIL = 0.05;          // share of the picture erased on each frame (60 fps): smaller = longer trails
  var LIFE = 4000;           // average particle lifetime (ms) before it is reborn elsewhere
  var HUE = 220;             // starting hue (blue); particles range from HUE to HUE + 60

  var reduced = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;

  // "Improved" Perlin noise (Ken Perlin, 2002): gradients on a 3D grid, smoothed interpolation.
  function createNoise() {
    var p = new Uint8Array(512), i, j, t;
    for (i = 0; i < 256; i++) p[i] = i;
    for (i = 255; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); t = p[i]; p[i] = p[j]; p[j] = t; }
    for (i = 0; i < 256; i++) p[i + 256] = p[i];
    function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
    function mix(a, b, t) { return a + t * (b - a); }
    function grad(h, x, y, z) {
      h &= 15;
      var u = h < 8 ? x : y;
      var v = h < 4 ? y : (h === 12 || h === 14 ? x : z);
      return ((h & 1) ? -u : u) + ((h & 2) ? -v : v);
    }
    return function (x, y, z) {
      var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z);
      x -= X; y -= Y; z -= Z;
      X &= 255; Y &= 255; Z &= 255;
      var u = fade(x), v = fade(y), w = fade(z);
      var A = p[X] + Y, AA = p[A] + Z, AB = p[A + 1] + Z;
      var B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z;
      return mix(
        mix(mix(grad(p[AA], x, y, z), grad(p[BA], x - 1, y, z), u),
            mix(grad(p[AB], x, y - 1, z), grad(p[BB], x - 1, y - 1, z), u), v),
        mix(mix(grad(p[AA + 1], x, y, z - 1), grad(p[BA + 1], x - 1, y, z - 1), u),
            mix(grad(p[AB + 1], x, y - 1, z - 1), grad(p[BB + 1], x - 1, y - 1, z - 1), u), v),
        w);
    };
  }

  function init(root) {
    // One instance per root, even if the script is pasted several times on the page.
    if (root.hasAttribute('data-pff-ready')) return;
    root.setAttribute('data-pff-ready', '');
    var canvas = root.querySelector('.pff-canvas');
    var ctx = canvas && canvas.getContext ? canvas.getContext('2d') : null;
    if (!ctx) return;
    var noise = createNoise();
    var W = 0, H = 0, ratio = 0, time = Math.random() * 100;
    var particles = [], raf = 0, last = 0, visible = true;

    // A particle is reborn at a random spot: without this, they all end up in the same currents.
    function place(q) {
      q.x = Math.random() * W;
      q.y = Math.random() * H;
      q.life = LIFE * (0.5 + Math.random());
    }

    function seed() {
      var n = Math.max(60, Math.min(3000, Math.round(W * H / DENSITY)));
      particles = [];
      for (var i = 0; i < n; i++) {
        var q = { v: 0.5 + Math.random(), c: 'hsla(' + Math.round(HUE + Math.random() * 60) + ', 80%, 60%, 0.8)' };
        place(q);
        q.life *= Math.random();
        particles.push(q);
      }
    }

    function advance(dt) {
      var k = dt / 16.667;
      // Trails fade to transparency: the visible background is the root's (CSS).
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillStyle = 'rgba(0, 0, 0, ' + (1 - Math.pow(1 - TRAIL, k)) + ')';
      ctx.fillRect(0, 0, W, H);
      ctx.globalCompositeOperation = 'source-over';
      for (var i = 0; i < particles.length; i++) {
        var q = particles[i];
        var angle = noise(q.x * SCALE, q.y * SCALE, time) * Math.PI * 4;
        q.x += Math.cos(angle) * q.v * k;
        q.y += Math.sin(angle) * q.v * k;
        if (q.x < 0) q.x += W; else if (q.x > W) q.x -= W;
        if (q.y < 0) q.y += H; else if (q.y > H) q.y -= H;
        q.life -= dt;
        if (q.life <= 0) place(q);
        ctx.fillStyle = q.c;
        ctx.beginPath();
        ctx.arc(q.x, q.y, 1, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    // Reduced motion: the field is frozen and the particles trace their streamlines once.
    function drawStill() {
      for (var i = 0; i < 160; i++) advance(16.667);
    }

    function loop(t) {
      var dt = last ? Math.min(t - last, 50) : 16.667;
      last = t;
      time += DRIFT * dt;
      advance(dt);
      raf = requestAnimationFrame(loop);
    }

    function stop() {
      if (raf) cancelAnimationFrame(raf);
      raf = 0;
    }

    function play() {
      if (raf || !W || !visible || (reduced && reduced.matches)) return;
      last = 0;
      raf = requestAnimationFrame(loop);
    }

    // Size read from the displayed area; nothing starts while it is 0 (closed tab or accordion).
    function resize(force) {
      var w = canvas.clientWidth, h = canvas.clientHeight;
      if (!w || !h) { stop(); return; }
      var r = window.devicePixelRatio || 1;
      if (force || w !== W || h !== H || r !== ratio) {
        W = w; H = h; ratio = r;
        canvas.width = Math.round(w * r);
        canvas.height = Math.round(h * r);
        ctx.setTransform(r, 0, 0, r, 0, 0);
        seed();
        if (reduced && reduced.matches) { stop(); drawStill(); }
      }
      play();
    }

    if (window.ResizeObserver) new ResizeObserver(function () { resize(false); }).observe(canvas);
    else window.addEventListener('resize', function () { resize(false); });
    if (window.IntersectionObserver) {
      new IntersectionObserver(function (entries) {
        visible = entries[entries.length - 1].isIntersecting;
        if (visible) play(); else stop();
      }).observe(canvas);
    }
    if (reduced && reduced.addEventListener) reduced.addEventListener('change', function () { stop(); resize(true); });
    resize(false);
  }

  document.querySelectorAll('.fx-0609-root').forEach(init);
})();