@view-transition{
    navigation: auto;
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes slide-to-right {
    to { transform: translateX(50%); }
}

@keyframes slide-from-right {
    from { transform: translateX(50%); }
}

@keyframes slide-to-left {
    to { transform: translateX(-50%); }
}

@keyframes slide-from-left {
    from { transform: translateX(-50%); }
}

.transition-slide-in { view-transition-name: slide-in; }
::view-transition-new(transition-slide-in) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

.transition-slide-out { view-transition-name: slide-out; }
::view-transition-new(transition-slide-out) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

.transition-shift-right { view-transition-name: shift-right; }
::view-transition-old(transition-shift-right) {
    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(transition-shift-right) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

.transition-shift-left { view-transition-name: shift-left; }
::view-transition-old(transition-shift-left) {
    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
::view-transition-new(transition-shift-left) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

.grow {
    &:hover { 
        transform: scale(1.05); 
        z-index: var(--z-index-avatar);
    }
}