@view-transition {
    navigation: auto;
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-group(shared-photo-active),
::view-transition-old(shared-photo-active),
::view-transition-new(shared-photo-active) {
    animation-duration: 420ms;
    animation-timing-function: var(--ease-in-out);
}

::view-transition-group(shared-title-active),
::view-transition-old(shared-title-active),
::view-transition-new(shared-title-active) {
    animation-duration: 360ms;
    animation-timing-function: var(--ease-in-out);
}

@keyframes client-divider-slide-in {
    from {
        transform: translateY(30vh);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes client-divider-slide-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(30vh);
        opacity: 0;
    }
}

::view-transition-group(client-divider) {
    animation: none;
}

::view-transition-old(client-divider) {
    animation: client-divider-slide-out 220ms var(--ease-in-out) both;
}

::view-transition-new(client-divider) {
    animation: client-divider-slide-in 260ms var(--ease-out) 560ms both;
}

::view-transition-group(client-details-section) {
    animation: none;
}

::view-transition-old(client-details-section) {
    animation: client-divider-slide-out 220ms var(--ease-in-out) both;
}

::view-transition-new(client-details-section) {
    animation: client-divider-slide-in 260ms var(--ease-out) 560ms both;
}