/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 23 2026 | 11:36:16 */
/* 1. ANCHOR THE CONTAINER */
/* Allows the play button to align absolutely to the middle of the video box */
.play-on-scroll {
    position: relative !important;
}

/* 2. THE CUSTOM BLANKET OVERLAY */
.custom-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15); /* Soft premium tint over the static video frame */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none; /* Keeps it untappable until revealed */
}

/* Fades the button into view if autoplay fails */
.custom-video-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* 3. THE CENTERED GLASS PLAY BUTTON */
.custom-video-overlay .play-btn-circle {
    width: 84px;
    height: 84px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px); /* Premium soft frosted glass effect */
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, background 0.25s ease;
}

/* Interactive scale pop when hovered */
.custom-video-overlay:hover .play-btn-circle {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.95);
}

/* Clean CSS Play Triangle Arrow inside the circle */
.custom-video-overlay .play-btn-circle::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent #111111; /* Matches your main primary black token */
    margin-left: 6px; /* Optical adjustment to center a triangle perfectly */
}