Liquid Glass Refraction

<div class="lgr-scene" id="lgrScene">
    <div class="lgr-bg">
      <span class="lgr-blob lgr-blob--1"></span>
      <span class="lgr-blob lgr-blob--2"></span>
      <span class="lgr-blob lgr-blob--3"></span>
      <span class="lgr-blob lgr-blob--4"></span>
    </div>
    <div class="lgr-glass" id="lgrGlass">
      <h3>Liquid Glass</h3>
      <p>La lumière se réfracte à travers la surface. Bougez la souris.</p>
    </div>
  </div>
  <svg width="0" height="0" aria-hidden="true" style="position:absolute">
    <filter id="lgrRefract" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise" baseFrequency="0.009 0.013" numOctaves="2" seed="7" result="noise">
        <animate attributeName="baseFrequency" dur="22s" values="0.009 0.013; 0.013 0.009; 0.009 0.013" repeatCount="indefinite"/>
      </feTurbulence>
      <feGaussianBlur in="noise" stdDeviation="1.4" result="sturb"/>
      <feDisplacementMap id="lgrDisp" in="SourceGraphic" in2="sturb" scale="26" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </svg>

.lgr-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: #0b1024;
}

.lgr-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  filter: saturate(1.1);
}

.lgr-blob {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.95;
  animation: lgr-float 14s ease-in-out infinite;
}

.lgr-blob--1 {
  background: #ff5d8f;
  top: -6%;
  left: 4%;
}

.lgr-blob--2 {
  background: #5d9bff;
  bottom: -8%;
  right: 2%;
  animation-delay: -4s;
}

.lgr-blob--3 {
  background: #3ad6b3;
  top: 28%;
  left: 38%;
  animation-delay: -8s;
}

.lgr-blob--4 {
  background: #c77dff;
  bottom: 10%;
  left: 10%;
  animation-delay: -11s;
}

.lgr-glass {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(72%, 340px);
  padding: 30px 28px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, oklch(0.98 0.02 255 / 0.20), oklch(0.94 0.04 300 / 0.07));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(var(--lgr-blur, 8px)) saturate(180%) url(#lgrRefract);
  backdrop-filter: blur(var(--lgr-blur, 8px)) saturate(180%) url(#lgrRefract);
  overflow: hidden;
}

.lgr-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120px 120px at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.45), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.8;
  transition: opacity .3s;
}

.lgr-glass h3 {
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.lgr-glass p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* Firefox et Safari ignorent TOUTE la liste backdrop-filter dès qu'elle contient url() (mesuré : ni flou ni
   saturation). Ces deux moteurs — repérés par une propriété qu'eux seuls connaissent — reçoivent le flou et la
   saturation sans la réfraction SVG, que seul Chromium applique. */
@supports (-moz-appearance: none) or (-webkit-backdrop-filter: blur(1px)) {
  .lgr-glass {
    -webkit-backdrop-filter: blur(var(--lgr-blur, 8px)) saturate(180%);
    backdrop-filter: blur(var(--lgr-blur, 8px)) saturate(180%);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lgr-glass {
    background: rgba(20, 22, 40, 0.86);
    border-color: rgba(255, 255, 255, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lgr-blob {
    animation: none;
  }

  .lgr-glass::after {
    opacity: 0.5;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .lgr-glass {
    background: #14162a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.4);
  }

  .lgr-glass::after {
    display: none;
  }
}

@keyframes lgr-float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(12%, 8%) scale(1.12);
  }

  66% {
    transform: translate(-8%, -10%) scale(0.94);
  }
}

(function() {
  /* ============================================================
     Sprint juillet 2026 — JS effets glassmorphism (5 IIFE scopées)
  ============================================================ */

  /* fx-0788 : Liquid Glass Refraction */
  (function() {
    var scene = document.getElementById('lgrScene');
    var glass = document.getElementById('lgrGlass');
    var disp = document.getElementById('lgrDisp');
    if (!scene || !glass) return;

    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    glass.addEventListener('pointermove', function(e) {
      if (reduceMotion) return;
      var r = glass.getBoundingClientRect();
      glass.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
      glass.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
    });
    glass.addEventListener('pointerleave', function() {
      glass.style.setProperty('--mx', '30%');
      glass.style.setProperty('--my', '20%');
    });

    if (reduceMotion) {
      try {
        /* la <svg> du filtre, pas la première <svg> de la page */
        disp.ownerSVGElement.pauseAnimations();
      } catch (e) {}
    }
  })();
})();