From fa4a3d91aab5de9cd5cc931ad1676f63ecd85259 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@local>
Date: Wed, 16 Sep 2026 17:36:54 +0200
Subject: [PATCH] feat(portfolio): add mp-card--reflect variant (full-bleed
 image, mirror, progressive blur+tint), apply to Portfolio block + specimen

---
 public/cases/design-system/index.html         | 10 +--
 .../cases/template-elements-demo/index.html   | 20 ++++--
 public/css/main.css                           | 69 +++++++++++++++++++
 public/en/cases/design-system/index.html      | 10 +--
 .../cases/template-elements-demo/index.html   | 20 ++++--
 public/en/index.html                          | 20 ++++--
 public/index.html                             | 20 ++++--
 src/pages/cases/design-system.en.html         | 10 +--
 src/pages/cases/design-system.html            | 10 +--
 src/partials/projects-section-mp.en.html      | 20 ++++--
 src/partials/projects-section-mp.html         | 20 ++++--
 11 files changed, 167 insertions(+), 62 deletions(-)

diff --git a/public/cases/design-system/index.html b/public/cases/design-system/index.html
index 6fcf39e..c0b4781 100644
--- a/public/cases/design-system/index.html
+++ b/public/cases/design-system/index.html
@@ -937,9 +937,9 @@
         </div>
         <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
 
-        <h3>Карточка портфолио — bleed (mp-card)</h3>
+        <h3>Карточка портфолио — reflect (mp-card)</h3>
         <div class="sg-portfolio-wrap">
-          <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
+          <a class="mp-card mp-card--link mp-card--reflect" href="#components" tabindex="-1" aria-hidden="true" style="--card-cover:url('../../assets/shared/placeholder.webp')">
             <div class="mp-card__media" aria-hidden="true">
               <img
                 class="mp-card__image"
@@ -951,16 +951,16 @@
               />
             </div>
             <div class="mp-card__body">
-              <h3 class="mp-card__title">mp-card--bleed</h3>
+              <h3 class="mp-card__title">mp-card--reflect</h3>
               <ul class="mp-card__tags" aria-label="Теги">
                 <li class="mp-card__tag">Демо</li>
                 <li class="mp-card__tag">UI</li>
               </ul>
-              <p class="mp-card__desc">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
+              <p class="mp-card__desc">Картинка на всю карточку, зеркальное отражение снизу, прогрессивное размытие и тонировка снизу вверх; текст в нижней части.</p>
             </div>
           </a>
         </div>
-        <p class="sg-label">.mp-card--bleed — текст сверху, изображение bleed внизу справа</p>
+        <p class="sg-label">.mp-card--reflect — полноразмерная картинка, отражение и размытие снизу</p>
 
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
diff --git a/public/cases/template-elements-demo/index.html b/public/cases/template-elements-demo/index.html
index bf398cc..1a3dc2a 100644
--- a/public/cases/template-elements-demo/index.html
+++ b/public/cases/template-elements-demo/index.html
@@ -692,7 +692,7 @@
           <h2 class="section__title">Портфолио</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -715,7 +715,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -738,7 +738,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -761,7 +761,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -784,7 +784,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -806,7 +806,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -829,7 +829,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -853,6 +853,12 @@
             </li>
           </ol>
         </div>
+      <script>
+        document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
+          var i = c.querySelector('.mp-card__image');
+          if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
+        });
+      </script>
       </section><section hidden class="section section--surface" aria-hidden="true">
         <div class="section__inner">
           <div class="projects__heading">
diff --git a/public/css/main.css b/public/css/main.css
index d110e39..1d5c440 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -3441,6 +3441,75 @@ html[data-theme="light"] .hero__portrait-shell {
 .mp-card--bleed .mp-card__desc { order: 1; }
 .mp-card--bleed .mp-card__tags { order: 2; }
 
+/* Вариант: картинка на всю карточку, зеркальное отражение снизу,
+   прогрессивное размытие + тонировка цветом карточки снизу вверх;
+   текст поверх в нижней части. */
+.mp-card--reflect {
+  position: relative;
+  flex-direction: column;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
+.mp-card--reflect .mp-card__media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  overflow: hidden;
+}
+.mp-card--reflect .mp-card__image {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+  object-fit: cover;
+}
+/* прогрессивное размытие + тонировка снизу вверх */
+.mp-card--reflect::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: color-mix(in srgb, var(--card) 60%, transparent);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 85%);
+  mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 85%);
+  pointer-events: none;
+}
+/* зеркальное отображение (отражение) внизу */
+.mp-card--reflect::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 45%;
+  z-index: 1;
+  background-image: var(--card-cover);
+  background-size: cover;
+  background-position: center;
+  transform: scaleY(-1);
+  transform-origin: bottom;
+  opacity: 0.55;
+  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
+  pointer-events: none;
+}
+.mp-card--reflect .mp-card__body {
+  position: relative;
+  z-index: 2;
+  margin-top: auto;
+  padding: 1.2rem 1.35rem 1.3rem;
+}
+.mp-card--reflect .mp-card__title { order: 0; }
+.mp-card--reflect .mp-card__desc { order: 1; }
+.mp-card--reflect .mp-card__tags { order: 2; }
+
 .mp-card--horizontal {
   flex-direction: row;
   align-items: stretch;
diff --git a/public/en/cases/design-system/index.html b/public/en/cases/design-system/index.html
index 6a3f428..c0b63a4 100644
--- a/public/en/cases/design-system/index.html
+++ b/public/en/cases/design-system/index.html
@@ -936,9 +936,9 @@
         </div>
         <p class="sg-label">.portfolio-card and child BEM classes</p>
 
-        <h3>Portfolio Card — bleed (mp-card)</h3>
+        <h3>Portfolio Card — reflect (mp-card)</h3>
         <div class="sg-portfolio-wrap">
-          <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
+          <a class="mp-card mp-card--link mp-card--reflect" href="#components" tabindex="-1" aria-hidden="true" style="--card-cover:url('../../../assets/shared/placeholder.webp')">
             <div class="mp-card__media" aria-hidden="true">
               <img
                 class="mp-card__image"
@@ -950,16 +950,16 @@
               />
             </div>
             <div class="mp-card__body">
-              <h3 class="mp-card__title">mp-card--bleed</h3>
+              <h3 class="mp-card__title">mp-card--reflect</h3>
               <ul class="mp-card__tags" aria-label="Tags">
                 <li class="mp-card__tag">Demo</li>
                 <li class="mp-card__tag">UI</li>
               </ul>
-              <p class="mp-card__desc">Image pinned to the bottom-right corner, no padding; corner is rounded by the card.</p>
+              <p class="mp-card__desc">Full-bleed image, mirror reflection at the bottom, progressive blur and card-color tint from bottom up; text in the lower part.</p>
             </div>
           </a>
         </div>
-        <p class="sg-label">.mp-card--bleed — text on top, image bleeds bottom-right</p>
+        <p class="sg-label">.mp-card--reflect — full-bleed image, reflection and blur at the bottom</p>
 
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
diff --git a/public/en/cases/template-elements-demo/index.html b/public/en/cases/template-elements-demo/index.html
index 2883166..38bd17a 100644
--- a/public/en/cases/template-elements-demo/index.html
+++ b/public/en/cases/template-elements-demo/index.html
@@ -692,7 +692,7 @@
           <h2 class="section__title">Portfolio</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../ai-platform-primo-rpa/" aria-label="AI platform — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../ai-platform-primo-rpa/" aria-label="AI platform — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -715,7 +715,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../lunacy/" aria-label="Graphics editor Lunacy — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../lunacy/" aria-label="Graphics editor Lunacy — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -738,7 +738,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../manu-game-maker/" aria-label="MANU game engine — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../manu-game-maker/" aria-label="MANU game engine — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -761,7 +761,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -784,7 +784,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -806,7 +806,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-distribution-concept/" aria-label="Task distribution service concept — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../task-distribution-concept/" aria-label="Task distribution service concept — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -829,7 +829,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-tracker/" aria-label="Task tracker for a back-office system — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="../task-tracker/" aria-label="Task tracker for a back-office system — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -853,6 +853,12 @@
             </li>
           </ol>
         </div>
+      <script>
+        document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
+          var i = c.querySelector('.mp-card__image');
+          if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
+        });
+      </script>
       </section>
 <section hidden class="section section--surface" aria-hidden="true">
         <div class="section__inner">
diff --git a/public/en/index.html b/public/en/index.html
index 65a6f51..6166794 100644
--- a/public/en/index.html
+++ b/public/en/index.html
@@ -303,7 +303,7 @@
           <h2 class="section__title">Portfolio</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/ai-platform-primo-rpa/" aria-label="AI platform — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/ai-platform-primo-rpa/" aria-label="AI platform — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -326,7 +326,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/lunacy/" aria-label="Graphics editor Lunacy — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/lunacy/" aria-label="Graphics editor Lunacy — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -349,7 +349,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/manu-game-maker/" aria-label="MANU game engine — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/manu-game-maker/" aria-label="MANU game engine — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -372,7 +372,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -395,7 +395,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -417,7 +417,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-distribution-concept/" aria-label="Task distribution service concept — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/task-distribution-concept/" aria-label="Task distribution service concept — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -440,7 +440,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-tracker/" aria-label="Task tracker for a back-office system — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/task-tracker/" aria-label="Task tracker for a back-office system — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -464,6 +464,12 @@
             </li>
           </ol>
         </div>
+      <script>
+        document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
+          var i = c.querySelector('.mp-card__image');
+          if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
+        });
+      </script>
       </section>
 <section hidden class="section section--surface" aria-hidden="true">
         <div class="section__inner">
diff --git a/public/index.html b/public/index.html
index 76ec2a8..a50cc05 100644
--- a/public/index.html
+++ b/public/index.html
@@ -303,7 +303,7 @@
           <h2 class="section__title">Портфолио</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -326,7 +326,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -349,7 +349,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -372,7 +372,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -395,7 +395,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -417,7 +417,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -440,7 +440,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -464,6 +464,12 @@
             </li>
           </ol>
         </div>
+      <script>
+        document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
+          var i = c.querySelector('.mp-card__image');
+          if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
+        });
+      </script>
       </section><section hidden class="section section--surface" aria-hidden="true">
         <div class="section__inner">
           <div class="projects__heading">
diff --git a/src/pages/cases/design-system.en.html b/src/pages/cases/design-system.en.html
index 69e2c94..b4403d2 100644
--- a/src/pages/cases/design-system.en.html
+++ b/src/pages/cases/design-system.en.html
@@ -748,9 +748,9 @@
         </div>
         <p class="sg-label">.portfolio-card and child BEM classes</p>
 
-        <h3>Portfolio Card — bleed (mp-card)</h3>
+        <h3>Portfolio Card — reflect (mp-card)</h3>
         <div class="sg-portfolio-wrap">
-          <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
+          <a class="mp-card mp-card--link mp-card--reflect" href="#components" tabindex="-1" aria-hidden="true" style="--card-cover:url('{{assetPrefix}}assets/shared/placeholder.webp')">
             <div class="mp-card__media" aria-hidden="true">
               <img
                 class="mp-card__image"
@@ -762,16 +762,16 @@
               />
             </div>
             <div class="mp-card__body">
-              <h3 class="mp-card__title">mp-card--bleed</h3>
+              <h3 class="mp-card__title">mp-card--reflect</h3>
               <ul class="mp-card__tags" aria-label="Tags">
                 <li class="mp-card__tag">Demo</li>
                 <li class="mp-card__tag">UI</li>
               </ul>
-              <p class="mp-card__desc">Image pinned to the bottom-right corner, no padding; corner is rounded by the card.</p>
+              <p class="mp-card__desc">Full-bleed image, mirror reflection at the bottom, progressive blur and card-color tint from bottom up; text in the lower part.</p>
             </div>
           </a>
         </div>
-        <p class="sg-label">.mp-card--bleed — text on top, image bleeds bottom-right</p>
+        <p class="sg-label">.mp-card--reflect — full-bleed image, reflection and blur at the bottom</p>
 
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
diff --git a/src/pages/cases/design-system.html b/src/pages/cases/design-system.html
index b63f505..872e0b9 100644
--- a/src/pages/cases/design-system.html
+++ b/src/pages/cases/design-system.html
@@ -749,9 +749,9 @@
         </div>
         <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
 
-        <h3>Карточка портфолио — bleed (mp-card)</h3>
+        <h3>Карточка портфолио — reflect (mp-card)</h3>
         <div class="sg-portfolio-wrap">
-          <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
+          <a class="mp-card mp-card--link mp-card--reflect" href="#components" tabindex="-1" aria-hidden="true" style="--card-cover:url('{{assetPrefix}}assets/shared/placeholder.webp')">
             <div class="mp-card__media" aria-hidden="true">
               <img
                 class="mp-card__image"
@@ -763,16 +763,16 @@
               />
             </div>
             <div class="mp-card__body">
-              <h3 class="mp-card__title">mp-card--bleed</h3>
+              <h3 class="mp-card__title">mp-card--reflect</h3>
               <ul class="mp-card__tags" aria-label="Теги">
                 <li class="mp-card__tag">Демо</li>
                 <li class="mp-card__tag">UI</li>
               </ul>
-              <p class="mp-card__desc">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
+              <p class="mp-card__desc">Картинка на всю карточку, зеркальное отражение снизу, прогрессивное размытие и тонировка снизу вверх; текст в нижней части.</p>
             </div>
           </a>
         </div>
-        <p class="sg-label">.mp-card--bleed — текст сверху, изображение bleed внизу справа</p>
+        <p class="sg-label">.mp-card--reflect — полноразмерная картинка, отражение и размытие снизу</p>
 
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
diff --git a/src/partials/projects-section-mp.en.html b/src/partials/projects-section-mp.en.html
index c057879..5a8464c 100644
--- a/src/partials/projects-section-mp.en.html
+++ b/src/partials/projects-section-mp.en.html
@@ -3,7 +3,7 @@
           <h2 class="section__title">Portfolio</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -26,7 +26,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -49,7 +49,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -72,7 +72,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -95,7 +95,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -117,7 +117,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -140,7 +140,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -164,4 +164,10 @@
             </li>
           </ol>
         </div>
+      <script>
+        document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
+          var i = c.querySelector('.mp-card__image');
+          if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
+        });
+      </script>
       </section>
diff --git a/src/partials/projects-section-mp.html b/src/partials/projects-section-mp.html
index 0fc7b8b..760809d 100644
--- a/src/partials/projects-section-mp.html
+++ b/src/partials/projects-section-mp.html
@@ -3,7 +3,7 @@
           <h2 class="section__title">Портфолио</h2>
           <ol class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -26,7 +26,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -49,7 +49,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -72,7 +72,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -95,7 +95,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -117,7 +117,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -140,7 +140,7 @@
               </a>
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
-              <a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+              <a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
                 <div class="mp-card__media" aria-hidden="true">
                   <img
                     class="mp-card__image"
@@ -164,4 +164,10 @@
             </li>
           </ol>
         </div>
+      <script>
+        document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
+          var i = c.querySelector('.mp-card__image');
+          if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
+        });
+      </script>
       </section>
\ No newline at end of file