/* Fade in slide up animation */

/* Initial state (hidden and slightly moved down) for any element with the data attribute */
[data-on-scroll-transition="true"] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

/* Visible state (opacity 1 and back to original position) when the 'visible' class is added */
[data-on-scroll-transition="true"].visible {
    opacity: 1;
    transform: translateY(0);
}

.logo-text [data-on-scroll-transition="true"] {
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.logo-text [data-on-scroll-transition="true"].visible {
    opacity: 1;
    transform: scaleX(1);
}