/* ============================================================
   BGP Falling Leaves — Presentation and Grass Shadows
   ============================================================ */

.bgp-leaves-host {
    isolation: isolate;
}

.bgp-leaves-host > .bgp-leaves-positioned {
    position: relative;
}

.bgp-leaves-host > .bgp-leaves-above {
    z-index: 3;
}

/* Shared full-viewport layers */

#bgp-leaves,
#bgp-leaf-shadows {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    pointer-events: none !important;
    user-select: none;
    background: none;
}

/* Main leaf layer */

#bgp-leaves {
    visibility: hidden;
}

#bgp-leaves[data-layer="foreground"] {
    z-index: 2147483000;
}

#bgp-leaves[data-layer="background"] {
    z-index: 2;
}

/* ============================================================
   GROUND SHADOW LAYER
   ============================================================ */

#bgp-leaf-shadows {
    z-index: 1;
}

/* Soft projection beneath each leaf */

#bgp-leaf-shadows .bgp-leaf-shadow {
    position: absolute;
    top: 0;
    left: 0;

    width: var(--bgp-leaf-size, 28px);
    height: var(--bgp-leaf-size, 28px);

    opacity: 0.42;
    filter: blur(11px);

    transform-origin: center;
    will-change: transform;
}

/* Shadow silhouette */

#bgp-leaf-shadows .bgp-leaf-shadow::before {
    content: "";
    position: absolute;
    inset: 0;

    background-color: #482a16;

    -webkit-mask-image: var(
        --bgp-leaf-image,
        url("/wp-content/themes/BGP/assets/images/leaf.svg")
    );

    mask-image: var(
        --bgp-leaf-image,
        url("/wp-content/themes/BGP/assets/images/leaf.svg")
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: contain;
    mask-size: contain;

    -webkit-mask-position: center;
    mask-position: center;

    mask-mode: alpha;
}

/* ============================================================
   ORIGINAL CODEPEN SCENE
   ============================================================ */

#bgp-leaves .leaf-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    transform-style: preserve-3d;
}

#bgp-leaves .leaf-scene > div {
    position: absolute;
    top: 0;
    left: 0;

    width: var(--bgp-leaf-size, 28px);
    height: var(--bgp-leaf-size, 28px);

    background-image: var(
        --bgp-leaf-image,
        url("/wp-content/themes/BGP/assets/images/leaf.svg")
    );

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    transform-style: preserve-3d;
    backface-visibility: visible;
    will-change: transform;
}

/* ============================================================
   AUTUMN COLORIZATION AND BROWN OUTLINE
   ============================================================ */

#bgp-leaves[data-colorize="on"] .leaf-scene > div {
    background-image: none;
    background-color: transparent;

    -webkit-mask-image: none;
    mask-image: none;

    /* The large shadow now lives on the grass */
    filter: none;
}

#bgp-leaves[data-colorize="on"] .leaf-scene > div::before,
#bgp-leaves[data-colorize="on"] .leaf-scene > div::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;

    -webkit-mask-image: var(
        --bgp-leaf-image,
        url("/wp-content/themes/BGP/assets/images/leaf.svg")
    );

    mask-image: var(
        --bgp-leaf-image,
        url("/wp-content/themes/BGP/assets/images/leaf.svg")
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    mask-mode: alpha;
}

/* Thin brown silhouette underneath */

#bgp-leaves[data-colorize="on"] .leaf-scene > div::before {
    background-color: #59351f;

    transform:
        translate(0.5px, 0.8px)
        scale(1.08);

    opacity: 0.85;
}

/* Autumn-colored leaf */

#bgp-leaves[data-colorize="on"] .leaf-scene > div::after {
    background-color: var(
        --bgp-leaf-color,
        #d98a32
    );
}

/* Mobile: lighter, cheaper shadows */

@media (max-width: 639px) {
    #bgp-leaf-shadows .bgp-leaf-shadow {
        opacity: 0.30;
        filter: blur(8px);
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    #bgp-leaves,
    #bgp-leaf-shadows {
        display: none !important;
    }
}