From 2e6451e683e9daee2fd33660729a7f41b66e4608 Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Thu, 24 Sep 2026 15:20:34 +0200
Subject: [PATCH] =?UTF-8?q?feat(glass):=20displacement-=D1=81=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BA=D0=BB=D0=BE=20=D0=BD=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=85=20(btn--primary/fab--primary/secondary/ghost?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- primary/fab: полупрозрачный акцентный фон (--btn-primary-bg-lg/-hover-bg-lg, ~82-86%), иначе displacement не виден
- токены --btn-primary-backdrop-lg / -hover-lg = url(#filter) blur()+saturate()
- secondary/ghost: displacement через --v12-glass-neutral-filter-lg
- всё в @supports not (hanging-punctuation:first) — Chromium-only, Safari/Firefox держат чистый blur
---
 public/css/main.css | 76 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/public/css/main.css b/public/css/main.css
index 6db756a..21abc88 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -114,6 +114,20 @@ html[data-theme="dark"] {
     inset 0 -1px 0 color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 18%, transparent);
   --btn-primary-backdrop: blur(16px) saturate(135%);
   --btn-primary-backdrop-hover: blur(18px) saturate(140%);
+  /* Liquid Glass (Хабр): displacement + blur — только Chromium */
+  --btn-primary-backdrop-lg: url(#liquid-glass-displacement) blur(15px) saturate(135%);
+  --btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement) blur(17px) saturate(140%);
+  /* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */
+  --btn-primary-bg-lg: radial-gradient(
+    circle at 0% 0%,
+    color-mix(in hsl, var(--accent), white 10%) 0%,
+    color-mix(in srgb, var(--accent) 82%, transparent) 100%
+  );
+  --btn-primary-hover-bg-lg: radial-gradient(
+    circle at 0% 0%,
+    color-mix(in hsl, var(--accent), white 14%) 0%,
+    color-mix(in srgb, var(--accent) 86%, transparent) 100%
+  );
   --btn-primary-sheen: linear-gradient(
     155deg,
     hsla(0, 0%, 100%, 0.1) 0%,
@@ -206,6 +220,20 @@ html[data-theme="light"] {
     inset 0 -1px 0 color-mix(in srgb, var(--accent) 32%, hsl(0 0% 0%) 68%);
   --btn-primary-backdrop: blur(10px) saturate(142%);
   --btn-primary-backdrop-hover: blur(11px) saturate(148%);
+  /* Liquid Glass (Хабр): displacement + blur — только Chromium */
+  --btn-primary-backdrop-lg: url(#liquid-glass-displacement) blur(9px) saturate(142%);
+  --btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement) blur(10px) saturate(148%);
+  /* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */
+  --btn-primary-bg-lg: radial-gradient(
+    circle at 0% 0%,
+    color-mix(in hsl, var(--accent), white 10%) 0%,
+    color-mix(in srgb, var(--accent) 82%, transparent) 100%
+  );
+  --btn-primary-hover-bg-lg: radial-gradient(
+    circle at 0% 0%,
+    color-mix(in hsl, var(--accent), white 14%) 0%,
+    color-mix(in srgb, var(--accent) 86%, transparent) 100%
+  );
   --btn-primary-sheen: linear-gradient(
     155deg,
     color-mix(in srgb, var(--accent) 55%, hsl(0 0% 100%) 45%) 0%,
@@ -5199,6 +5227,54 @@ html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible {
     backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
     -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
   }
+
+  /* Кнопки: primary/fab — акцентное стекло + displacement;
+     secondary/ghost — нейтральное стекло + displacement */
+  html[data-theme="dark"] .btn--primary,
+  html[data-theme="light"] .btn--primary,
+  html[data-theme="dark"] .fab--primary,
+  html[data-theme="light"] .fab--primary {
+    background: var(--btn-primary-bg-lg);
+    backdrop-filter: var(--btn-primary-backdrop-lg);
+    -webkit-backdrop-filter: var(--btn-primary-backdrop-lg);
+  }
+
+  html[data-theme="dark"] .btn--primary:hover,
+  html[data-theme="dark"] .btn--primary:focus-visible,
+  html[data-theme="light"] .btn--primary:hover,
+  html[data-theme="light"] .btn--primary:focus-visible,
+  html[data-theme="dark"] a.btn--primary:visited:hover,
+  html[data-theme="light"] a.btn--primary:visited:hover,
+  html[data-theme="dark"] .fab--primary:hover,
+  html[data-theme="dark"] .fab--primary:focus-visible,
+  html[data-theme="light"] .fab--primary:hover,
+  html[data-theme="light"] .fab--primary:focus-visible,
+  html[data-theme="dark"] a.fab--primary:visited,
+  html[data-theme="light"] a.fab--primary:visited {
+    background: var(--btn-primary-hover-bg-lg);
+    backdrop-filter: var(--btn-primary-backdrop-hover-lg);
+    -webkit-backdrop-filter: var(--btn-primary-backdrop-hover-lg);
+  }
+
+  html[data-theme="dark"] .btn--secondary,
+  html[data-theme="light"] .btn--secondary,
+  html[data-theme="dark"] .btn--ghost,
+  html[data-theme="light"] .btn--ghost {
+    backdrop-filter: var(--v12-glass-neutral-filter-lg);
+    -webkit-backdrop-filter: var(--v12-glass-neutral-filter-lg);
+  }
+
+  html[data-theme="dark"] .btn--secondary:hover,
+  html[data-theme="dark"] .btn--secondary:focus-visible,
+  html[data-theme="light"] .btn--secondary:hover,
+  html[data-theme="light"] .btn--secondary:focus-visible,
+  html[data-theme="dark"] .btn--ghost:hover,
+  html[data-theme="dark"] .btn--ghost:focus-visible,
+  html[data-theme="light"] .btn--ghost:hover,
+  html[data-theme="light"] .btn--ghost:focus-visible {
+    backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
+    -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
+  }
 }
 
 html[data-theme="dark"] .nav-more__dock,