@keyframes renderLeftLine {
    from {
        opacity: 0;
        width: 0;
    }
    to {
        opacity: 1;
        width: 100%;
    }
}

@keyframes reveal {
    from {
        opacity: 0;
        mix-blend-mode: hard-light;
    }
    to {
        opacity: 1;
        mix-blend-mode: normal;
    }
}
@keyframes orbit {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg);
    }
}

@keyframes counter-orbit {
    from { 
        transform: rotate(0deg); 
    }
    to { transform: rotate(-360deg); }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes slideInToLeft {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideOutToRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}