/* liquid-glass.css
 *
 * Centralised definitions for the liquid glass effect used throughout the
 * AStrokeofAi site.  Assign the `liquid-glass` class to any element
 * that should appear translucent with a frosted blur.  Additional
 * modifiers such as `liquid-glass--frosted` can be applied to
 * intensify the blur and saturation.  These styles are isolated in
 * their own file to make it easy to tweak the effect site‑wide.
 */

.liquid-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* A more intense frosted variant */
.liquid-glass--frosted {
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
}

/* Variant for buttons to remove shadows and keep consistent height */
.liquid-glass-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: none;
}