/* =========================================================
   PULPBASE
   ANIMATIONS
========================================================= */


/* =========================================================
   HERO REVEAL
========================================================= */

.hero-reveal {

    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.hero-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}



/* =========================================================
   SCROLL INDICATOR
========================================================= */

@keyframes scrollIndicator {

    0% {

        transform:
            translateY(0);

        opacity: 0;

    }


    30% {

        opacity: 1;

    }


    100% {

        transform:
            translateY(80px);

        opacity: 0;

    }

}



/* =========================================================
   HERO ORGANIC MOVEMENT
========================================================= */

.shape-one {

    animation:
        organicMove
        9s
        ease-in-out
        infinite alternate;

}


@keyframes organicMove {

    0% {

        transform:
            rotate(0deg)
            translateY(0);

    }


    100% {

        transform:
            rotate(5deg)
            translateY(-18px);

    }

}



/* =========================================================
   HERO IMAGE ENTRY
========================================================= */

.hero-background img {

    animation:
        heroImageReveal
        1.4s
        ease
        both;

}


@keyframes heroImageReveal {

    from {

        opacity: 0;

        transform:
            scale(1.03);

    }


    to {

        opacity: 1;

        transform:
            scale(1);

    }

}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal-on-scroll {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.reveal-on-scroll.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}



/* CERTIFICATE STAGGER */

.certificate-card:nth-child(1) {
    transition-delay: 0.03s;
}

.certificate-card:nth-child(2) {
    transition-delay: 0.08s;
}

.certificate-card:nth-child(3) {
    transition-delay: 0.13s;
}

.certificate-card:nth-child(4) {
    transition-delay: 0.18s;
}

.certificate-card:nth-child(5) {
    transition-delay: 0.23s;
}

.certificate-card:nth-child(6) {
    transition-delay: 0.28s;
}

.certificate-card:nth-child(7) {
    transition-delay: 0.33s;
}

/* =========================================================
   ABOUT IMAGE EFFECTS
========================================================= */

.about-image {

    transition:
        transform 0.8s cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        );

}


.about-image-frame:hover
.about-image {

    transform: scale(1.025);

}


.about-eco-badge {

    animation:
        ecoBadgeFloat
        5s
        ease-in-out
        infinite;

}


@keyframes ecoBadgeFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }


    50% {

        transform:
            translateY(-10px);

    }

}

/* =========================================================
   HERO BRAND MARK MOTION
========================================================= */

.hero-brand-mark img {

    animation:
        heroBrandBreath
        8s
        ease-in-out
        infinite alternate;

}


@keyframes heroBrandBreath {

    from {
        transform:
            translateY(0)
            scale(1);
    }

    to {
        transform:
            translateY(-8px)
            scale(1.015);
    }

}

/* =========================================================
   CATEGORY PRODUCT FLOATING
========================================================= */

.category-card:nth-child(1)
.category-image {

    animation:
        categoryFloatOne
        6s
        ease-in-out
        infinite;

}


.category-card:nth-child(2)
.category-image {

    animation:
        categoryFloatTwo
        7s
        ease-in-out
        infinite;

}


.category-card:nth-child(3)
.category-image {

    animation:
        categoryFloatOne
        7.5s
        ease-in-out
        infinite reverse;

}


.category-card:nth-child(4)
.category-image {

    animation:
        categoryFloatTwo
        6.5s
        ease-in-out
        infinite;

}


.category-card:nth-child(5)
.category-image {

    animation:
        categoryFloatOne
        8s
        ease-in-out
        infinite;

}


@keyframes categoryFloatOne {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-9px);

    }

}


@keyframes categoryFloatTwo {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-7px)
            rotate(1.5deg);

    }

}

/* =========================================================
   CATEGORY FLOAT
========================================================= */

.category-card:nth-child(1)
.category-image {

    animation:
        categoryFloatOne
        5.5s
        ease-in-out
        infinite;

}


.category-card:nth-child(2)
.category-image {

    animation:
        categoryFloatTwo
        6s
        ease-in-out
        infinite;

}


.category-card:nth-child(3)
.category-image {

    animation:
        categoryFloatOne
        6.5s
        ease-in-out
        infinite;

}


.category-card:nth-child(4)
.category-image {

    animation:
        categoryFloatTwo
        5.8s
        ease-in-out
        infinite;

}


@keyframes categoryFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


@keyframes categoryFloatTwo {

    0%,
    100% {
        transform: translateY(-3px);
    }

    50% {
        transform: translateY(5px);
    }

}


.category-card:hover
.category-image {

    animation-play-state: paused;

}

/* =========================================================
   BENEFITS ANIMATION
========================================================= */

.benefit-item:nth-child(1) {
    transition-delay: 0.02s;
}

.benefit-item:nth-child(2) {
    transition-delay: 0.06s;
}

.benefit-item:nth-child(3) {
    transition-delay: 0.10s;
}

.benefit-item:nth-child(4) {
    transition-delay: 0.14s;
}

.benefit-item:nth-child(5) {
    transition-delay: 0.18s;
}

.benefit-item:nth-child(6) {
    transition-delay: 0.22s;
}

.benefit-item:nth-child(7) {
    transition-delay: 0.26s;
}

.benefit-item:nth-child(8) {
    transition-delay: 0.30s;
}


.benefit-icon-wrap {

    animation:
        benefitFloat
        5s
        ease-in-out
        infinite;

}


@keyframes benefitFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-6px);

    }

}

/* =========================================================
   WHY CHOOSE US ANIMATIONS
========================================================= */

.why-item:nth-child(1) {
    transition-delay: 0.03s;
}

.why-item:nth-child(2) {
    transition-delay: 0.07s;
}

.why-item:nth-child(3) {
    transition-delay: 0.11s;
}

.why-item:nth-child(4) {
    transition-delay: 0.15s;
}

.why-item:nth-child(5) {
    transition-delay: 0.19s;
}


/* =========================================================
   TESTIMONIAL EFFECTS
========================================================= */

.testimonial-featured {
    transition-delay: 0.05s;
}


.testimonial-card:nth-child(1) {
    transition-delay: 0.08s;
}


.testimonial-card:nth-child(2) {
    transition-delay: 0.14s;
}


.testimonial-card:nth-child(3) {
    transition-delay: 0.20s;
}


.testimonial-quote {
    animation: testimonialQuoteFloat 4s ease-in-out infinite;
}


@keyframes testimonialQuoteFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

} 

/* =========================================================
   TESTIMONIAL EFFECTS
========================================================= */

.testimonial-featured {
    transition-delay: 0.05s;
}


.testimonial-card:nth-child(1) {
    transition-delay: 0.08s;
}


.testimonial-card:nth-child(2) {
    transition-delay: 0.14s;
}


.testimonial-card:nth-child(3) {
    transition-delay: 0.20s;
}


.testimonial-quote {
    animation: testimonialQuoteFloat 4s ease-in-out infinite;
}


@keyframes testimonialQuoteFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}

/* =========================================================
   FAQ STAGGER
========================================================= */

.faq-item:nth-child(1) {
    transition-delay: 0.03s;
}

.faq-item:nth-child(2) {
    transition-delay: 0.06s;
}

.faq-item:nth-child(3) {
    transition-delay: 0.09s;
}

.faq-item:nth-child(4) {
    transition-delay: 0.12s;
}

.faq-item:nth-child(5) {
    transition-delay: 0.15s;
}

.faq-item:nth-child(6) {
    transition-delay: 0.18s;
}

.faq-item:nth-child(7) {
    transition-delay: 0.21s;
}

/* =========================================================
   FOOTER ANIMATIONS
========================================================= */

.footer-brand {
    transition-delay: 0.03s;
}

.footer-column:nth-child(2) {
    transition-delay: 0.08s;
}

.footer-column:nth-child(3) {
    transition-delay: 0.13s;
}

.footer-column:nth-child(4) {
    transition-delay: 0.18s;
}


.footer-big-word {
    animation: footerWordFloat 8s ease-in-out infinite alternate;
}


@keyframes footerWordFloat {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }

}