/*
==========================================================================

 Project     : Signature Spreads and Treats by Di
 File        : animations.css
 Version     : 1.0.0
 Author      : JB
 Purpose     : Global Stylesheet

===========================================================================
*/

/*--------------------------------------------------
01. Motion Tokens
--------------------------------------------------*/

:root {
    --motion-duration-fast: 220ms;
    --motion-duration-normal: 420ms;
    --motion-duration-slow: 700ms;
    --motion-ease-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
    --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-reveal-distance: 28px;
}

/*--------------------------------------------------
02. Global Reveal Base
--------------------------------------------------*/

.has-js [data-reveal] {
    opacity: 0;

    will-change:
        opacity,
        transform;

    transition:
        opacity var(--motion-duration-slow)
            var(--motion-ease-emphasized),
        transform var(--motion-duration-slow)
            var(--motion-ease-emphasized);
}

/*--------------------------------------------------
03. Reveal Directions
--------------------------------------------------*/

/* Fade upward */

.has-js [data-reveal="fade-up"] {
    transform:
        translate3d(
            0,
            var(--motion-reveal-distance),
            0
        );
}


/* Fade downward */

.has-js [data-reveal="fade-down"] {
    transform:
        translate3d(
            0,
            calc(var(--motion-reveal-distance) * -1),
            0
        );
}


/* Fade from left */

.has-js [data-reveal="fade-left"] {
    transform:
        translate3d(
            calc(var(--motion-reveal-distance) * -1),
            0,
            0
        );
}


/* Fade from right */

.has-js [data-reveal="fade-right"] {
    transform:
        translate3d(
            var(--motion-reveal-distance),
            0,
            0
        );
}


/* Plain fade with no movement */

.has-js [data-reveal="fade"] {
    transform: none;
}

/*--------------------------------------------------
04. Revealed State
--------------------------------------------------*/

.has-js [data-reveal].is-revealed {
    opacity: 1;

    transform: translate3d(0, 0, 0);

    will-change: auto;
}

/*--------------------------------------------------
05. Reduced Motion
--------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;

        scroll-behavior: auto !important;
    }

    .has-js [data-reveal] {
        opacity: 1;

        transform: none;

        will-change: auto;
    }

}

/* HERO ENTRANCE */

.has-js .site-hero-eyebrow,
.has-js .site-hero-title,
.has-js .site-hero-flourish,
.has-js .site-hero-description,
.has-js .site-hero-actions,
.has-js .site-hero-trust {
    opacity: 0;
    transform: translateY(20px);
}

.has-js .site-hero-media {
    opacity: 0;
    transform: scale(1.025);
}

.has-js.is-page-ready .site-hero-eyebrow,
.has-js.is-page-ready .site-hero-title,
.has-js.is-page-ready .site-hero-flourish,
.has-js.is-page-ready .site-hero-description,
.has-js.is-page-ready .site-hero-actions,
.has-js.is-page-ready .site-hero-trust {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity var(--motion-duration-slow)
            var(--motion-ease-emphasized),
        transform var(--motion-duration-slow)
            var(--motion-ease-emphasized);
}

.has-js.is-page-ready .site-hero-media {
    opacity: 1;
    transform: scale(1);

    transition:
        opacity 900ms var(--motion-ease-standard),
        transform 1200ms var(--motion-ease-emphasized);
}


/* SITE SOCIAL RAIL */


/* Initial State */

.has-js .site-social-rail {
    opacity: 0;
    transform:
        translateY(-50%)
        translateX(14px);
}


/* Page Ready */

.has-js.is-page-ready .site-social-rail {
    opacity: 1;
    transform:
        translateY(-50%)
        translateX(0);
    transition:
        opacity
        var(--motion-duration-slow)
        var(--motion-ease-emphasized),
        transform
        var(--motion-duration-slow)
        var(--motion-ease-emphasized);
}


/* Links */

.site-social-rail-link {
    transition:
        color
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        background-color
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        border-color
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        box-shadow
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        transform
        var(--motion-duration-normal)
        var(--motion-ease-emphasized);
}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

    .has-js .site-social-rail,
    .has-js.is-page-ready .site-social-rail {
        opacity: 1;
        transform:
            translateY(-50%);
        transition: none;
    }

    .site-social-rail-link {
        transition: none;
    }

    .site-social-rail-link:hover,
    .site-social-rail-link:focus-visible,
    .site-social-rail-link:active {
        transform: none;
    }

}