/* ══════════════════════════════════════
   LIQUID GLASS — habillage matière (teinte, ombre,
   highlight de bord) pour les éléments passés à
   liquidGlass() — assets/js/liquid-glass.js, vendorisé
   depuis github.com/deepika-builds/liquid-glass (MIT).

   Le module possède l'optique (displacement map canvas,
   filtre SVG feDisplacementMap x3 + chromatic fringe,
   backdrop-filter, fallback Safari/Firefox) : voir
   assets/js/liquid-glass.js. Ce fichier ne fait que
   l'habillage CSS — c'est lui qui fait "lire" l'effet
   comme du verre.

   S'adapte à la palette de chaque page via --p/--pl/--c/
   --pk/--bg déjà définis en :root.
══════════════════════════════════════ */
:where(.liquid-glass){position:relative}
.liquid-glass{
  --lg-mx:50%;--lg-my:0%;
  border-radius:0;
  isolation:isolate;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 80%, transparent),
    color-mix(in srgb, var(--bg) 65%, transparent));
  box-shadow:
    0 20px 54px rgba(0,0,0,.45),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -10px 22px rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 46px color-mix(in srgb, var(--p) 16%, transparent);
}
/* cartes/panneaux (ex: filtres discographie) : coins légèrement arrondis,
   frosted-blur CSS simple plutôt que le module (grande surface + coûteux
   à recalculer en continu au-dessus d'un fond animé) */
.liquid-glass.lg-panel{
  border-radius:26px;
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
}

/* highlight spéculaire — suit le pointeur façon lentille qui "attrape" la lumière */
.liquid-glass::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle 220px at var(--lg-mx) var(--lg-my),
    color-mix(in srgb, #fff 55%, transparent), transparent 70%);
  mix-blend-mode:overlay;
  opacity:.8;
  transition:opacity .5s;
}