/* Cristal líquido 1
   - Render: pseudo-elemento ::before para no pisar el background nativo del contenedor.
   - El filtro real (SVG) lo crea/actualiza el JS y lo inyecta en --sexy-mj-cl1-filter.
*/

.sexy-mj-effect-cristal-liquido-1 {
  position: relative;
  overflow: hidden;
}

/* Capa del “cristal” */
.sexy-mj-effect-cristal-liquido-1::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;

  background: linear-gradient(
    135deg,
    var(--sexy-mj-cl1-grad-1, rgba(255, 255, 255, 0.20)) 0%,
    var(--sexy-mj-cl1-grad-2, rgba(255, 255, 255, 0.03)) 100%
  );

  -webkit-backdrop-filter: var(--sexy-mj-cl1-filter, none);
  backdrop-filter: var(--sexy-mj-cl1-filter, none);

  transition:
    opacity var(--sexy-mj-cl1-transition, 0.35s) ease,
    background var(--sexy-mj-cl1-transition, 0.35s) ease;
}

.sexy-mj-effect-cristal-liquido-1:hover::before {
  background: linear-gradient(
    135deg,
    var(--sexy-mj-cl1-grad-1-hover, var(--sexy-mj-cl1-grad-1, rgba(255, 255, 255, 0.20))) 0%,
    var(--sexy-mj-cl1-grad-2-hover, var(--sexy-mj-cl1-grad-2, rgba(255, 255, 255, 0.03))) 100%
  );
}