@media (prefers-reduced-motion: no-preference) {
@media (min-width: 768px) {
html.retreva-vt-card-detail .retreva-vt-primary-image {
view-transition-name: retreva-shared-image;
contain: layout;
}
html::view-transition-group(retreva-shared-image) {
animation-duration: 560ms;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
html::view-transition-old(retreva-shared-image),
html::view-transition-new(retreva-shared-image) {
animation-duration: 560ms;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
height: 100%;
object-fit: cover;
overflow: clip;
}
html.retreva-vt-card-forward::view-transition-old(retreva-shared-image) {
animation-name: retreva-vt-card-image-out;
}
html.retreva-vt-card-detail::view-transition-new(retreva-shared-image) {
animation-name: retreva-vt-card-image-in;
}
}
@media (max-width: 767.98px) {
html::view-transition-group(page-content) {
animation-duration: 300ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html.retreva-vt-mobile-forward::view-transition-old(page-content) {
animation-name: retreva-vt-mobile-forward-out;
}
html.retreva-vt-mobile-detail::view-transition-new(page-content) {
animation-name: retreva-vt-mobile-forward-in;
}
html.retreva-vt-back::view-transition-new(page-content) {
animation-name: retreva-vt-mobile-back-in;
}
}
@keyframes retreva-vt-card-image-out {
from {
opacity: 1;
transform: scale(1);
filter: saturate(1);
}
to {
opacity: 0.92;
transform: scale(0.985);
filter: saturate(1.04);
}
}
@keyframes retreva-vt-card-image-in {
from {
opacity: 0.92;
transform: scale(1.015);
filter: saturate(1.04);
}
to {
opacity: 1;
transform: scale(1);
filter: saturate(1);
}
}
@keyframes retreva-vt-mobile-forward-out {
to {
opacity: 0;
transform: translateX(-18px);
}
}
@keyframes retreva-vt-mobile-forward-in {
from {
opacity: 0;
transform: translateX(18px);
}
}
@keyframes retreva-vt-mobile-back-in {
from {
opacity: 0;
transform: translateX(-18px);
}
}
}