/* Global image loading treatment: stable skeleton and a soft reveal. */
.roc-image-frame {
  position: relative;
  background-color: #f1f3f5;
  overflow: hidden;
}

.roc-image-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.72) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: roc-image-skeleton 1.45s ease-in-out infinite;
}

.roc-image-pending {
  opacity: 0 !important;
}

.roc-image-loaded {
  opacity: 1;
  transition: opacity .42s ease-out;
}

.roc-image-frame.roc-image-ready {
  background-color: transparent;
}

.roc-image-frame.roc-image-ready::after {
  opacity: 0;
  transition: opacity .28s ease-out;
  animation: none;
}

@keyframes roc-image-skeleton {
  0% { background-position: 180% 0; }
  100% { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .roc-image-frame::after { animation: none; }
  .roc-image-loaded { transition: none; }
}