.sad5-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease-out;
    /* Sensible defaults for photo backgrounds */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sad5-overlay.sad5-overlay--visible {
    opacity: 1;
}

/* Safety net for inline host elements (e.g. divi/button renders as <a>).
   display:inline-block → block-formatting context (canvas 100%/100% correct).
   overflow:hidden      → clips canvas to the button's visual boundary.
   isolation:isolate    → forces a new stacking context so that canvas(z:0),
                          overlay(z:1) and .sad5-btn-content(z:2) are contained
                          and composited inside the <a>, not in an ancestor ctx.
                          Without this, overlay at opacity<1 becomes invisible
                          due to browser compositing ambiguity on non-stacking
                          positioned parents. */
a[data-sad5-animation-type] {
    display: inline-block;
    overflow: hidden;
    isolation: isolate;
}

/* Button content wrapper — keeps the label above the overlay (z:1) and canvas (z:0).
   z-index:2 instead of 1 ensures it's above the overlay regardless of DOM order.
   Created by renderer-core.js createCanvas() for <a> host elements. */
.sad5-btn-content {
    position: relative;
    z-index: 2;
}

/* Divi button icon (::before right-placement, ::after left-placement) is
   position:absolute with no explicit z-index → sits at the z:auto/0 level in
   the <a> stacking context (isolation:isolate), below the overlay at z:1.
   Elevate to z:3 so the icon renders above both overlay (z:1) and text (z:2). */
a[data-sad5-animation-type]::before,
a[data-sad5-animation-type]::after {
    z-index: 3;
}