/* ==========================================================================
   122 — Liquid Distortion
   Image (scène SVG autonome) qui ondule comme sous l'eau au survol :
   feTurbulence + feDisplacementMap pilotés en rAF par le JS. Côté CSS :
   cadre, zoom doux au hover (qui masque au passage les bords déplacés) et
   saturation légère quand la distorsion est active. Le zoom doux est aussi
   le fallback sans JS et le comportement reduced-motion.
   ========================================================================== */

.liquid-distort {
  position: relative;
  margin: 0;
  width: 320px;
  max-width: 100%;
  cursor: pointer;
}

.liquid-distort__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in srgb, var(--ml-muted, #8b91a3) 18%, transparent);
  background: var(--ml-surface, #151a24);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
}

/* Hook JS : le groupe qui reçoit/perd l'attribut filter (displacement).
   La scène remplit le viewBox avec 20px de marge de chaque côté : la
   displacement map peut tirer les pixels sans découvrir de vide. */
.liquid-distort__scene {
  pointer-events: none; /* le hover vit sur la figure, pas sur les formes */
}

/* Zoom doux : fallback no-JS, comportement reduced-motion, et bonus visuel
   par-dessus la distorsion (il cache les bords déplacés). */
.liquid-distort:hover .liquid-distort__svg,
.liquid-distort:focus-visible .liquid-distort__svg {
  transform: scale(1.05);
}

/* Posée par le JS tant que le filtre est actif (hover + amortissement) */
.liquid-distort--active .liquid-distort__svg {
  filter: saturate(1.3);
}

.liquid-distort__caption {
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--ml-muted, #8b91a3);
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Reduced motion --------------------------------------------------------
   Le JS ne branche pas la distorsion ; il ne reste que le zoom doux. */
@media (prefers-reduced-motion: reduce) {
  .liquid-distort__svg {
    transition: transform 0.9s ease, filter 0.5s ease;
  }
  .liquid-distort:hover .liquid-distort__svg,
  .liquid-distort:focus-visible .liquid-distort__svg {
    transform: scale(1.03);
  }
}