/* ─── Hover Preview: card overlay ─── */

/*
  Target: any element with data-hp-preview attribute.
  Works across all theme structures:
    - VideoTube Pro: .video-thumbnail[data-hp-preview]
    - WPST/apiJAV:  .post-thumbnail-container[data-hp-preview]
    - wrapper span: .hp-thumb-wrap[data-hp-preview]
*/
[data-hp-preview],
.hp-thumb-wrap {
    position: relative;
    overflow: hidden;
    /* border-radius inherited from each theme's own styles */
}

/* The video element that appears on hover */
.hp-video-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    z-index: 10;

    /* Start invisible, fade in gracefully */
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    background: #000;
}

.hp-video-overlay.hp-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Loading pulse on the thumbnail while video loads */
.hp-thumb-wrap.hp-loading::after,
[data-hp-preview].hp-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    animation: hp-pulse 0.8s ease-in-out infinite alternate;
    z-index: 9;
    border-radius: inherit;
    pointer-events: none;
}

@keyframes hp-pulse {
    from { opacity: 0.4; }
    to   { opacity: 0.8; }
}

/* Preview badge (optional) */
.hp-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 11;
    transition: opacity 0.2s ease;
}

/* Hide badge when video is playing */
.hp-thumb-wrap:hover .hp-badge,
[data-hp-preview]:hover .hp-badge {
    opacity: 0;
}

/* Error state: show small indicator */
.hp-thumb-wrap.hp-error::after,
[data-hp-preview].hp-error::after {
    content: '✕';
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(200,0,0,0.7);
    color: #fff;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    pointer-events: none;
}

/* ─── Theme integration helpers ─── */

/*
  If the theme card already positions the thumbnail absolutely,
  the plugin wraps it. These rules handle common theme structures.
*/

/* VideoTube / apiJAV theme card */
.video-card .hp-thumb-wrap,
.post-card  .hp-thumb-wrap,
.item       .hp-thumb-wrap {
    display: block;
    width: 100%;
    height: 100%;
}

/* Preserve aspect ratio on cards that use padding-bottom trick */
.thumb-ratio .hp-thumb-wrap {
    position: absolute;
    inset: 0;
}

/* Prevent double-nesting if theme also sets overflow:hidden */
.post-thumbnail > .hp-thumb-wrap {
    border-radius: 0;
}