:root {
  --site-poster-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --site-poster-motion-hover-duration: 320ms;
}

.site-poster-motion {
  transform-origin: center;
  transition:
    transform var(--site-poster-motion-hover-duration) var(--site-poster-motion-ease),
    box-shadow var(--site-poster-motion-hover-duration) ease;
}

.site-poster-motion[data-site-poster-frame="true"] {
  will-change: clip-path, transform;
}

.site-poster-motion [data-site-poster-media="true"],
img.site-poster-motion[data-site-poster-media="true"] {
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .site-poster-motion:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 70px rgba(80, 42, 18, 0.17);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-poster-motion,
  .site-poster-motion [data-site-poster-media="true"],
  img.site-poster-motion[data-site-poster-media="true"] {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}