/* =========================================================
   ANIMATIONS
   Portfolio: Lekan Olowookere
   Version: 1.0
========================================================= */

/* ===========================
   KEYFRAMES
=========================== */

@keyframes float {

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

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

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

}

@keyframes pulse {

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes glow {

    0%{
        box-shadow:0 0 0 rgba(59,130,246,0);
    }

    50%{
        box-shadow:0 0 30px rgba(59,130,246,.35);
    }

    100%{
        box-shadow:0 0 0 rgba(59,130,246,0);
    }

}

@keyframes gradientFlow {

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

@keyframes shimmer {

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(250%);
    }

}

@keyframes rotateSlow{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ===========================
   UTILITIES
=========================== */

.float{

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

.float-slow{

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

.pulse{

    animation:pulse 2.5s infinite;
}

.glow{

    animation:glow 3s infinite;
}

.fade-up{

    animation:fadeUp .8s ease forwards;
}

.fade-in{

    animation:fadeIn .8s ease forwards;
}

.rotate{

    animation:rotateSlow 20s linear infinite;
}

/* ===========================
   GRADIENT TEXT
=========================== */

.gradient-text{

    background:var(--gradient-text);

    background-size:200% auto;

    background-clip:text;

    -webkit-background-clip:text;

    color:transparent;

    -webkit-text-fill-color:transparent;

    animation:gradientFlow 8s linear infinite;
}

/* ===========================
   SHIMMER EFFECT
=========================== */

.shimmer{

    position:relative;

    overflow:hidden;
}

.shimmer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    animation:shimmer 2.5s infinite;
}

/* ===========================
   HOVER LIFT
=========================== */

.hover-lift{

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

.hover-lift:hover{

    transform:translateY(-8px);
}

/* ===========================
   HOVER SCALE
=========================== */

.hover-scale{

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

.hover-scale:hover{

    transform:scale(1.04);
}

/* ===========================
   GLASS HOVER
=========================== */

.glass-hover{

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

.glass-hover:hover{

    backdrop-filter:blur(26px);

    border-color:rgba(59,130,246,.25);
}

/* ===========================
   CURSOR POINTER
=========================== */

.cursor{

    cursor:pointer;
}