/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Animations */

@media (prefers-reduced-motion: no-preference) {

    /* Classes to begin elements with opacity 0 so that there's no jank in the animation */
    .has-fade-in-up,
    .has-fade-in-right,
    .has-fade-in-left,
    .has-fade-in-down {
        opacity: 0;
    }

    /* Override for elements that I want to stay visible before the animation */
    .opacity-1 {
        opacity: 1 !important;
    }

    /* Classes for modifying translation amount of elements, with a fallback if no class is used */
    .translate-15 {
        --translate: 15px;
    }
    
    .translate-25 {
        --translate: 25px;
    }

    .translate-minus-25 {
        --translate: -25px;
    }

    /* Keyframes */

    @keyframes fade-in-right {
        from {
            opacity: 0;
            transform: translateX(var(--translate, 50px));
        }

        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    @keyframes fade-in-down {
        from {
            opacity: 0;
            transform: translateY(var(--translate,-50px));
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    @keyframes fade-in-left {
        from {
            opacity: 0;
            transform: translateX(var(--translate,-50px));
        }

        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(var(--translate,50px));
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    /* Classes for animation durations */
    .animation-duration-1000 {
        animation-duration: 1000ms;
    }

    /* Animation classes for keyframes */
    .fade-in-left {
        animation: fade-in-left 1000ms ease-in-out 0ms forwards;
    }
    .fade-in-up {
        animation: fade-in-up 1000ms ease-in-out 0ms forwards;
    }
    .fade-in-right {
        animation: fade-in-right 1000ms ease-in-out 0ms forwards;
    }
    .fade-in-down {
        animation: fade-in-down 1000ms ease-in-out 0ms forwards;
    }

    /* Animation delay classes */

    .animation-delay-300 {
        animation-delay: 300ms;
    }

    .animation-delay-400 {
        animation-delay: 400ms;
    }

    .animation-delay-500 {
        animation-delay: 500ms;
    }

    .animation-delay-600 {
        animation-delay: 600ms;
    }

    /* Fallback for mobile Firefox only, in case the animations don't trigger */
    @media (max-width: 768px) {
        @-moz-document url-prefix() {
            .has-fade-in-left,
            .has-fade-in-right,
            .has-fade-in-up,
            .has-fade-in-down {
                opacity: 1;
            }
        }
    }
}