[data-smart-lazy]{
  --sl-duration:700ms;
  --sl-easing:cubic-bezier(.22,1,.36,1);
  --sl-delay:0ms;

  /* shimmer controls */
  --sl-shimmer-speed:1.45s;
  --sl-shimmer-opacity:.70;
  --sl-shimmer-angle:112deg;
  --sl-shimmer-width:18%;
  --sl-dark-line-opacity:.16;
  --sl-dark-line-opacity-strong:.24;

  /* default placeholder */
  --sl-placeholder-bg:linear-gradient(135deg,#ffffff 0%,#f7f7f7 50%,#ececec 100%);
}

[data-smart-lazy] img[data-src],
[data-smart-lazy] img.smart-lazy-img:not(.smart-lazy-show){
  opacity:0!important;
  visibility:hidden!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  background:transparent!important;
}

[data-smart-lazy] img.smart-lazy-show{
  opacity:1!important;
  visibility:visible!important;
}

[data-smart-lazy] .smart-lazy-media{
  position:relative;
  overflow:hidden;
  background:var(--sl-placeholder-bg);
  isolation:isolate;
}

[data-smart-lazy] .smart-lazy-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:1;
  background:
    linear-gradient(
      var(--sl-shimmer-angle),
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.05) 12%,
      rgba(0,0,0,var(--sl-dark-line-opacity)) 22%,
      rgba(255,255,255,.10) 30%,
      rgba(0,0,0,var(--sl-dark-line-opacity-strong)) 40%,
      rgba(255,255,255,.22) 50%,
      rgba(0,0,0,var(--sl-dark-line-opacity-strong)) 60%,
      rgba(255,255,255,.10) 70%,
      rgba(0,0,0,var(--sl-dark-line-opacity)) 80%,
      rgba(255,255,255,.05) 88%,
      rgba(255,255,255,0) 100%
    );
  background-size:230% 100%;
  background-repeat:no-repeat;
  animation:smartLazyShimmer var(--sl-shimmer-speed) linear infinite;
  transition:opacity .25s ease,visibility .25s ease;
  mix-blend-mode:soft-light;
  will-change:background-position;
}

[data-smart-lazy].smart-lazy-no-shimmer .smart-lazy-media::before{
  display:none;
}

[data-smart-lazy] .smart-lazy-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,.06),transparent 58%);
  opacity:1;
  transition:opacity .25s ease;
}

[data-smart-lazy].smart-lazy-loaded .smart-lazy-media::before,
[data-smart-lazy].smart-lazy-loaded .smart-lazy-media::after{
  opacity:0;
  visibility:hidden;
}

[data-smart-lazy].smart-lazy-loaded .smart-lazy-media{
  background:transparent!important;
}

[data-smart-lazy] img.smart-lazy-img{
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  color:transparent;
  font-size:0;
  line-height:0;
  backface-visibility:hidden;
  transform-origin:center center;
  transition:
    opacity var(--sl-duration) var(--sl-easing),
    transform var(--sl-duration) var(--sl-easing),
    filter var(--sl-duration) var(--sl-easing);
}

[data-smart-lazy] .smart-lazy-bg-target{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:
    opacity var(--sl-duration) var(--sl-easing),
    transform var(--sl-duration) var(--sl-easing),
    filter var(--sl-duration) var(--sl-easing);
}

[data-smart-lazy][data-sl-anim="fade"] img.smart-lazy-img,
[data-smart-lazy][data-sl-anim="fade"] .smart-lazy-bg-target{
  transform:none;
  filter:blur(5px) grayscale(.15);
}

[data-smart-lazy][data-sl-anim="zoom-fade"] img.smart-lazy-img,
[data-smart-lazy][data-sl-anim="zoom-fade"] .smart-lazy-bg-target{
  transform:scale(1.035);
  filter:blur(8px) grayscale(.12);
}

[data-smart-lazy][data-sl-anim="soft-pop"] img.smart-lazy-img,
[data-smart-lazy][data-sl-anim="soft-pop"] .smart-lazy-bg-target{
  transform:scale(1.015) translateY(3px);
  filter:blur(6px) grayscale(.1);
}

[data-smart-lazy][data-sl-anim="cinematic"] img.smart-lazy-img,
[data-smart-lazy][data-sl-anim="cinematic"] .smart-lazy-bg-target{
  transform:scale(1.05);
  filter:blur(12px) grayscale(.15) brightness(.95);
}

[data-smart-lazy] img.smart-lazy-img.smart-lazy-show,
[data-smart-lazy] .smart-lazy-bg-target.smart-lazy-show{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  transition-delay:var(--sl-delay);
}

@keyframes smartLazyShimmer{
  0%{background-position:-190% 0}
  100%{background-position:190% 0}
}

@media (prefers-reduced-motion:reduce){
  [data-smart-lazy] .smart-lazy-media::before{
    animation:none!important;
  }
  [data-smart-lazy] img.smart-lazy-img,
  [data-smart-lazy] .smart-lazy-bg-target{
    transition-duration:.01ms!important;
    transform:none!important;
    filter:none!important;
  }
}