.liquid-glass {
  position: relative;
  overflow: hidden;

  background: #000;

  border: 1px solid var(--mi-glass-border);
  border-radius: 28px;

  color: var(--mi-text-main);

  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);

  box-shadow:
    0 1px 0 var(--mi-glass-highlight) inset,
    0 0 0 1px var(--mi-glass-inner-light) inset,
    0 24px 70px var(--mi-shadow-deep),
    0 8px 24px var(--mi-glow-blue);

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.06) 28%,
      transparent 56%
    );

  opacity: 0.72;
}

.liquid-glass:hover {
  background: #000;

  border-color: var(--mi-glass-border-strong);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 0 0 1px rgba(255, 255, 255, 0.11) inset,
    0 30px 90px rgba(0, 0, 0, 0.62),
    0 10px 34px rgba(72, 240, 228, 0.18);

  transform: translateY(-2px);
}