.post-preview__img { transform: scale(1); transition: transform 850ms cubic-bezier(0.455, 0.03, 0.515, 0.955); } .image-as-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }  .post-preview__icon--arrow-visible .post-preview__icon__arrow { opacity: 0.9; transition: opacity 250ms ease; }  @media (hover: hover) {  .post-preview__icon__outline { --length: 0px; stroke-dasharray: var(--length); stroke-dashoffset: var(--length); animation: postPreviewOutlineOut 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }  .post-preview__icon__arrow { animation: postPreviewIconOut 250ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both; }  .post-preview__icon--arrow-visible .post-preview__icon__arrow { animation: none; }  .post-preview__link:is(:hover, :focus, :active) .post-preview__img { transform: scale(1.05); } .post-preview__link:is(:hover, :focus, :active) .post-preview__icon__outline { animation: postPreviewOutlineOver 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .post-preview__link:is(:hover, :focus, :active) .post-preview__icon__arrow { animation: postPreviewIconOver 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms both; }  .post-preview__link:is(:hover, :focus, :active) .post-preview__icon--arrow-visible .post-preview__icon__arrow { opacity: 1; } }  @keyframes postPreviewOutlineOver { from { stroke-dashoffset: var(--length); } to { stroke-dashoffset: 0; } } @keyframes postPreviewOutlineOut { from { stroke-dashoffset: calc(var(--length) * 2); } to { stroke-dashoffset: var(--length); } } @keyframes postPreviewIconOver { 0% { opacity: 0; transform: translateX(-8px); } 80%, 100% { opacity: 1; } 100% { transform: translateX(0); } } @keyframes postPreviewIconOut { 0%, 20% { opacity: 1; } 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(8px); } }