/* =============================================================
 * Video BG Pro — Frontend Styles (v2.1.2)
 *
 * v2.1.2 fixes:
 *   - Removed the 1px border on glassmorph that caused a visible "seam".
 *   - Mask gradients now feather smoothly from 0% to 100% (was 60%).
 *   - Scroll-tied mode now animates HEIGHT in addition to opacity/blur,
 *     making the "stronger as I scroll" effect visceral and visible.
 *   - Per-edge intensity variables so top/bottom can ramp independently.
 * ============================================================= */

/* ===============================================================
 * Container layering
 * =============================================================== */

.vbp-enabled,
.vbp-blend-enabled {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Critical: empty containers would collapse to 0 height and the
 * absolutely-positioned video wrapper would render at 0px tall. */
.vbp-enabled {
    min-height: var(--vbp-min-height, 200px);
}

/* v3.1.2 — Defensive: blend-only containers (Section Blend without Video BG)
 * also need a min-height, otherwise the edge wrapper has no vertical space
 * to occupy. Smaller default since blend doesn't imply hero-section context. */
.vbp-blend-enabled:not(.vbp-enabled) {
    min-height: 300px;
}

body.elementor-editor-active .vbp-enabled {
    min-height: var(--vbp-min-height, 300px);
}

/* ===============================================================
 * Video wrapper + iframe coverage
 * =============================================================== */

.vbp-video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    will-change: transform, filter, clip-path;
    transform-style: preserve-3d;
}

.vbp-video-wrapper > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

.vbp-iframe-wrapper {
    background: #000;
}

.vbp-iframe-wrapper .vbp-iframe-target,
.vbp-iframe-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, calc(100vh * 16 / 9));
    height: max(100%, calc(100vw * 9 / 16));
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

.vbp-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Container content sits ABOVE everything (video, overlay, edges). */
.vbp-enabled > .e-con-inner,
.vbp-enabled > .elementor-element,
.vbp-enabled > .elementor-widget,
.vbp-blend-enabled > .e-con-inner,
.vbp-blend-enabled > .elementor-element,
.vbp-blend-enabled > .elementor-widget {
    position: relative;
    z-index: 3;
}

/* ===============================================================
 * GSAP effect initial states (FOUC prevention)
 * =============================================================== */

.vbp-effect-reveal-mask    .vbp-video-wrapper { clip-path: inset(50% 50% 50% 50%); }
.vbp-effect-blur-focus     .vbp-video-wrapper { filter: blur(24px); }
.vbp-effect-cinematic-zoom .vbp-video-wrapper { transform: scale(1.3); }
.vbp-effect-tilt-3d        .vbp-video-wrapper { perspective: 1000px; }

/* ===============================================================
 * EDGE TRANSITIONS — v2.1.2 rewrite
 *
 * Per-edge intensity (0 → 1) drives ALL visual properties:
 *   - --vbp-edge-top-intensity     (driven by GSAP per-edge ScrollTrigger)
 *   - --vbp-edge-bottom-intensity  (driven by GSAP per-edge ScrollTrigger)
 *
 * Each edge selector aliases its specific variable to --vbp-edge-i
 * for cleaner rule expressions.
 *
 * KEY CHANGE: height now scales with intensity, so the blend zone
 * visibly grows as the user scrolls. This is what gives the "stronger
 * as I scroll" feeling that pure opacity scaling can't deliver.
 *
 * At intensity = 0:   blend zone is 30% of configured height (visible baseline)
 * At intensity = 1:   blend zone is 100% of configured height (full effect)
 * In static (non-scroll-tied) mode, intensity is pinned at 1 → full height.
 * =============================================================== */

.vbp-blend-enabled {
    --vbp-edge-top-intensity:    1;
    --vbp-edge-bottom-intensity: 1;
}

.vbp-edge {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    contain: layout paint;
    will-change: height, opacity, backdrop-filter, transform;
    /* Height scales with intensity — 30% baseline so it's visible even at scroll start */
    height: calc(var(--vbp-edge-height, 80px) * (0.3 + 0.7 * var(--vbp-edge-i, 1)));
    /* Smooth height changes for any non-scrub paths */
    transition: none;
}

.vbp-edge-top    { top:    0; --vbp-edge-i: var(--vbp-edge-top-intensity); }
.vbp-edge-bottom { bottom: 0; --vbp-edge-i: var(--vbp-edge-bottom-intensity); }

/* ---------------------------------------------------------------
 * Mode: Fade (gradient → target color)
 * --------------------------------------------------------------- */

.vbp-edge-mode-fade.vbp-edge-bottom {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--vbp-edge-color) 100%
    );
}

.vbp-edge-mode-fade.vbp-edge-top {
    background: linear-gradient(
        to top,
        transparent 0%,
        var(--vbp-edge-color) 100%
    );
}

/* ---------------------------------------------------------------
 * Mode: Blur — frosted strip
 *
 * v2.1.2: mask now fades smoothly 0% → 100% (was 0% → 60% which
 * created a hard inner edge where the blur abruptly fully appeared).
 * --------------------------------------------------------------- */

.vbp-edge-mode-blur {
    backdrop-filter: blur(calc(var(--vbp-edge-blur, 12px) * var(--vbp-edge-i, 1)));
    -webkit-backdrop-filter: blur(calc(var(--vbp-edge-blur, 12px) * var(--vbp-edge-i, 1)));
}

.vbp-edge-mode-blur.vbp-edge-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

.vbp-edge-mode-blur.vbp-edge-top {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
            mask-image: linear-gradient(to top, transparent 0%, black 100%);
}

/* ---------------------------------------------------------------
 * Mode: Glassmorphism — blur + frosted color gradient
 *
 * v2.1.2 critical fix:
 *   - REMOVED the 1px white border that was causing a visible
 *     horizontal line at the entry edge of the blend zone.
 *   - Backdrop blur is now ALSO masked with a smooth gradient
 *     (was hard-edged in v2.1.0/2.1.1).
 *   - The frosted color layer (::before) fades smoothly with no
 *     abrupt opacity transitions.
 * --------------------------------------------------------------- */

.vbp-edge-mode-glassmorph {
    backdrop-filter:
        blur(calc(var(--vbp-edge-blur, 12px) * var(--vbp-edge-i, 1)))
        saturate(140%);
    -webkit-backdrop-filter:
        blur(calc(var(--vbp-edge-blur, 12px) * var(--vbp-edge-i, 1)))
        saturate(140%);
}

/* Smooth the backdrop-filter edge with a mask so the blur fades in/out
 * gradually rather than starting at a hard pixel boundary. */
.vbp-edge-mode-glassmorph.vbp-edge-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

.vbp-edge-mode-glassmorph.vbp-edge-top {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
            mask-image: linear-gradient(to top, transparent 0%, black 100%);
}

/* Frosted color layer — sits inside the masked region.
 * Opacity scales softly with intensity AND is multiplied by user's
 * frost setting. No abrupt jumps. */
.vbp-edge-mode-glassmorph::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: calc(var(--vbp-edge-frost, 0.5) * var(--vbp-edge-i, 1));
}

.vbp-edge-mode-glassmorph.vbp-edge-bottom::before {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--vbp-edge-color) 100%
    );
}

.vbp-edge-mode-glassmorph.vbp-edge-top::before {
    background: linear-gradient(
        to top,
        transparent 0%,
        var(--vbp-edge-color) 100%
    );
}

/* NO border rule here. The v2.1.0/2.1.1 1px border-top was causing
 * the visible "seam" the user reported. Glass naturally has no hard
 * line — the visual cue comes from the gradient + blur, not a border. */

/* ---------------------------------------------------------------
 * Mode: Shape Divider Plus — animated SVG
 *
 * Shape rises into view as intensity grows. Already had its own
 * animation via transform — works well as-is.
 * --------------------------------------------------------------- */

.vbp-edge-mode-shape-divider {
    overflow: visible;
}

.vbp-edge-mode-shape-divider .vbp-edge-svg {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.vbp-edge-mode-shape-divider.vbp-edge-bottom .vbp-edge-svg {
    bottom: 0;
    transform: translateY(calc((1 - var(--vbp-edge-i, 1)) * 100%));
    transform-origin: bottom center;
}

.vbp-edge-mode-shape-divider.vbp-edge-top .vbp-edge-svg {
    top: 0;
    transform: translateY(calc((var(--vbp-edge-i, 1) - 1) * 100%));
    transform-origin: top center;
}

/* ===============================================================
 * v3.0 / v3.1.5 — Attachment modes (CURTAIN EFFECT)
 *
 * Sticky and GSAP Pin both use position:fixed + clip-path masking to
 * achieve the `background-attachment: fixed` curtain effect for video.
 *
 * The wrapper is taken OUT of the document flow (position:fixed,
 * coordinates relative to viewport, full viewport size). On every scroll,
 * JS updates clip-path to mask the wrapper to the section's current
 * intersection with the viewport.
 *
 * Result: video is painted at viewport coordinates and visible only where
 * the section currently is. As next section scrolls up, the section's
 * visible portion shrinks from the bottom, clip-path shrinks accordingly,
 * and next section paints over the video like a curtain.
 *
 * See applySticky() in motion-effects.js for the clip-path math.
 * =============================================================== */

.vbp-attached-sticky .vbp-video-wrapper,
.vbp-attached-pin    .vbp-video-wrapper {
    /* Take wrapper out of document flow, attach to viewport. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    /* clip-path is set by JS on every scroll tick. Default to hidden so
     * there's no flash of full-viewport video before first JS update. */
    clip-path: inset(100% 0 0 0);
    will-change: clip-path;
    /* Above page content but below modal/menu UI. */
    z-index: 0;
}

/* The container should NOT have overflow:hidden in sticky/pin mode —
 * the fixed-position wrapper isn't constrained by it anyway, but some
 * browsers create a new stacking context which interferes with z-index. */
.vbp-attached-sticky,
.vbp-attached-pin {
    overflow: visible !important;
}

/* Content layers ABOVE the fixed video. */
.vbp-attached-sticky > .e-con-inner,
.vbp-attached-pin > .e-con-inner {
    position: relative;
    z-index: 3;
}

/* ===============================================================
 * v3.0 / v3.1.1 — Motion effects perf hints + Blur custom property
 *
 * The Blur effect writes --vbp-fx-blur (a numeric value) via GSAP scrub.
 * CSS reads it via filter:blur(). This avoids GSAP's inability to cleanly
 * scrub `filter: blur(Npx)` as a string interpolation.
 * =============================================================== */

.vbp-motion-enabled .vbp-video-wrapper {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.vbp-fx-blur-active {
    filter: blur(var(--vbp-fx-blur, 0px));
    -webkit-filter: blur(var(--vbp-fx-blur, 0px));
}

/* ===============================================================
 * Accessibility — respect reduced motion
 * =============================================================== */

@media (prefers-reduced-motion: reduce) {
    .vbp-video-wrapper {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    .vbp-blend-enabled {
        --vbp-edge-top-intensity:    1 !important;
        --vbp-edge-bottom-intensity: 1 !important;
    }
    .vbp-edge-mode-shape-divider .vbp-edge-svg {
        transform: none !important;
    }
}

/* ===============================================================
 * Fallback — browsers without backdrop-filter (older Safari etc.)
 * Degrade gracefully to a solid gradient using the target color.
 * =============================================================== */

@supports not (backdrop-filter: blur(1px)) {
    .vbp-edge-mode-blur,
    .vbp-edge-mode-glassmorph {
        background: linear-gradient(
            to bottom,
            transparent,
            var(--vbp-edge-color)
        );
        opacity: var(--vbp-edge-i, 1);
    }
    .vbp-edge-mode-blur.vbp-edge-top,
    .vbp-edge-mode-glassmorph.vbp-edge-top {
        background: linear-gradient(
            to top,
            transparent,
            var(--vbp-edge-color)
        );
    }
}