/* ==========================================================================
   ЯВІР — модуль «Фото об'єктів»
   Реальні фото лягають поверх SVG-ілюстрацій у картках портфоліо.
   Якщо файлу немає — фото не вставляється і лишається ілюстрація.
   Підключається окремо: css/photos.css + js/photos.js
   ========================================================================== */

.work__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease, transform .5s ease;
}
.work__photo.is-loaded { opacity: 1; }
.work:hover .work__photo { transform: scale(1.05); }

/* Плашка з категорією має лишатись над фото */
.work__tag { z-index: 2; }

/* Легке затемнення знизу, щоб білий текст плашки не губився на світлих знімках */
.work__media.has-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 1;
  background: linear-gradient(to top, rgba(29, 28, 24, .28), transparent);
  pointer-events: none;
}

/* Поки фото вантажиться — плавний «скелет» замість різкого стрибка */
.work__media.is-loading {
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%),
    var(--gray-100);
  background-size: 220% 100%, auto;
  animation: workShimmer 1.4s linear infinite;
}
@keyframes workShimmer {
  from { background-position: 180% 0, 0 0; }
  to   { background-position: -80% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .work__photo { transition: none; }
  .work__media.is-loading { animation: none; }
}