/* ==================================================
   MOLLYRA LINK
   animation.css
   Part 1
================================================== */

/* ===========================
   Floating Avatar
=========================== */

@keyframes avatarFloat{

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

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

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

}

.profile-image{

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

}


/* ===========================
   Online Pulse
=========================== */

@keyframes onlinePulse{

    0%{

        box-shadow:
        0 0 0 rgba(45,255,115,.9);

    }

    50%{

        box-shadow:
        0 0 18px rgba(45,255,115,.9),
        0 0 35px rgba(45,255,115,.4);

    }

    100%{

        box-shadow:
        0 0 0 rgba(45,255,115,.9);

    }

}

.online{

    animation:onlinePulse 2s infinite;

}


/* ===========================
   Glow Border
=========================== */

@keyframes glowBorder{

    0%{

        border-color:rgba(157,78,221,.15);

    }

    50%{

        border-color:rgba(199,125,255,.8);

    }

    100%{

        border-color:rgba(157,78,221,.15);

    }

}

.hero-card{

    animation:glowBorder 4s infinite linear;

}


/* ===========================
   Hero Card Float
=========================== */

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

    100%{

        transform:translateY(0);

    }

}

.hero-card{

    animation:

        glowBorder 4s linear infinite,

        heroFloat 6s ease-in-out infinite;

}


/* ===========================
   Button Shine
=========================== */

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

.btn:hover::before{

    animation:shine .9s linear;

}


/* ===========================
   Pulse Button
=========================== */

@keyframes pulseButton{

    0%{

        box-shadow:
        0 0 0 rgba(157,78,221,.4);

    }

    50%{

        box-shadow:
        0 0 30px rgba(157,78,221,.6);

    }

    100%{

        box-shadow:
        0 0 0 rgba(157,78,221,.4);

    }

}

.btn.primary{

    animation:pulseButton 3s infinite;

}


/* ===========================
   Fade Up
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(40px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.hero-card{

    animation:

        fadeUp .9s ease,

        glowBorder 4s linear infinite,

        heroFloat 6s ease-in-out infinite;

}


/* ===========================
   Fade Left
=========================== */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:
        translateX(-40px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}


/* ===========================
   Fade Right
=========================== */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:
        translateX(40px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}


/* ===========================
   Fade Down
=========================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:
        translateY(-40px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


/* ===========================
   Neon Text Glow
=========================== */

@keyframes textGlow{

    0%{

        text-shadow:

        0 0 10px rgba(157,78,221,.2);

    }

    50%{

        text-shadow:

        0 0 18px rgba(199,125,255,.6),

        0 0 30px rgba(157,78,221,.4);

    }

    100%{

        text-shadow:

        0 0 10px rgba(157,78,221,.2);

    }

}

.hero h1{

    animation:textGlow 4s ease-in-out infinite;

}


/* ===========================
   Badge Glow
=========================== */

.badge{

    animation:textGlow 3s infinite;

}


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

@keyframes glowMove{

    0%{

        transform:
        translate(0,0);

    }

    50%{

        transform:
        translate(-40px,20px);

    }

    100%{

        transform:
        translate(0,0);

    }

}

.glow-1{

    animation:glowMove 14s infinite ease-in-out;

}

.glow-2{

    animation:glowMove 18s infinite ease-in-out reverse;

}

/* ==================================================
   MOLLYRA LINK
   animation.css
   Part 2
================================================== */

/* ===========================
   Link Card Hover
=========================== */

.link-card{

    transform-style:preserve-3d;

    will-change:transform;

}

.link-card:hover{

    transform:
        perspective(1000px)
        rotateX(2deg)
        rotateY(-2deg)
        translateY(-8px)
        scale(1.02);

}

.link-icon{

    transition:.45s ease;

}

.link-card:hover .link-icon{

    transform:
        rotate(-8deg)
        scale(1.15);

    box-shadow:
        0 0 25px rgba(157,78,221,.45);

}

/* ===========================
   Arrow Animation
=========================== */

@keyframes arrowMove{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(8px);

    }

    100%{

        transform:translateX(0);

    }

}

.link-card:hover .link-arrow{

    animation:arrowMove .8s infinite;

}


/* ===========================
   Stats Hover
=========================== */

.stats-card{

    transition:.45s;

}

.stats-card:hover h3{

    transform:scale(1.08);

}


/* ===========================
   Social Bounce
=========================== */

@keyframes socialBounce{

    0%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-10px);

    }

    60%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}

.social-card:hover span{

    animation:socialBounce .7s;

}


/* ===========================
   QR Floating
=========================== */

@keyframes qrFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.qr-image{

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

}


/* ===========================
   CTA Glow
=========================== */

@keyframes ctaGlow{

    0%{

        box-shadow:
        0 0 30px rgba(157,78,221,.20);

    }

    50%{

        box-shadow:
        0 0 70px rgba(157,78,221,.40);

    }

    100%{

        box-shadow:
        0 0 30px rgba(157,78,221,.20);

    }

}

.cta-card{

    animation:ctaGlow 5s infinite;

}


/* ===========================
   Aurora Background
=========================== */

@keyframes aurora{

    0%{

        background-position:
        0% 50%;

    }

    50%{

        background-position:
        100% 50%;

    }

    100%{

        background-position:
        0% 50%;

    }

}

body::before{

    background-size:250% 250%;

    animation:aurora 18s ease infinite;

}


/* ===========================
   Reveal
=========================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}


/* ===========================
   Footer Glow
=========================== */

.footer-logo img{

    animation:

        avatarFloat 6s ease-in-out infinite;

}


/* ===========================
   Gradient Shift
=========================== */

@keyframes gradientShift{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

.featured-card{

    background-size:250% 250%;

    animation:gradientShift 10s linear infinite;

}


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

.link-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.15),

            transparent

        );

    transition:1s;

}

.link-card:hover::after{

    left:150%;

}


/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0c0c16;

}

::-webkit-scrollbar-thumb{

    background:

        linear-gradient(

            180deg,

            var(--purple),

            var(--cyan)

        );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(

            180deg,

            var(--pink),

            var(--cyan)

        );

}


/* ===========================
   Selection
=========================== */

::selection{

    background:var(--purple);

    color:#fff;

}

::-moz-selection{

    background:var(--purple);

    color:#fff;

}


/* ===========================
   Smooth Transition
=========================== */

*{

    transition:

        background-color .3s ease,

        border-color .3s ease,

        color .3s ease,

        box-shadow .3s ease;

}