/*
 * 金领科技 · 缩略图悬停效果
 * From tfbkw.com reference page style#tengfei-thumb-hover-badge-css.
 * Scoped to Zibll post cards; original links, thumbnails, sticky ribbons
 * and article cover thumbnails are not changed.
 */

/* Darken image only while hovered. */
.posts-item .item-thumbnail {
    position: relative;
}
.posts-item .item-thumbnail::before {
    content: "";
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    background: rgba(0, 0, 0, 0) !important;
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
    transition: background .35s ease;
}
.posts-item .item-thumbnail:hover::before,
.posts-item .item-thumbnail:focus-within::before {
    background: rgba(0, 0, 0, .5) !important;
}

/* Compact three-bar equalizer. The earlier gradient had a 400%-height
   image, which created giant white squares at some animation frames. */
.posts-item .item-thumbnail::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 36px !important;
    height: 28px !important;
    margin: 0 !important;
    border: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.9) !important;
    -webkit-transform: translate(-50%, -50%) scale(.9) !important;
    transition: transform .22s ease-out, opacity .22s ease-out;
    background-image:
        linear-gradient(#fff,#fff),
        linear-gradient(#fff,#fff),
        linear-gradient(#fff,#fff) !important;
    background-size: 6px 9px, 6px 22px, 6px 14px;
    background-repeat: no-repeat !important;
    background-position: 3px center, 15px center, 27px center !important;
    animation: jlc-tengfei-thumb-matrix .9s ease-in-out infinite paused;
}
.posts-item .item-thumbnail:hover::after,
.posts-item .item-thumbnail:focus-within::after {
    opacity: .95;
    transform: translate(-50%, -50%) scale(1) !important;
    -webkit-transform: translate(-50%, -50%) scale(1) !important;
    animation-play-state: running;
}
@keyframes jlc-tengfei-thumb-matrix {
    0%, 100% { background-size: 6px 9px, 6px 22px, 6px 14px; }
    33% { background-size: 6px 21px, 6px 11px, 6px 19px; }
    66% { background-size: 6px 14px, 6px 19px, 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .posts-item .item-thumbnail::before,
    .posts-item .item-thumbnail::after {
        transition-duration: .01ms !important;
    }
    .posts-item .item-thumbnail::after {
        animation: none !important;
    }
}