.slick-dots li button {
    transform-origin: bottom center;
}

.slick-dots li.slick-active button {
    animation: eggShake 0.8s ease-in-out 0s 2 forwards;
}

.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 99999999;

    /* display: none; */
}

.loading-mask__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-mask__chicken {
    width: 150px;
    height: 150px;
    background-image: url('/wp-content/themes/saudersegg/assets/img/chicken-sprite.png');
    background-position: 0 0;
    transform: translate(-155px, 0);
}

.loading-mask__line {
    position: fixed;
    width: 100%;
    height: 4px;
    background: linear-gradient(0deg, rgba(242, 120, 56, 0.76) -8.95%, rgba(239, 102, 35, 0.76) 32.48%, rgba(200, 76, 39, 0.76) 73.28%);
    top: calc(50% + 55px);
    transform-origin: left;
    transform: translateY(-50%) scaleX(0);
    left: 0;
}

.loading-mask__wrapper {
    width: 100%;
    height: 150px;
    position: relative;
}

.loading-mask__dots {
    width: 300%;
    height: 4px;
    background: linear-gradient(to right,  #f8b917 0%,#f8b917 50%,#ffffff 51%,#ffffff 100%) 0 0 repeat-x;
    background-size: 16px 4px;
    position: absolute;
    right: 0;
    bottom: 15px;
}

.loading-mask__logo {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 200px;
    transform: scale(2);
    opacity: 0;

    img {
        width: 100%;
        height: auto;
    }

    .loading-mask__logo-egg {
        position: absolute;
        top: 0;
        left: 0;
    }

    &.is-done-loading {
        .loading-mask__logo-egg {
            animation: eggShake 0.8s ease-in-out 0s 2 forwards;
        }
    }
}

@media (min-width: 1200px) {
    .js-animated-image .animated-image-item {
        transform: translateY(-100px);
        opacity: 0;
    }

    .js-animated-image .story-egg.animated-image-item {
        transform: translate(100px, 0);
    }
    

    .animated-image {
        overflow: hidden;

        &.hand-holding-egg .animated-image-item {
            transform-origin: top left;
            opacity: 1;
            transform: rotate(90deg);
        }

        &.cta__image .animated-image-item {
            transform: translate(150px, 0);
        }
    }

    .js-animated-image.newsletter {
        overflow: hidden;

        .animated-image-item.newsletter-envelope {
            transform: rotate(80deg);
            opacity: 1;
            transform-origin: top left;
        }
    }

    .masthead__left {
        overflow: hidden;
        .masthead__image {
            transform: scale(1.25) translateY(50px);
        }
    }

    .masthead__right {
        overflow: hidden;

        .masthead__image {
            transform: scale(1.25) translateY(-50px);
        }
    }

    .masthead__text-bar > .text {
        overflow: hidden;

        > span {
            position: relative;
            transform: translateY(100%);
        }
    }

    .egg-plate-right {
        overflow: hidden;
        
        img {
            position: relative;
            opacity: 0;
            transform: translateX(-100%);
        }
    }

    .egg-plate-left {
        overflow: hidden;
        
        img {
            position: relative;
            opacity: 0;
            transform: translateX(100%);
        }
    }

    .masthead__left .js-masthead-content {
        > * {
            position: relative;
            opacity: 0;
            transform: translateY(80px);
        }
    }

    .masthead__right .js-masthead-content {
        > * {
            position: relative;
            opacity: 0;
            transform: translateY(-80px);
        }
    }

    .masthead__right .masthead__image {
        object-position: 0;
    }

    .dots {
        opacity: 0;
        transform: translateX(100px);
    }

    .js-animated-content > *:not(.read-more__box) {
        transform: translateY(50px);
        opacity: 0;
    }

    .farm-image-text-hen-sparkle {
        svg {
            path {
                opacity: 0;
            }
        }
    }

    .js-animated-product,
    .js-product-button {
        .product-listing__item,
        .product-button-item {
            overflow: hidden;
        }

        .product-button {
            transform: translateY(-100%);
            overflow: hidden;
        }

        .product-button__image {
            transform: scale(1.15);
            opacity: 0;
        }

        .product-button__details {
            transform: translateY(100%);

            &.is-done-loading .product-button__title:after,
            &.is-done-loading .product-button__title:before {
                animation: eggShakeV2 0.8s ease-in-out 0s 2 forwards;
            }
        }
    }

    .back-to-top a:hover {
        i {
            transform-origin: bottom center;
            animation: eggShakeV3 0.8s ease-in-out 0s 2 forwards;
        }
    }
}

@media (max-width: 1199px) {
    .loading-mask {
        display: none !important;
    }
}

@keyframes eggShake {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(10deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    30% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes eggShakeV2 {
    0% {
        transform: rotate(0deg) translate(0, -50%);
    }
    10% {
        transform: rotate(10deg) translate(0, -50%);
    }
    20% {
        transform: rotate(-10deg) translate(0, -50%);
    }
    30% {
        transform: rotate(10deg) translate(0, -50%);
    }
    40% {
        transform: rotate(-10deg) translate(0, -50%);
    }
    50% {
        transform: rotate(0deg) translate(0, -50%);
    }
    80% {
        transform: rotate(0deg) translate(0, -50%);
    }
    100% {
        transform: rotate(0deg) translate(0, -50%);
    }
}

@keyframes eggShakeV3 {
    0% {
        transform: rotate(0deg) translate(-50%, 0);
    }
    10% {
        transform: rotate(10deg) translate(-50%, 0);
    }
    20% {
        transform: rotate(-10deg) translate(-50%, 0);
    }
    30% {
        transform: rotate(10deg) translate(-50%, 0);
    }
    40% {
        transform: rotate(-10deg) translate(-50%, 0);
    }
    50% {
        transform: rotate(0deg) translate(-50%, 0);
    }
    80% {
        transform: rotate(0deg) translate(-50%, 0);
    }
    100% {
        transform: rotate(0deg) translate(-50%, 0);
    }
}