/* ==================================================
   GLASS CARD 
================================================== */

.glass-card {

    position: relative;

    overflow: hidden;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,.16),
        rgba(255,255,255,.08)
    );

    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);

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

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.55),
        inset 0 -1px 1px rgba(255,255,255,.08),
        0 25px 80px rgba(0,40,120,.18);

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

}


/* ==================================================
   TOP HIGHLIGHT
================================================== */

.glass-card::before {
    border: 1px solid transparent;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.55),
            rgba(0,210,255,.18),
            rgba(255,255,255,.08)
        );
}


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

.glass-card::after {

    content: "";

    position: absolute;

    top: -120%;

    left: -40%;

    width: 35%;

    height: 340%;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform: rotate(18deg);

    opacity: 0;

    pointer-events: none;

}


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

.glass-card:hover {

    transform: translateY(-8px);

    background: linear-gradient(
        145deg,
        rgba(255,255,255,.20),
        rgba(255,255,255,.10)
    );

box-shadow:

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

    inset 0 -1px 1px rgba(255,255,255,.10),

    0 25px 80px rgba(0,40,120,.18),

    0 0 45px rgba(0,190,255,.12);

}

.glass-card:hover::after {

    opacity: 1;

    animation: shine 1.4s linear;

}