/* =========================================================
   ANIMATION SYSTEM V1
   DIVYA FOOD PROCESSING
   ========================================================= */

/* =========================================================
   FADE UP
   ========================================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

/* =========================================================
   FADE IN
   ========================================================= */

@keyframes fadeIn {

    from {

        opacity: 0;
    }

    to {

        opacity: 1;
    }
}

/* =========================================================
   SCALE IN
   ========================================================= */

@keyframes scaleIn {

    from {

        opacity: 0;

        transform:
            scale(.95);
    }

    to {

        opacity: 1;

        transform:
            scale(1);
    }
}

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

@keyframes float {

    0% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-15px);
    }

    100% {

        transform:
            translateY(0);
    }
}

/* =========================================================
   GRADIENT SHIFT
   ========================================================= */

@keyframes gradientShift {

    0% {

        background-position: 0% 50%;
    }

    50% {

        background-position: 100% 50%;
    }

    100% {

        background-position: 0% 50%;
    }
}

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

.reveal {

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.reveal.active {

    opacity: 1;

    transform:
        translateY(0);
}

.reveal-left {

    opacity: 0;

    transform:
        translateX(-60px);

    transition:
        all .9s ease;
}

.reveal-left.active {

    opacity: 1;

    transform:
        translateX(0);
}

.reveal-right {

    opacity: 0;

    transform:
        translateX(60px);

    transition:
        all .9s ease;
}

.reveal-right.active {

    opacity: 1;

    transform:
        translateX(0);
}

.reveal-scale {

    opacity: 0;

    transform:
        scale(.95);

    transition:
        all .8s ease;
}

.reveal-scale.active {

    opacity: 1;

    transform:
        scale(1);
}
/* =========================================================
   FLOATING HERO LOGO
   ========================================================= */

.floating-logo {

    animation:
        float 7s ease-in-out infinite;
}

/* =========================================================
   GOLD SHIMMER
   ========================================================= */

.gold-shimmer {

    background:
        linear-gradient(
        120deg,
        var(--premium-gold),
        #f4d67c,
        var(--premium-gold)
        );

    background-size:
        200% auto;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        gradientShift 4s linear infinite;
}

/* =========================================================
   GLOW HOVER
   ========================================================= */

.glow-hover {

    transition:
        var(--transition-normal);
}

.glow-hover:hover {

    box-shadow:
        0 20px 50px rgba(212,175,55,.25);
}

/* =========================================================
   IMAGE ZOOM
   ========================================================= */

.zoom-image {

    overflow: hidden;
}

.zoom-image img {

    transition:
        transform 1s ease;
}

.zoom-image:hover img {

    transform:
        scale(1.08);
}