<div class="fx-0619-root">
  <div class="tmv-stage">
    <video class="tmv-video" data-tmv-demo autoplay muted loop playsinline aria-hidden="true" tabindex="-1"></video>
    <h2 class="tmv-text">PLAY</h2>
  </div>
</div>

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

.fx-0619-root {
  /* Réglages : taille du texte, fond du bloc, couleurs du repli et du clip de démo */
  --tmv-size: 4rem;
  --tmv-page: #0a0a0f;
  --tmv-height: 250px;
  --tmv-c1: #6366f1;
  --tmv-c2: #d946ef;
  --tmv-c3: #06b6d4;
  --tmv-c4: #f43f5e;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tmv-height);
  overflow: hidden;
  position: relative;
  background: var(--tmv-page);
  color: #fff;
  font-family: sans-serif;
}

/* Le bloc se fond dans la page (mode screen : le noir disparaît) ; sous la vidéo, un dégradé qui défile tant qu’elle n’a pas d’image */
.fx-0619-root .tmv-stage {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background: #000;
  mix-blend-mode: screen;
}

.fx-0619-root .tmv-stage::before,
.fx-0619-root .tmv-video {
  position: absolute;
  inset: 2px;
  display: block;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  pointer-events: none;
}

.fx-0619-root .tmv-stage::before {
  content: "";
  background: linear-gradient(90deg, var(--tmv-c1), var(--tmv-c2), var(--tmv-c3), var(--tmv-c4), var(--tmv-c1)) 0 50% / 400% 100%;
  animation: tmvFlow 3s linear infinite;
}

.fx-0619-root .tmv-video {
  object-fit: cover;
}

/* Texte blanc sur noir en mode multiply : la vidéo ne reste visible que dans les lettres */
.fx-0619-root .tmv-text {
  position: relative;
  margin: 0;
  padding: .3em .45em;
  font-size: var(--tmv-size);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
  color: #fff;
  background: #000;
  mix-blend-mode: multiply;
}

/* Variante pour page claire : modes inversés (le blanc disparaît) */
.fx-0619-root.tmv-light {
  --tmv-page: #fff;
}

.fx-0619-root.tmv-light .tmv-stage {
  background: #fff;
  mix-blend-mode: multiply;
}

.fx-0619-root.tmv-light .tmv-text {
  color: #000;
  background: #fff;
  mix-blend-mode: screen;
}

/* La vidéo joue : le dégradé de repli s’arrête ; vidéo en échec : elle est masquée, le dégradé remplit le texte */
.fx-0619-root.tmv-playing .tmv-stage::before {
  animation: none;
}

.fx-0619-root.tmv-failed .tmv-video {
  visibility: hidden;
}

@keyframes tmvFlow {
  to {
    background-position: 400% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-0619-root .tmv-stage::before {
    animation: none;
  }
}

(function () {
  var reduce = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
  function reduced() { return !!(reduce && reduce.matches); }

  // Clip de démonstration généré en local (aucun fichier) : retirez data-tmv-demo et donnez un src à la vidéo
  function demoClip(root, video) {
    var canvas = document.createElement('canvas');
    if (!canvas.captureStream) return null;
    canvas.width = 480;
    canvas.height = 270;
    var ctx = canvas.getContext('2d');
    var style = getComputedStyle(root);
    var colors = ['--tmv-c1', '--tmv-c2', '--tmv-c3', '--tmv-c4'].map(function (v, i) {
      return style.getPropertyValue(v).trim() || ['#6366f1', '#d946ef', '#06b6d4', '#f43f5e'][i];
    });
    var t = 0, last = 0, raf = 0;
    function draw() {
      var w = canvas.width, h = canvas.height;
      ctx.globalCompositeOperation = 'source-over';
      ctx.fillStyle = colors[0];
      ctx.fillRect(0, 0, w, h);
      for (var i = 1; i < 4; i++) {
        var x = w * (0.5 + 0.45 * Math.sin(t * (0.35 + i * 0.12) + i * 1.9));
        var y = h * (0.5 + 0.45 * Math.cos(t * (0.45 + i * 0.1) + i * 2.4));
        var g = ctx.createRadialGradient(x, y, 0, x, y, h * 0.95);
        g.addColorStop(0, colors[i]);
        g.addColorStop(1, 'rgba(0,0,0,0)');
        ctx.fillStyle = g;
        ctx.fillRect(0, 0, w, h);
      }
      ctx.globalCompositeOperation = 'lighter';
      for (var k = 0; k < 3; k++) {
        var bx = ((t * 70 + k * 190) % (w + 160)) - 80;
        var beam = ctx.createLinearGradient(bx - 50, 0, bx + 50, 0);
        beam.addColorStop(0, 'rgba(255,255,255,0)');
        beam.addColorStop(0.5, 'rgba(255,255,255,0.28)');
        beam.addColorStop(1, 'rgba(255,255,255,0)');
        ctx.fillStyle = beam;
        ctx.fillRect(bx - 50, 0, 100, h);
      }
    }
    function loop(now) {
      var dt = last ? Math.min(50, now - last) : 16;
      last = now;
      t += dt / 1000;
      draw();
      raf = requestAnimationFrame(loop);
    }
    draw();
    video.srcObject = canvas.captureStream(30);
    return {
      start: function () { if (!raf) { last = 0; raf = requestAnimationFrame(loop); } },
      stop: function () { cancelAnimationFrame(raf); raf = 0; },
      still: function () { draw(); }
    };
  }

  function init(root) {
    if (root.dataset.tmvReady) return;
    root.dataset.tmvReady = '1';
    var video = root.querySelector('.tmv-video');
    if (!video) return;
    var clip = null;
    if (video.hasAttribute('data-tmv-demo') && !video.getAttribute('src') && !video.querySelector('source')) {
      clip = demoClip(root, video);
    }
    var auto = video.autoplay;
    var visible = true, heldOff = false;
    // Classe tmv-playing dès qu’une image de la vidéo est affichée ; mouvement réduit = première image figée
    video.addEventListener('playing', function () {
      root.classList.add('tmv-playing');
      if (reduced()) video.pause();
    });
    video.addEventListener('play', function () { if (clip) clip.start(); });
    video.addEventListener('pause', function () { if (clip) clip.stop(); });
    video.addEventListener('emptied', function () { root.classList.remove('tmv-playing'); });
    // Aucune source lisible (fichier absent, format refusé) : classe tmv-failed, le texte garde le dégradé
    video.addEventListener('error', function () {
      setTimeout(function () {
        if (video.error || video.networkState === 3) {
          root.classList.remove('tmv-playing');
          root.classList.add('tmv-failed');
        }
      }, 0);
    }, true);
    video.addEventListener('canplay', function () {
      if (auto && visible && !heldOff && !reduced() && video.paused) {
        var c = video.play();
        if (c && c.catch) c.catch(function () {});
      }
    }, { once: true });

    function settle() {
      if (reduced()) {
        if (!root.classList.contains('tmv-playing')) {
          if (clip) clip.still();
          var p = video.play();
          if (p && p.catch) p.catch(function () {});
        } else {
          video.pause();
        }
      } else if (auto && visible) {
        var q = video.play();
        if (q && q.catch) q.catch(function () {});
      }
    }
    // Hors de l’écran, la vidéo se met en pause ; une vidéo en lecture automatique reprend au retour
    if ('IntersectionObserver' in window) {
      new IntersectionObserver(function (entries) {
        visible = entries[0].isIntersecting;
        if (!visible && !video.paused) { heldOff = auto; video.pause(); }
        else if (visible && heldOff) { heldOff = false; if (!reduced()) { var r = video.play(); if (r && r.catch) r.catch(function () {}); } }
      }).observe(root);
    }
    if (reduce && reduce.addEventListener) reduce.addEventListener('change', settle);
    settle();
  }

  function start() { document.querySelectorAll('.fx-0619-root').forEach(init); }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
  else start();
})();