@media (prefers-reduced-motion: no-preference) {
  .wapoid-image-reveal {
    opacity: 0;
    transform: translateY(26px) scale(.975);
    clip-path: inset(0 0 10% 0 round var(--wapoid-radius, 8px));
    filter: saturate(.9) contrast(.96);
    transition:
      opacity .85s cubic-bezier(.22, 1, .36, 1) var(--wapoid-reveal-delay, 0ms),
      transform .85s cubic-bezier(.22, 1, .36, 1) var(--wapoid-reveal-delay, 0ms),
      clip-path .95s cubic-bezier(.22, 1, .36, 1) var(--wapoid-reveal-delay, 0ms),
      filter .95s cubic-bezier(.22, 1, .36, 1) var(--wapoid-reveal-delay, 0ms);
    will-change: opacity, transform, clip-path, filter;
  }

  .wapoid-image-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0 round var(--wapoid-radius, 8px));
    filter: saturate(1) contrast(1);
  }

  .m-hero__picture.wapoid-image-reveal {
    transform: scale(1.06);
    transition:
      opacity 1s cubic-bezier(.22, 1, .36, 1),
      transform 1.35s cubic-bezier(.22, 1, .36, 1),
      clip-path 1.1s cubic-bezier(.22, 1, .36, 1),
      filter 1.1s cubic-bezier(.22, 1, .36, 1);
  }

  .m-hero__picture.wapoid-image-reveal.is-visible {
    transform: scale(1);
  }

  .m-hero__picture.wapoid-image-reveal.is-visible img {
    animation: wapoidHeroImageDrift 18s ease-out both;
  }

  .m-article-card__picture-background,
  .m-recent-article__picture img,
  .l-post-content figure.kg-image-card img,
  .l-post-content figure.kg-gallery-card img,
  .l-post-content img.kg-image {
    transition:
      transform .9s cubic-bezier(.22, 1, .36, 1),
      filter .9s cubic-bezier(.22, 1, .36, 1);
  }

  .m-article-card:hover .m-article-card__picture-background,
  .m-recent-article:hover .m-recent-article__picture img {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.055);
  }

  .l-post-content figure.kg-image-card:hover img,
  .l-post-content figure.kg-gallery-card:hover img,
  .l-post-content img.kg-image:hover {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.018);
  }

  @keyframes wapoidHeroImageDrift {
    from {
      transform: scale(1.045) translate3d(0, 0, 0);
    }

    to {
      transform: scale(1.075) translate3d(-1.5%, -1%, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wapoid-image-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }
}