/* =========================================================
   Scroll Video — Frontend CSS v4.1.0
   Cover-based adaptation — crop, not squeeze
   ========================================================= */

.scv-video {
    position: relative;
    width: 100%;
    height: var(--scv-height, 300vh);
    margin: 0;
    padding: 0;
}

.scv-video.scv-mode-autoplay,
.scv-video.scv-mode-youtube {
    height: auto;
}

.scv-video .scv-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@supports (height: 100dvh) {
    .scv-video .scv-sticky { height: 100dvh; }
}

.scv-video.scv-mode-autoplay .scv-sticky,
.scv-video.scv-mode-youtube .scv-sticky {
    position: relative;
    height: auto;
}

.scv-video[style*="--scv-position:left"] .scv-sticky { justify-content: flex-start; }
.scv-video[style*="--scv-position:right"] .scv-sticky { justify-content: flex-end; }

.scv-video .scv-inner {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   VIDEO ELEMENT
   ========================================================= */
.scv-video .scv-video-el {
    display: block;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
    will-change: transform, opacity;
}

@supports (height: 100dvh) {
    .scv-video .scv-video-el {
        height: 100dvh;
        max-height: 100dvh;
    }
}

.scv-video .scv-canvas {
    display: block;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    object-fit: contain;
}

@supports (height: 100dvh) {
    .scv-video .scv-canvas {
        height: 100dvh;
        max-height: 100dvh;
    }
}

.scv-video .scv-fallback-img {
    display: none;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    object-fit: cover;
    border-radius: var(--scv-radius, 0);
}

@supports (height: 100dvh) {
    .scv-video .scv-fallback-img {
        height: 100dvh;
        max-height: 100dvh;
    }
}

/* =========================================================
   FIT MODES — desktop
   ========================================================= */
.scv-video.scv-fit-cover .scv-video-el,
.scv-video.scv-fit-cover .scv-canvas,
.scv-video.scv-fit-cover .scv-fallback-img { object-fit: cover; }

.scv-video.scv-fit-contain .scv-video-el,
.scv-video.scv-fit-contain .scv-canvas,
.scv-video.scv-fit-contain .scv-fallback-img { object-fit: contain; }

.scv-video.scv-fit-fill .scv-video-el,
.scv-video.scv-fit-fill .scv-canvas,
.scv-video.scv-fit-fill .scv-fallback-img { object-fit: fill; }

.scv-video .scv-video-el,
.scv-video .scv-canvas,
.scv-video .scv-fallback-img { border-radius: var(--scv-radius, 0); }

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.scv-video .scv-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 10;
}

.scv-video .scv-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--scv-color, #111111);
    transition: width 0.08s linear;
}

/* =========================================================
   YOUTUBE
   ========================================================= */
.scv-video .scv-iframe-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--scv-radius, 0);
}

.scv-video .scv-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================================================
   TABLET (769–1024px)
   ========================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
    .scv-video {
        height: var(--scv-tablet-height, var(--scv-mobile-height, 300vh));
    }

    .scv-video[style*="--scv-tablet-position:left"] .scv-sticky { justify-content: flex-start; }
    .scv-video[style*="--scv-tablet-position:right"] .scv-sticky { justify-content: flex-end; }
    .scv-video[style*="--scv-tablet-position:center"] .scv-sticky { justify-content: center; }

    /* Tablet OFF → hide video */
    .scv-video.scv-tablet-off .scv-video-el,
    .scv-video.scv-tablet-off .scv-canvas { display: none !important; }

    .scv-video.scv-tablet-off .scv-fallback-tablet { display: block; }

    /* Collapse height if no fallback */
    .scv-video.scv-tablet-off.scv-tablet-no-fallback {
        height: 0 !important;
        min-height: 0 !important;
    }
    .scv-video.scv-tablet-off.scv-tablet-no-fallback .scv-sticky {
        display: none !important;
    }

    /* TABLET — cover + object-position */
    .scv-video.scv-tablet-on.scv-fit-cover .scv-video-el,
    .scv-video.scv-tablet-on.scv-fit-cover .scv-canvas,
    .scv-video.scv-tablet-on.scv-fit-cover .scv-fallback-mobile {
        object-fit: cover;
        object-position: var(--scv-tablet-obj-x, 50%) var(--scv-tablet-obj-y, 50%);
    }

    .scv-video.scv-tablet-on.scv-fit-contain .scv-video-el,
    .scv-video.scv-tablet-on.scv-fit-contain .scv-canvas {
        object-fit: contain;
    }

    .scv-video.scv-tablet-on.scv-fit-fill .scv-video-el,
    .scv-video.scv-tablet-on.scv-fit-fill .scv-canvas {
        object-fit: fill;
    }
}

/* =========================================================
   MOBILE (≤768px)
   ========================================================= */
@media (max-width: 768px) {
    .scv-video {
        height: var(--scv-mobile-height, 300vh);
    }

    .scv-video[style*="--scv-mobile-position:left"] .scv-sticky { justify-content: flex-start; }
    .scv-video[style*="--scv-mobile-position:right"] .scv-sticky { justify-content: flex-end; }
    .scv-video[style*="--scv-mobile-position:center"] .scv-sticky { justify-content: center; }

    /* Mobile OFF → hide video */
    .scv-video.scv-mobile-off .scv-video-el,
    .scv-video.scv-mobile-off .scv-canvas { display: none !important; }

    .scv-video.scv-mobile-off .scv-fallback-mobile { display: block; }

    /* Collapse height if no fallback */
    .scv-video.scv-mobile-off.scv-mobile-no-fallback {
        height: 0 !important;
        min-height: 0 !important;
    }
    .scv-video.scv-mobile-off.scv-mobile-no-fallback .scv-sticky {
        display: none !important;
    }

    /* MOBILE — cover + object-position */
    .scv-video.scv-mobile-on.scv-fit-cover .scv-video-el,
    .scv-video.scv-mobile-on.scv-fit-cover .scv-canvas,
    .scv-video.scv-mobile-on.scv-fit-cover .scv-fallback-mobile {
        object-fit: cover;
        object-position: var(--scv-mobile-obj-x, 50%) var(--scv-mobile-obj-y, 50%);
    }

    .scv-video.scv-mobile-on.scv-fit-contain .scv-video-el,
    .scv-video.scv-mobile-on.scv-fit-contain .scv-canvas {
        object-fit: contain;
    }

    .scv-video.scv-mobile-on.scv-fit-fill .scv-video-el,
    .scv-video.scv-mobile-on.scv-fit-fill .scv-canvas {
        object-fit: fill;
    }

    /* Mobile type = image → hide video entirely */
    .scv-video.scv-mobile-type-image .scv-video-el,
    .scv-video.scv-mobile-type-image .scv-canvas {
        display: none !important;
    }
    .scv-video.scv-mobile-type-image .scv-fallback-mobile {
        display: block !important;
    }
}

/* =========================================================
   PREVIEW DEVICE FRAMES
   ========================================================= */
body[data-scv-preview-device="tablet"] .scv-video {
    max-width: 768px;
    margin: 0 auto;
}

body[data-scv-preview-device="tablet"] .scv-video.scv-tablet-on.scv-fit-cover .scv-video-el,
body[data-scv-preview-device="tablet"] .scv-video.scv-tablet-on.scv-fit-cover .scv-canvas {
    object-position: var(--scv-tablet-obj-x, 50%) var(--scv-tablet-obj-y, 50%);
}

body[data-scv-preview-device="mobile"] .scv-video {
    max-width: 390px;
    margin: 0 auto;
}

body[data-scv-preview-device="mobile"] .scv-video.scv-mobile-on.scv-fit-cover .scv-video-el,
body[data-scv-preview-device="mobile"] .scv-video.scv-mobile-on.scv-fit-cover .scv-canvas {
    object-position: var(--scv-mobile-obj-x, 50%) var(--scv-mobile-obj-y, 50%);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .scv-video.scv-reduced-on .scv-video-el,
    .scv-video.scv-reduced-on .scv-canvas { transition: none; }
}