/* ============================================================================
   shards.css — скляні уламки паралаксом у хіро /bittya-posudu (DSTR-45, беклог A12).
   Три шари: far — дрібні, повільні, розмиті · mid · near — великі, швидші, з розмиттям.
   Рух і розкладку дає js/shared/hero-shards.js; тут — лише вигляд.

   ⚠️ ЧОРНЕ ТЛО АССЕТІВ прибирає mix-blend-mode:screen — уламок стає напівпрозорим сам,
   альфу руками не вирізаємо. Тому на шляху від уламка до фону хіро НЕ МОЖЕ бути власного
   стекового контексту: у .shards нема ні z-index, ні contain, ні opacity/transform —
   інакше уламок змішається з порожнечею і чорний прямокутник повернеться. Змішує сам
   .shard (той, що рухається), а не картинка всередині нього.
   Текст хіро завжди вище: у .w з lp.css стоїть z-index:1.
   ============================================================================ */
.shards{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}
.shard{position:absolute;display:block;mix-blend-mode:screen;will-change:transform;backface-visibility:hidden}
.shard img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.shard[data-layer="far"]{opacity:.5}
.shard[data-layer="far"] img{filter:blur(1.4px);animation:shardBreath 9s ease-in-out infinite alternate}
.shard[data-layer="far"]:nth-of-type(even) img{animation-duration:12s;animation-direction:alternate-reverse}
.shard[data-layer="mid"]{opacity:.78}
.shard[data-layer="near"]{opacity:.92}
.shard[data-layer="near"] img{filter:blur(2.2px)}
/* «Дихання» дальнього шару: легкий оберт ±3°. */
@keyframes shardBreath{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
/* Спокійний режим — статична розкладка: уламки на місцях, руху й «дихання» нема. */
@media(prefers-reduced-motion:reduce){
  .shard{will-change:auto}
  .shard[data-layer="far"] img{animation:none}
}