/* =============================================================
   SamuraIT Video Popup  –  v0.1.0
   Author: Florian Erfurth (SamuraIT) · www.samurait.de
   ============================================================= */


/* ---------------------------------------------------------------
   Button
--------------------------------------------------------------- */

.svp-button {
    display: inline-block;
    position: relative;
    cursor: pointer;
    /* overflow:hidden clips images to border-radius without hiding box-shadow */
    overflow: hidden;
    /* GPU-layer for smooth transitions */
    will-change: transform, box-shadow;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Lift effect on hover / focus */
.svp-button:hover,
.svp-button:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    outline: none;
}

/* Images inside button */
.svp-button img {
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Default image – fades out on hover when a hover-src is present */
.svp-button .svp-img-default {
    transition: opacity 0.35s ease;
}

/* Hover image – stacked on top, invisible by default */
.svp-button .svp-img-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Cross-fade when a hover image exists */
.svp-has-hover:hover .svp-img-hover,
.svp-has-hover:focus-visible .svp-img-hover {
    opacity: 1;
}

.svp-has-hover:hover .svp-img-default,
.svp-has-hover:focus-visible .svp-img-default {
    opacity: 0;
}


/* ---------------------------------------------------------------
   Overlay (full-screen backdrop)
--------------------------------------------------------------- */

.svp-overlay {
    /*
     * Always display:flex so the video element always has layout dimensions.
     * Hidden via opacity/visibility/pointer-events instead of display:none.
     * This keeps the video buffered between opens (no src reset needed) and
    * helps Safari/WebKit keep native controls in sync across open/close cycles.
     */
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.78);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.svp-overlay.svp-active {
    visibility: visible;
    pointer-events: auto;
    animation: svp-overlay-in 0.3s ease forwards;
}

.svp-overlay.svp-active.svp-closing {
    animation: svp-overlay-out 0.76s ease forwards;
}


/* ---------------------------------------------------------------
   Popup wrapper (holds close button + video)
--------------------------------------------------------------- */

.svp-popup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* Prevent popup itself from acting as overlay click target */
    pointer-events: auto;
}

/* Open animation */
.svp-overlay.svp-active .svp-popup {
    animation: svp-popup-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Close animation */
.svp-overlay.svp-active.svp-closing .svp-popup {
    animation: svp-popup-out 0.72s ease-in forwards;
}

/*
 * Safari/WebKit can keep a stale native controls layer size when a <video>
 * is repeatedly shown inside aggressive 3D transform animations.
 * Use gentle 2D popup animations there to keep controls in sync.
 */
.svp-is-safari .svp-overlay.svp-active .svp-popup {
    animation: svp-popup-in-safari 0.28s ease-out forwards;
}

.svp-is-safari .svp-overlay.svp-active.svp-closing .svp-popup {
    animation: svp-popup-out-safari 0.3s ease-in forwards;
}


/* ---------------------------------------------------------------
   Video wrapper + video element
   Wrapper owns sizing/shadow; video fills it 100 %.
   This fixes a Safari (WebKit) bug where the native controls layer
   is sized from HTML attributes, not CSS — by making the video
   element always 100 % of a well-known container, the controls
   always cover the full visible area.
--------------------------------------------------------------- */

.svp-video-wrap {
    display: block;
    /*
     * 16:9 default before video metadata is known (lazy-load).
     * JS updates aspect-ratio after loadedmetadata.
     * max-height + aspect-ratio: browser reduces width automatically
     * so height never exceeds 75 vh, even for portrait videos.
     */
    width: min(90vw, 1280px);
    aspect-ratio: 16 / 9;
    max-height: 75vh;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    position: relative;
}

.svp-video {
    display: block;
    width: 100%;
    height: 100%;
    /*
     * object-fit: contain keeps the correct video ratio inside the fixed 16:9
     * wrapper while fitting the available box.
     */
    object-fit: contain;
}


/* ---------------------------------------------------------------
   Close button  (small circle with ×, top-right next to video)
--------------------------------------------------------------- */

.svp-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.88);
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease;
    /* Keep button on top of video in rare overlap situations */
    position: relative;
    z-index: 1;
}

.svp-close:hover,
.svp-close:focus-visible {
    background: #ffffff;
    transform: scale(1.12);
    outline: none;
}

.svp-close span {
    /* Optical centre adjustment for the × glyph */
    margin-top: -1px;
    pointer-events: none;
}


/* ---------------------------------------------------------------
   Body scroll-lock helper (applied by JS)
--------------------------------------------------------------- */

body.svp-no-scroll {
    overflow: hidden;
}


/* ---------------------------------------------------------------
   Keyframe animations
--------------------------------------------------------------- */

/* Backdrop */
@keyframes svp-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes svp-overlay-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/*
 * Popup appears: slides toward the viewer along the Z-axis.
 * Starts far away (small + faded), ends at natural size.
 */
@keyframes svp-popup-in {
    from {
        opacity: 0;
        transform: perspective(1000px) translateZ(-260px) scale(0.76);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) translateZ(0px) scale(1);
    }
}

/*
 * Popup disappears:
 *  0 %  – at rest
 *  7 %  – tiny run-up (barely perceptible forward nudge)
 * 65 %  – still mostly opaque, but already deep inside the screen
 * 100 % – fully gone, very far away
 *
 * The slow opacity fade lets the viewer "watch it disappear" rather than
 * just blinking out. The early scale-down is steep so it feels like it's
 * really shooting away from the user.
 */
@keyframes svp-popup-out {
    from {
        opacity: 1;
        transform: perspective(1000px) translateZ(0px) scale(1);
    }
    to {
        opacity: 0;
        transform: perspective(1000px) translateZ(-1800px) scale(0.08);
    }
}

@keyframes svp-popup-in-safari {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes svp-popup-out-safari {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}