/* ==========================================================
   CampShopping Landing
   animation.css
   Version : 1.0
==========================================================*/


/* ========= Hero Fade ========= */

@keyframes heroFade{

    from{

        opacity:0;

        transform:
        translateY(24px)
        scale(.96);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}


/* ========= Logo Glow ========= */

.logo{

    animation:

    logoGlow 5s ease-in-out infinite;

}


@keyframes logoGlow{

    0%{

        filter:
        drop-shadow(0 0 10px rgba(245,130,32,.15));

    }

    50%{

        filter:
        drop-shadow(0 0 35px rgba(245,130,32,.55));

    }

    100%{

        filter:
        drop-shadow(0 0 10px rgba(245,130,32,.15));

    }

}


/* ========= Title ========= */

h1{

    animation:

    fadeUp .8s ease .35s both;

}

.hero p{

    animation:

    fadeUp .8s ease .55s both;

}

.buttons{

    animation:

    fadeUp .8s ease .8s both;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(30px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


/* ========= Buttons ========= */

.btn{

    overflow:hidden;

    position:relative;

}

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    width:60%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform:
        translateX(-180%)
        skewX(-25deg);

}

.btn:hover::before{

    animation:

    shine .9s ease;

}

@keyframes shine{

    from{

        transform:
            translateX(-180%)
            skewX(-25deg);

    }

    to{

        transform:
            translateX(320%)
            skewX(-25deg);

    }

}

/* ========= Loader ========= */

.loader-line::after{

    animation:

    loading 2.2s ease forwards;

}

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}



@keyframes loaderHide{

    to{

        opacity:0;

        visibility:hidden;

    }

}

/* ========= Overlay Glow ========= */



/* ========= Glass ========= */

.glass{

    animation:
    heroFade 1.2s ease forwards;
    position:relative;
    overflow:hidden;

}

.glass::before{

    content:"";

    position:absolute;

    inset:-50%;

    background:

    radial-gradient(

    circle,

    rgba(245,130,32,.12),

    transparent 60%

    );

    animation:glassRotate 60s linear infinite;
    opacity:0.4;

}

@keyframes glassRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.glass>*{

    position:relative;

    z-index:2;

}


/* ========= Mouse ========= */

.btn{

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}


/* ========= Reduced Motion ========= */

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

*{

animation:none!important;

transition:none!important;
scroll-behavior:auto!important;

}

}
/* ==========================
      Background Glow
========================== */


@keyframes backgroundGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.08);

    }

    100%{

        filter:brightness(1);

    }

}

@keyframes bgMove{

    from{

        transform:
            translate(-8%,-4%)
            scale(1);

    }

    to{

        transform:
            translate(8%,5%)
            scale(1.15);

    }

}