/* Ensure the Elementor section that contains our effect can properly position its children */
.elementor-section[data-flowmap="on"] {
    position: relative; /* Essential for absolute positioning of the canvas wrapper */
    overflow: hidden;   /* Hides any canvas overflow outside the section bounds */
}

/* The wrapper div for our WebGL canvas */
.flowmap-deformation-wrapper {
    position: absolute; /* Positions it over the section's background */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 'pointer-events: all' is crucial: ensures mouse/touch events hit this div, not elements underneath */
    pointer-events: all;
    /* Optional: Set a fallback CSS background for browsers that don't support WebGL or for initial loading */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Transition for opacity if you use the 'active' class */
    opacity: 0; /* Start hidden */
    transition: opacity 0.5s ease-in-out; /* Fade in animation */
}

/* Make the flowmap-deformation-wrapper visible when it has the 'active' class */
.flowmap-deformation-wrapper.active {
    opacity: 1;
}

/* Styles for the WebGL canvas itself */
.flowmap-deformation-wrapper canvas {
    display: block; /* Removes any default spacing below inline elements */
    width: 100%;    /* Ensures canvas stretches to fill its parent */
    height: 100%;   /* Ensures canvas stretches to fill its parent */
}

/* Styles for any content you want to place *on top* of the ripple effect */
/* Elementor often uses .elementor-column-wrap or .elementor-widget-wrap for content */
.elementor-column-wrap,
.elementor-widget-wrap,
.content-overlay { /* If you add a custom .content-overlay div */
    position: relative; /* Necessary for z-index to work */
    z-index: 10;        /* Ensures content is above the canvas (which is typically z-index 0 or 1) */
    pointer-events: none; /* Allows mouse events to pass through to the canvas by default */
}

/* For specific text elements within the overlay that you *do* want to be interactive (e.g., selectable text) */
.content-overlay h1,
.content-overlay p {
    pointer-events: auto; /* Overrides parent's pointer-events: none */
}

/* Basic styling for content-overlay example */
.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff; /* White text for contrast on dark backgrounds */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    padding: 20px;
    box-sizing: border-box;
}

.content-overlay h1 {
    font-size: clamp(2em, 5vw, 4em); /* Responsive font size */
    margin-bottom: 0.5em;
}

.content-overlay p {
    font-size: clamp(1em, 2vw, 1.4em);
    max-width: 800px;
    line-height: 1.6;
}