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

 Project     : Signature Spreads and Treats by Di
 File        : home-animations.css
 Version     : 1.0.0
 Author      : JB
 Purpose     : Home Page

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

/* FRESH FROM THE KITCHEN */

/*--------------------------------------------------
02.01 Creation Reveal and Hover
--------------------------------------------------*/

.home-page .home-creation[data-reveal="fade"] {
    opacity: 0;
    transform: translateY(0);

    transition:
        opacity 1800ms cubic-bezier(0.22, 1, 0.36, 1),
        transform var(--motion-duration-normal)
            var(--motion-ease-emphasized);
}


/* Revealed state */

.home-page .home-creation[data-reveal="fade"].is-revealed {
    opacity: 1;
    transform: translateY(0);
}


/* Hover lift */

.home-page .home-creation[data-reveal="fade"].is-revealed:hover {
    transform: translateY(-6px);
}


/*--------------------------------------------------
02.02 Creation Image
--------------------------------------------------*/

.home-page .home-creation-image {
    transition:
        box-shadow var(--motion-duration-normal)
            var(--motion-ease-standard);
}

.home-page .home-creation:hover .home-creation-image {
    box-shadow:
        0 24px 50px rgba(75, 46, 30, 0.14);
}

.home-page .home-creation-image img {
    transition:
        transform var(--motion-duration-slow)
            var(--motion-ease-emphasized);
}

.home-page .home-creation:hover .home-creation-image img,
.home-page .home-creation-image-link:focus-visible
.home-creation-image img {
    transform: scale(1.035);
}


/*--------------------------------------------------
02.03 Creation Link Arrow
--------------------------------------------------*/

.home-page .home-creation-link span {
    display: inline-block;

    transition:
        transform var(--motion-duration-fast)
            var(--motion-ease-standard);
}

.home-page .home-creation-link:hover span,
.home-page .home-creation-link:focus-visible span {
    transform: translateX(4px);
}