/* =========================================================
   HOMEPAGE VIDEO PREVIEW SYSTEM v2
   Single-authority architecture.
   ========================================================= */

.video-hover-preview{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    isolation:isolate;

    transform:scale(1);
    transform-origin:center center;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.hero-video-card.video-hover-preview{
    width:100%;
}

.hero-preview-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity 180ms ease;

    z-index:1;

    background:#000;
}

.video-poster-frame{
    position:relative;

    z-index:3;

    opacity:1;

    transition:opacity 180ms ease;
}

.mobile-video-play-mark{
    display:none;

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    z-index:4;

    width:60px;
    height:60px;

    border:1px solid rgba(212,175,55,.82);
    border-radius:50%;

    background:rgba(0,0,0,.58);

    color:var(--gold);

    font-size:24px;

    align-items:center;
    justify-content:center;
}

.video-hover-preview.preview-running{
    transform:scale(1.035);

    border-color:rgba(212,175,55,.78);

    box-shadow:
        0 0 0 1px rgba(212,175,55,.24),
        0 20px 48px rgba(0,0,0,.55);
}

.video-hover-preview.preview-running .hero-preview-video{
    opacity:1;
}

.video-hover-preview.preview-running .video-poster-frame{
    opacity:0;
}

@media screen and (max-width:760px){

    .video-hover-preview.preview-running .mobile-video-play-mark{
        display:flex;
    }

}
/* =========================================================
   MOBILE VIDEO MUTE SIGN
   Shows that scroll preview is muted and invites tap.
   ========================================================= */

.video-muted-sign {
    display: none;
}

@media screen and (max-width: 760px) {
    .video-hover-preview.preview-running::after {
        content: "MUTED";
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 6;
        padding: 5px 8px;
        border: 1px solid rgba(212, 175, 55, 0.72);
        background: rgba(0, 0, 0, 0.68);
        color: var(--gold);
        font-size: 10px;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        pointer-events: none;
    }
}

/* =========================================================
   MEDIA PLAYER FRAME CORRECTION v1
   All videos must display full frame. No cropping.
   ========================================================= */

.hero-preview-video,
.np-media-popup-video {
    object-fit: contain !important;
    background: #000 !important;
}

.video-hover-preview.preview-running .video-poster-frame {
    opacity: 1 !important;
    visibility: visible !important;
    filter: blur(10px) brightness(0.22);
    transform: scale(1.04);
}

.video-hover-preview.preview-running .hero-preview-video {
    z-index: 5 !important;
    opacity: 1 !important;
}

.video-hover-preview.preview-running .mobile-video-play-mark {
    z-index: 7 !important;
}

.np-video-frame {
    background:
        radial-gradient(circle at center, rgba(212, 175, 55, 0.10), transparent 28rem),
        #000 !important;
}

.np-media-popup-video {
    width: 100% !important;
    height: 100% !important;
    max-height: 70vh;
}