.info-nature-parallax {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background:
            linear-gradient(
                    135deg,
                    var(--color-ivory) 0%,
                    var(--color-cream) 100%
            );
}

/* Wraps the parallax visuals so we can clip them without clipping full-bleed content (map). */
.info-nature-parallax__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ---------------- */
/* PARALLAX IMAGE   */
/* ---------------- */

.parallax-image {
    position: absolute;
    inset: -15%;

    z-index: 1;

    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: cover;

    mix-blend-mode: multiply;
    opacity: 0.4;

    transform: translate3d(0,0,0);
    will-change: transform;

    pointer-events: none;
}

/* cinematic overlay */

.parallax-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
            linear-gradient(
                    to bottom,
                    rgba(255,255,255,0.50),
                    rgba(255,255,255,0.15)
            );

    mix-blend-mode: soft-light;
}

/* ---------------- */
/* ORGANIC LAYERS   */
/* ---------------- */

.info-nature-parallax__layer {
    position: absolute;

    border-radius: 999px;

    filter: blur(100px);

    transform: translate3d(0,0,0);
    will-change: transform;

    pointer-events: none;
}

/* Sage */

.info-nature-parallax__layer--sage {
    top: 30%;
    left: 20%;

    width: clamp(320px, 48vw, 760px);
    height: clamp(240px, 34vw, 520px);

    z-index: 2;

    opacity: 0.34;

    background:
            radial-gradient(
                    ellipse at center,
                    rgba(214, 195, 178, 0.55),
                    transparent 35%
            );
}

/* Sand */

.info-nature-parallax__layer--sand {
    top: 0;
    right: 0;

    width: clamp(260px, 36vw, 540px);
    height: clamp(220px, 28vw, 420px);

    z-index: 3;

    opacity: 0.50;

    background:
            radial-gradient(
                    circle at center,
                    rgba(229, 189, 176, 0.35),
                    transparent 35%
            );
}


/* ---------------- */
/* CONTENT          */
/* ---------------- */

.info-nature-parallax > .relative {
    position: relative;
    z-index: 10;
}

/* ---------------- */
/* MOBILE           */
/* ---------------- */

@media (max-width: 768px) {

    .services-nature-page .parallax-image {
        background-position: center top;
        opacity: 0.32;
    }

    .services-nature-page .parallax-image::after {
        background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.28),
                rgba(255, 255, 255, 0.08)
        );
    }


    .info-nature-parallax {
        min-height: auto;
    }

    .info-nature-parallax__layer {
        filter: blur(100px);
    }

    .parallax-image {
        opacity: 0.18;
    }
}

/* ---------------- */
/* ACCESSIBILITY    */
/* ---------------- */

@media (prefers-reduced-motion: reduce) {

    .parallax-image,
    .info-nature-parallax__layer {
        transform: none !important;
        will-change: auto;
    }
}