/* pure css soft card hover v4: no pointer lag */
.entry-card {
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    contain: paint !important;
    transition:
        transform .42s cubic-bezier(.22, .8, .22, 1),
        border-color .42s cubic-bezier(.22, .8, .22, 1),
        box-shadow .42s cubic-bezier(.22, .8, .22, 1),
        background-color .42s cubic-bezier(.22, .8, .22, 1) !important;
}

.entry-card:hover {
    transform: translate3d(0, -2px, 0) !important;
    border-color: rgba(58, 220, 255, .32) !important;
    box-shadow:
        0 0 0 1px rgba(52, 210, 255, .18),
        0 12px 30px rgba(0, 180, 255, .08),
        inset 0 0 28px rgba(60, 160, 255, .045) !important;
}

.entry-card::before {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(78, 226, 255, .18),
            rgba(95, 120, 255, .08) 38%,
            transparent 72%
        ) !important;
    transform: translate3d(0, 0, 0) scale(.98) !important;
    filter: none !important;
    transition:
        opacity .36s ease,
        transform .46s cubic-bezier(.22, .8, .22, 1) !important;
    will-change: opacity, transform !important;
}

.entry-card:hover::before {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

.entry-card::after {
    content: "" !important;
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    top: 0 !important;
    height: 1px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(80, 226, 255, .38),
            rgba(145, 105, 255, .24),
            transparent
        ) !important;
    transform: translate3d(0, 0, 0) !important;
    transition: opacity .38s ease !important;
}

.entry-card:hover::after {
    opacity: 1 !important;
}

.entry-card h3,
.entry-card p,
.entry-card .card-index,
.entry-card .card-status {
    position: relative !important;
    z-index: 2 !important;
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
}

@media (max-width: 768px) {
    .entry-card {
        will-change: auto !important;
    }

    .entry-card:hover {
        transform: none !important;
    }

    .entry-card::before,
    .entry-card::after {
        display: none !important;
    }
}