/* Скелет страницы объекта — только внутри #propertyPage */
#propertyPage.is-loading .skel-el:not(.hydrated) {
  color: transparent !important;
  border-color: transparent !important;
  background: linear-gradient(
    90deg,
    var(--skel-base) 25%,
    var(--skel-highlight) 50%,
    var(--skel-base) 75%
  ) !important;
  background-size: 1000px 100% !important;
  animation: property-shimmer 1.5s infinite linear;
  border-radius: 6px;
  user-select: none;
  pointer-events: none;
}

#propertyPage.is-loading .skel-el:not(.hydrated) img,
#propertyPage.is-loading .skel-el:not(.hydrated) svg {
  opacity: 0 !important;
  visibility: hidden;
}

#propertyPage.is-loading .skel-text-short:not(.hydrated) {
  display: inline-block;
  min-width: 120px;
  min-height: 16px;
}
#propertyPage.is-loading .skel-text-med:not(.hydrated) {
  display: inline-block;
  min-width: 250px;
  min-height: 20px;
}
#propertyPage.is-loading .skel-text-long:not(.hydrated) {
  display: block;
  width: 100%;
  min-height: 24px;
  margin-bottom: 8px;
}
#propertyPage.is-loading .skel-title:not(.hydrated) {
  display: block;
  width: 80%;
  min-height: 40px;
  margin-bottom: 12px;
  border-radius: 8px;
}
#propertyPage.is-loading .skel-price:not(.hydrated) {
  display: block;
  width: 60%;
  min-height: 48px;
  margin-bottom: 24px;
  border-radius: 8px;
}

/* Hydrated elements always show content, no shimmer */
.skel-el.hydrated {
  color: inherit !important;
  border-color: transparent !important;
  background: transparent !important;
  animation: none !important;
}
.skel-el.hydrated img {
  opacity: 1 !important;
  visibility: visible !important;
}
.skel-el.hydrated.property-main-img img {
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes property-shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Алиас для inline animation (как в референсе) */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Главное фото: shimmer после снятия is-loading, пока грузится файл */
.property-main-img.property-main-img--img-loading {
  background: linear-gradient(
    90deg,
    var(--skel-base, #f5f5f7) 25%,
    var(--skel-highlight, #fff) 50%,
    var(--skel-base, #f5f5f7) 75%
  );
  background-size: 1000px 100%;
  animation: property-shimmer 1.5s infinite linear;
}

.property-main-img.property-main-img--img-loading img {
  opacity: 0;
  transition: opacity 0.28s ease;
}

.property-main-img:not(.property-main-img--img-loading) img {
  opacity: 1;
}