/*
Theme Name: Al Wadi
Theme URI: https://craftspot.ae/
Template: hello-elementor
Author: Craftspot Designs
Author URI: https://craftspot.ae/
Version: 1.1.1.1779440422
Updated: 2026-05-22 09:00:22
*/

/* ── Scroll frame-sequence hero ──────────────────────────────────────────────
   z-index stack (low → high):
     0  canvas                   — frame animation
     1  ::before pseudo-element  — Elementor overlay (image/color/gradient)
     1  .elementor-background-container / .elementor-background-overlay (old sections)
     2  .e-con-inner             — all Elementor widgets
   ─────────────────────────────────────────────────────────────────────────── */

/* Wrapper — provides the scroll distance the sticky element needs */
.scroll-video-hero-wrapper {
    position: relative;
    /* height injected by JS: window.innerHeight × (1 + scrollFactor) */
}

/* Hero section — sticky within wrapper */
.scroll-video-hero {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    background-color: #000 !important;
}

/* Canvas — deepest layer, behind everything */
.scroll-video-sequence-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    display: block;
    /* width/height set by JS (DPR-aware) */
}

/*
 * Elementor flex containers render overlays as a ::before pseudo-element,
 * not a separate div.  Default z-index is auto, so the canvas (z-index 0)
 * paints on top of it.  z-index: 1 lifts it above the canvas.
 */
.scroll-video-hero::before {
    position: absolute !important;
    z-index: 1 !important;
}

/* Old-style Elementor sections that do use real overlay/background divs */
.scroll-video-hero > .elementor-background-container,
.scroll-video-hero > .elementor-background-overlay {
    position: absolute !important;
    inset: 0;
    z-index: 1 !important;
}

/* Hardcoded overlay image — sits above canvas, below widgets */
.scroll-video-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('https://lawngreen-mink-778481.hostingersite.com/wp-content/uploads/2026/05/Home-Overlay-scaled.png');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
}

/* Tablet & Mobile — hide scroll video section entirely */
@media (max-width: 1024px) {
    .scroll-video-hero-wrapper {
        display: none !important;
    }
}

/* Widget content — above all background layers */
.scroll-video-hero > .e-con-inner,
.scroll-video-hero > .elementor-container {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
}

/* Hide only the video player, never overlays */
.scroll-video-hero .elementor-background-video-container {
    display: none !important;
}