/* ==================================================
   BUTTONS
================================================== */

.btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .6rem;

    padding: .95rem 1.8rem;

    border: none;

    border-radius: 999px;

    font-size: .95rem;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease;

}


/* ==================================================
   PRIMARY BUTTON
================================================== */

.btn-primary {

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #00d9ff,
        #3d8cff
    );

    box-shadow:
        0 12px 30px rgba(0,180,255,.25),
        inset 0 1px 1px rgba(255,255,255,.35);

}

.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:

        0 18px 40px rgba(0,180,255,.35),

        0 0 25px rgba(0,220,255,.18),

        inset 0 1px 1px rgba(255,255,255,.45);

}

.btn-primary:active {

    transform: translateY(-1px);

}


/* ==================================================
   GLASS BUTTON
================================================== */

.btn-glass {

    color: var(--text-primary);

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

    border: 1px solid rgba(255,255,255,.22);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.35),

        0 10px 24px rgba(0,40,120,.08);

}

.btn-glass:hover {

    transform: translateY(-4px);

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

    border-color: rgba(255,255,255,.35);

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.45),

        0 16px 35px rgba(0,40,120,.12),

        0 0 20px rgba(0,210,255,.10);

}

.btn-glass:active {

    transform: translateY(-1px);

}


/* ==================================================
   SHINE EFFECT
================================================== */

.btn::before {

    content: "";

    position: absolute;

    top: -150%;

    left: -45%;

    width: 30%;

    height: 400%;

    background: linear-gradient(
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform: rotate(20deg);

    opacity: 0;

    pointer-events: none;

}

.btn:hover::before {

    opacity: 1;

    animation: shine 1.2s linear;