fix(portfolio): mp-card--reflect — use --surface (was undefined --card) for tint, fix pseudo-element stacking; regenerate broken placeholder

- new .portfolio-card--bleed: image pinned bottom-right, no padding,
  corner rounded by card (overflow:hidden)
- design-system catalog: add bleed specimen (ru/en)
- projects-section (ru/en): portfolio cards now use --bleed

public/cases/ai-platform-primo-rpa-2/index.html

@@ -785,7 +785,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -811,7 +811,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -837,7 +837,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -863,7 +863,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -889,7 +889,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -915,7 +915,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -941,7 +941,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -967,7 +967,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/ai-platform-primo-rpa-v2/index.html

@@ -915,7 +915,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -941,7 +941,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -967,7 +967,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -993,7 +993,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -1019,7 +1019,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -1045,7 +1045,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -1071,7 +1071,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -1097,7 +1097,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/ai-platform-primo-rpa/index.html

@@ -949,7 +949,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -975,7 +975,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -1001,7 +1001,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -1027,7 +1027,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -1053,7 +1053,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -1079,7 +1079,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -1105,7 +1105,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -1131,7 +1131,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/design-system/index.html

@@ -937,6 +937,31 @@
         </div>
         <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
 
+        <h3>Карточка портфолио — reflect (mp-card)</h3>
+        <div class="sg-portfolio-wrap">
+          <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"
+                src="../../assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                decoding="async"
+              />
+            </div>
+            <div class="mp-card__body">
+              <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>
+            </div>
+          </a>
+        </div>
+        <p class="sg-label">.mp-card--reflect — полноразмерная картинка, отражение и размытие снизу</p>
+
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
           Пока <code>img</code> ещё не загрузился, <code>initImageLoadPlaceholder</code> вешает

public/cases/lunacy/index.html

@@ -737,7 +737,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -763,7 +763,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -789,7 +789,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -815,7 +815,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -841,7 +841,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -867,7 +867,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -893,7 +893,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -919,7 +919,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/manu-game-maker/index.html

@@ -479,7 +479,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -505,7 +505,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -531,7 +531,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -557,7 +557,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -583,7 +583,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -609,7 +609,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -635,7 +635,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -661,7 +661,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/mobile-clinic-app/index.html

@@ -479,7 +479,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -505,7 +505,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -531,7 +531,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -557,7 +557,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -583,7 +583,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -609,7 +609,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -635,7 +635,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -661,7 +661,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/obsidian-plugin-columns-view/index.html

@@ -513,7 +513,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -539,7 +539,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -565,7 +565,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -591,7 +591,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -617,7 +617,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -643,7 +643,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -669,7 +669,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -695,7 +695,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/orc-automation-panel/index.html

@@ -618,7 +618,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -644,7 +644,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -670,7 +670,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -696,7 +696,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -722,7 +722,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -748,7 +748,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -774,7 +774,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -800,7 +800,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/task-distribution-concept/index.html

@@ -479,7 +479,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -505,7 +505,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -531,7 +531,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -557,7 +557,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -583,7 +583,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -609,7 +609,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -635,7 +635,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -661,7 +661,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/cases/task-tracker/index.html

@@ -907,7 +907,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -933,7 +933,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -959,7 +959,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -985,7 +985,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -1011,7 +1011,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -1037,7 +1037,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -1063,7 +1063,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -1089,7 +1089,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

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" 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" 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" 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" 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" 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" 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" 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">
@@ -871,7 +877,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -897,7 +903,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -923,7 +929,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -949,7 +955,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -975,7 +981,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -1001,7 +1007,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -1027,7 +1033,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -1053,7 +1059,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

public/css/main.css

@@ -3409,6 +3409,123 @@ html[data-theme="light"] .hero__portrait-shell {
   aspect-ratio: 16 / 9;
 }
 
+/* Вариант: текст сверху (заголовок → описание → теги),
+   изображение прижато к нижнему правому углу без отступов;
+   угол скругляется самой карточкой (overflow:hidden + border-radius). */
+.mp-card--bleed {
+  flex-direction: column-reverse;
+}
+.mp-card--bleed .mp-card__media {
+  width: 60%;
+  align-self: flex-end;
+  aspect-ratio: 4 / 3;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  transition: transform 0.35s ease;
+}
+.mp-card--bleed .mp-card__image {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  border-top-left-radius: var(--radius-card);
+  object-fit: cover;
+}
+.mp-card--bleed:hover .mp-card__media {
+  transform: scale(1.04);
+  transform-origin: bottom right;
+}
+.mp-card--bleed .mp-card__title { order: 0; }
+.mp-card--bleed .mp-card__desc { order: 1; }
+.mp-card--bleed .mp-card__tags { order: 2; }
+
+/* Вариант: картинка на всю карточку, зеркальное отражение снизу,
+   прогрессивное размытие + тонировка цветом карточки снизу вверх;
+   текст поверх в нижней части. */
+.mp-card--reflect {
+  position: relative;
+  isolation: isolate;
+  flex-direction: column;
+  aspect-ratio: 4 / 3;
+  min-height: 16rem;
+  overflow: hidden;
+}
+.mp-card--reflect .mp-card__media {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  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;
+}
+/* прогрессивное размытие + тонировка снизу вверх.
+   blur — через backdrop-filter по всей карточке;
+   тонировка — градиент от непрозрачной --surface снизу к прозрачности вверху
+   (обход mask-image/color-mix ради совместимости + фолбэки). */
+.mp-card--reflect::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  background: var(--surface);
+  background: linear-gradient(to top, var(--surface), rgba(0, 0, 0, 0));
+  background: linear-gradient(to top,
+    color-mix(in srgb, var(--surface) 58%, transparent) 0%,
+    color-mix(in srgb, var(--surface) 34%, transparent) 45%,
+    transparent 80%);
+  pointer-events: none;
+}
+/* зеркальное отображение (отражение) внизу */
+.mp-card--reflect::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: auto;
+  height: 50%;
+  z-index: 2;
+  background-image: var(--card-cover);
+  background-size: cover;
+  background-position: center;
+  transform: scaleY(-1);
+  transform-origin: bottom;
+  opacity: 0.6;
+  -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: 3;
+  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;
@@ -3792,6 +3909,24 @@ html[data-font="mono"] .portfolio-card__title {
   margin-left: 0;
 }
 
+/* Вариант: изображение прижато к нижнему правому углу карточки без отступов;
+   скругление угла задаёт сама карточка (overflow:hidden + border-radius). */
+.portfolio-card--bleed .portfolio-card__cover {
+  align-self: flex-end;
+  width: 60%;
+  aspect-ratio: 4 / 3;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+.portfolio-card--bleed .portfolio-card__image {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+}
+
 .portfolio-card:hover .portfolio-card__title,
 .portfolio-card:focus-visible .portfolio-card__title {
   color: var(--accent-text);
@@ -3832,6 +3967,13 @@ html[data-font="mono"] .portfolio-card__title {
     height: 100%;
     object-position: center;
   }
+
+  .portfolio-card--bleed .portfolio-card__cover {
+    width: 100%;
+    align-self: stretch;
+    aspect-ratio: 16 / 9;
+    padding: 0;
+  }
 }
 
 .skills-intro {

public/en/cases/ai-platform-primo-rpa-2/index.html

@@ -785,7 +785,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -810,7 +810,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -835,7 +835,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -860,7 +860,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -885,7 +885,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -910,7 +910,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -935,7 +935,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -960,7 +960,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/ai-platform-primo-rpa-v2/index.html

@@ -915,7 +915,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -940,7 +940,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -965,7 +965,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -990,7 +990,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -1015,7 +1015,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -1040,7 +1040,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -1065,7 +1065,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -1090,7 +1090,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/ai-platform-primo-rpa/index.html

@@ -949,7 +949,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -974,7 +974,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -999,7 +999,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -1024,7 +1024,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -1049,7 +1049,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -1074,7 +1074,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -1099,7 +1099,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -1124,7 +1124,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/design-system/index.html

@@ -936,6 +936,31 @@
         </div>
         <p class="sg-label">.portfolio-card and child BEM classes</p>
 
+        <h3>Portfolio Card — reflect (mp-card)</h3>
+        <div class="sg-portfolio-wrap">
+          <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"
+                src="../../../assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                decoding="async"
+              />
+            </div>
+            <div class="mp-card__body">
+              <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">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--reflect — full-bleed image, reflection and blur at the bottom</p>
+
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
           While <code>img</code> hasn&#x27;t loaded yet, <code>initImageLoadPlaceholder</code> it

public/en/cases/lunacy/index.html

@@ -737,7 +737,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -762,7 +762,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -787,7 +787,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -812,7 +812,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -837,7 +837,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -862,7 +862,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -887,7 +887,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -912,7 +912,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/manu-game-maker/index.html

@@ -479,7 +479,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -504,7 +504,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -529,7 +529,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -554,7 +554,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -579,7 +579,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -604,7 +604,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -629,7 +629,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -654,7 +654,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/mobile-clinic-app/index.html

@@ -479,7 +479,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -504,7 +504,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -529,7 +529,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -554,7 +554,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -579,7 +579,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -604,7 +604,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -629,7 +629,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -654,7 +654,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/obsidian-plugin-columns-view/index.html

@@ -513,7 +513,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -538,7 +538,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -563,7 +563,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -588,7 +588,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -613,7 +613,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -638,7 +638,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -663,7 +663,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -688,7 +688,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/orc-automation-panel/index.html

@@ -618,7 +618,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -643,7 +643,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -668,7 +668,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -693,7 +693,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -718,7 +718,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -743,7 +743,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -768,7 +768,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -793,7 +793,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/task-distribution-concept/index.html

@@ -479,7 +479,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -504,7 +504,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -529,7 +529,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -554,7 +554,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -579,7 +579,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -604,7 +604,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -629,7 +629,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -654,7 +654,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

public/en/cases/task-tracker/index.html

@@ -947,7 +947,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -972,7 +972,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -997,7 +997,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -1022,7 +1022,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -1047,7 +1047,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -1072,7 +1072,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -1097,7 +1097,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -1122,7 +1122,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

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" 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" 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" 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" 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" 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" 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" 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">
@@ -872,7 +878,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -897,7 +903,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -922,7 +928,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -947,7 +953,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -972,7 +978,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -997,7 +1003,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -1022,7 +1028,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -1047,7 +1053,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="../obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="../obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

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" 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" 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" 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" 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" 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" 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" 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">
@@ -483,7 +489,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -508,7 +514,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -533,7 +539,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -558,7 +564,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -583,7 +589,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -608,7 +614,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -633,7 +639,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -658,7 +664,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

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" 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" 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" 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" 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" 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" 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" 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">
@@ -482,7 +488,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -508,7 +514,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -534,7 +540,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -560,7 +566,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -586,7 +592,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -612,7 +618,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -638,7 +644,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -664,7 +670,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="cases/obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="cases/obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">

src/pages/cases/design-system.en.html

@@ -748,6 +748,31 @@
         </div>
         <p class="sg-label">.portfolio-card and child BEM classes</p>
 
+        <h3>Portfolio Card — reflect (mp-card)</h3>
+        <div class="sg-portfolio-wrap">
+          <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"
+                src="{{assetPrefix}}assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                decoding="async"
+              />
+            </div>
+            <div class="mp-card__body">
+              <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">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--reflect — full-bleed image, reflection and blur at the bottom</p>
+
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
           While <code>img</code> hasn&#x27;t loaded yet, <code>initImageLoadPlaceholder</code> it

src/pages/cases/design-system.html

@@ -749,6 +749,31 @@
         </div>
         <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
 
+        <h3>Карточка портфолио — reflect (mp-card)</h3>
+        <div class="sg-portfolio-wrap">
+          <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"
+                src="{{assetPrefix}}assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                decoding="async"
+              />
+            </div>
+            <div class="mp-card__body">
+              <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>
+            </div>
+          </a>
+        </div>
+        <p class="sg-label">.mp-card--reflect — полноразмерная картинка, отражение и размытие снизу</p>
+
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
           Пока <code>img</code> ещё не загрузился, <code>initImageLoadPlaceholder</code> вешает

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" 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" 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" 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" 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" 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" 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" 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>

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" 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" 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" 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" 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" 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" 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" 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>

src/partials/projects-section.en.html

@@ -16,7 +16,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
                       <p class="portfolio-card__summary">
@@ -41,7 +41,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Platform for working with AI</h3>
                       <p class="portfolio-card__summary">
@@ -66,7 +66,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
                       <p class="portfolio-card__summary">
@@ -91,7 +91,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">MANU game engine</h3>
                       <p class="portfolio-card__summary">
@@ -116,7 +116,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -141,7 +141,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
                       <p class="portfolio-card__summary">
@@ -166,7 +166,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Task distribution service concept</h3>
                       <p class="portfolio-card__summary">
@@ -191,7 +191,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
                       <p class="portfolio-card__summary">

src/partials/projects-section.html

@@ -16,7 +16,7 @@
               <div class="projects-carousel__track">
                 <div class="projects-carousel__spacer" aria-hidden="true"></div>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}orc-automation-panel/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}orc-automation-panel/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
                       <p class="portfolio-card__summary">
@@ -42,7 +42,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}ai-platform-primo-rpa/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
                       <p class="portfolio-card__summary">
@@ -68,7 +68,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}task-tracker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}task-tracker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
                       <p class="portfolio-card__summary">
@@ -94,7 +94,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}manu-game-maker/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}manu-game-maker/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Игровой движок MANU</h3>
                       <p class="portfolio-card__summary">
@@ -120,7 +120,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}lunacy/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}lunacy/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
                       <p class="portfolio-card__summary">
@@ -146,7 +146,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}mobile-clinic-app/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}mobile-clinic-app/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
                       <p class="portfolio-card__summary">
@@ -172,7 +172,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}task-distribution-concept/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}task-distribution-concept/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
                       <p class="portfolio-card__summary">
@@ -198,7 +198,7 @@
                   </a>
                 </article>
                 <article class="projects-carousel__item">
-                  <a class="portfolio-card" href="{{casesPrefix}}obsidian-plugin-columns-view/">
+                  <a class="portfolio-card portfolio-card--bleed" href="{{casesPrefix}}obsidian-plugin-columns-view/">
                     <div class="portfolio-card__body">
                       <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
                       <p class="portfolio-card__summary">