:root {
  --vio-lazy-blur: 8px;
  --vio-lazy-duration: 550ms;
  --vio-lazy-spinner: 28px;
  --vio-lazy-watermark-opacity: .25;
}

.vio-lazy-media {
  transition: filter var(--vio-lazy-duration) ease, transform var(--vio-lazy-duration) ease, opacity var(--vio-lazy-duration) ease;
  will-change: filter, transform, opacity;
}

.vio-lazy-media.vio-placeholder-blur:not(.vio-lazy-loaded) {
  filter: blur(var(--vio-lazy-blur));
  transform: scale(1.015);
}

.vio-lazy-media.vio-reveal-fade-scale:not(.vio-lazy-loaded) {
  transform: scale(1.015);
}

.vio-lazy-media.vio-lazy-loaded {
  filter: none;
  transform: none;
  opacity: 1;
}

.vio-lazy-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.vio-lazy-bg.vio-placeholder-skeleton:not(.vio-lazy-loaded) {
  background-image: linear-gradient(90deg, #eef1f1 25%, #f8f9f9 37%, #eef1f1 63%) !important;
  background-size: 400% 100%;
  animation: vio-lazy-shimmer 1.35s ease infinite;
}

.vio-lazy-bg.vio-placeholder-spinner:not(.vio-lazy-loaded) {
  background-image: radial-gradient(circle at center, transparent calc(var(--vio-lazy-spinner) / 2 - 3px), #0f6671 calc(var(--vio-lazy-spinner) / 2 - 2px), #0f6671 calc(var(--vio-lazy-spinner) / 2), transparent calc(var(--vio-lazy-spinner) / 2 + 1px)) !important;
  background-size: var(--vio-lazy-spinner) var(--vio-lazy-spinner);
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes vio-lazy-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vio-lazy-media,
  .vio-lazy-bg {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}