/*==============================================================
    GENIUNE.PK
    animation.css
==============================================================*/


/*==============================================================
    GLOBAL TRANSITIONS
==============================================================*/

*{
    transition:all .30s ease;
}


/*==============================================================
    FLOATING BACKGROUND
==============================================================*/

.bg-circle-1{
    animation:floatOne 10s ease-in-out infinite;
}

.bg-circle-2{
    animation:floatTwo 12s ease-in-out infinite;
}

.bg-circle-3{
    animation:floatThree 15s ease-in-out infinite;
}

@keyframes floatOne{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(30px,20px);
    }

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

}

@keyframes floatTwo{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-25px,30px);
    }

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

}

@keyframes floatThree{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}


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

.hero-image{

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

}

@keyframes heroFloat{

    0%{
        transform:translateY(0px);
    }

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

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

}


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

.fade-in{

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*==============================================================
    SLIDE UP
==============================================================*/

.slide-up{

    animation:slideUp .7s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==============================================================
    SLIDE LEFT
==============================================================*/

.slide-left{

    animation:slideLeft .8s ease;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*==============================================================
    SLIDE RIGHT
==============================================================*/

.slide-right{

    animation:slideRight .8s ease;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*==============================================================
    POP IN
==============================================================*/

.pop{

    animation:pop .45s ease;

}

@keyframes pop{

    0%{

        transform:scale(.7);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


/*==============================================================
    PULSE
==============================================================*/

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,99,235,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,99,235,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,99,235,0);

    }

}


/*==============================================================
    STATUS BADGE
==============================================================*/

.status-badge.success{

    animation:successGlow 2.5s infinite;

}

@keyframes successGlow{

    0%{

        box-shadow:0 0 0 rgba(34,197,94,.25);

    }

    50%{

        box-shadow:0 0 25px rgba(34,197,94,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(34,197,94,.25);

    }

}


/*==============================================================
    BUTTON HOVER
==============================================================*/

.btn:hover{

    transform:translateY(-4px) scale(1.02);

}


/*==============================================================
    CARD HOVER
==============================================================*/

.glass-card:hover,
.info-card:hover,
.product-card:hover,
.stats-card:hover{

    transform:translateY(-8px);

}


/*==============================================================
    ICON ROTATE
==============================================================*/

.icon-box:hover{

    transform:rotate(10deg) scale(1.08);

}


/*==============================================================
    QR BUTTON
==============================================================*/

#btnScan:hover{

    animation:scanShake .4s;

}

@keyframes scanShake{

    0%{transform:translateX(0);}

    20%{transform:translateX(-4px);}

    40%{transform:translateX(4px);}

    60%{transform:translateX(-4px);}

    80%{transform:translateX(4px);}

    100%{transform:translateX(0);}

}


/*==============================================================
    VERIFY BUTTON
==============================================================*/

#btnVerify{

    position:relative;

    overflow:hidden;

}

#btnVerify::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.35);

    transform:skewX(-25deg);

}

#btnVerify:hover::after{

    left:160%;

    transition:1s;

}


/*==============================================================
    INFO CARD BORDER
==============================================================*/

.info-card{

    position:relative;

    overflow:hidden;

}

.info-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:#2563eb;

    transition:.4s;

}

.info-card:hover::before{

    height:100%;

}


/*==============================================================
    STATISTICS COUNTER
==============================================================*/

.stats-card h2{

    animation:numberFloat 3s infinite;

}

@keyframes numberFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

    100%{

        transform:translateY(0);

    }

}


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

footer{

    animation:fadeIn 1.5s;

}


/*==============================================================
    LOADER
==============================================================*/

.loader{

    animation:rotateLoader 1s linear infinite;

}

@keyframes rotateLoader{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


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

.reveal{

    opacity:0;

    transform:translateY(60px);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/*==============================================================
    HERO TITLE
==============================================================*/

.hero-content h1{

    animation:titleAnimation 1s ease;

}

@keyframes titleAnimation{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}