.tilted { transform: rotate(45deg); }
.turned { transform: rotate(90deg); }
.flipped { transform: rotate(180deg); }
.hidden {  
    transition-property: display opacity flex-grow;
    transition-behavior: allow-discrete;
    transition-duration: var(--pace-normal);
    
    height: 0;
    opacity: 0;

    &.show {
        height: auto;
        opacity: 1;

        @starting-style {
            height: 0;
            opacity: 0;
        }
    }
}

@keyframes appear-up {
    0% { opacity: 0; transform: translateY(400px); }
    100% { opacity: 1; transform: translateY(0px); }
}

.appear-up {
    animation: appear-up ease;
    animation-timeline: view();
    animation-range: cover 0% entry 100%;
}

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

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

@keyframes slide-to-right {
    to { transform: translateX(90px); }
}

@keyframes slide-from-right {
    from { transform: translateX(90px); }
}

@keyframes slide-to-left {
    to { transform: translateX(-90px); }
}

@keyframes slide-from-left {
    from { transform: translateX(-90px); }
}

.slide-in { view-transition-name: slide-in; }
::view-transition-new(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;
}

.slide-out { view-transition-name: slide-out; }
::view-transition-new(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;
}

.shift-right { view-transition-name: shift-right; }
::view-transition-old(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(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;
}

.shift-left { view-transition-name: shift-left; }
::view-transition-old(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(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;
}