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

.reveal{

    opacity:0;

    transform:
        translateY(80px);

    transition:
        opacity 1s ease,
        transform 1s ease;

}

.reveal.active{

    opacity:1;

    transform:
        translateY(0);

}

/* =========================
   STAGGER
========================= */

.reveal-delay-1{

    transition-delay:.15s;

}

.reveal-delay-2{

    transition-delay:.3s;

}

.reveal-delay-3{

    transition-delay:.45s;

}

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

.bento-card{

    position:relative;

}

.bento-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(0,209,255,.15),
            transparent,
            rgba(0,255,178,.08)
        );

    opacity:0;

    transition:.45s ease;

    pointer-events:none;

}

.bento-card:hover::after{

    opacity:1;

}

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

.dashboard-card{

    animation:
        floatingCard 6s ease-in-out infinite;

}

@keyframes floatingCard{

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

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

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

}

/* =========================
   BUTTON FX
========================= */

.btn-primary{

    position:relative;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transition:.7s;

}

.btn-primary:hover::before{

    left:120%;

}