/* ==================================================
   ANCOR TOPOGRAPHY BRAND SYSTEM
   Brand color: #957A56
   ================================================== */

.ancor-topography-host {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
}

.ancor-topography-art {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    background-image:
        url("/assets/images/brand/ancor-topography.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -1;
}

/* HOME HERO */

.ancor-topography-hero > .ancor-topography-art {
    width: clamp(440px, 58vw, 820px);
    height: clamp(440px, 58vw, 820px);
    top: 50%;
    right: -8%;
    opacity: 0.17;
    transform:
        translateY(-50%)
        rotate(-5deg);

    -webkit-mask-image:
        linear-gradient(
            270deg,
            #000 0%,
            rgba(0, 0, 0, 0.92) 55%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            270deg,
            #000 0%,
            rgba(0, 0, 0, 0.92) 55%,
            transparent 100%
        );
}

/* GLOBAL FOOTER */

.ancor-topography-footer > .ancor-topography-art {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.14;

    background-size:
        clamp(460px, 42vw, 680px) auto;

    background-position:
        right -55px center;

    background-repeat:
        repeat-x;

    -webkit-mask-image:
        linear-gradient(
            270deg,
            #000 0%,
            rgba(0, 0, 0, 0.75) 62%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            270deg,
            #000 0%,
            rgba(0, 0, 0, 0.75) 62%,
            transparent 100%
        );
}

/* RTL / LTR */

html[dir="ltr"]
.ancor-topography-hero
> .ancor-topography-art {
    right: auto;
    left: -8%;
    transform:
        translateY(-50%)
        scaleX(-1)
        rotate(-5deg);

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0, 0, 0, 0.92) 55%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0, 0, 0, 0.92) 55%,
            transparent 100%
        );
}

html[dir="ltr"]
.ancor-topography-footer
> .ancor-topography-art {
    background-position:
        left -55px center;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0, 0, 0, 0.75) 62%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0, 0, 0, 0.75) 62%,
            transparent 100%
        );
}

/* MOBILE */

@media (max-width: 767px) {
    .ancor-topography-hero
    > .ancor-topography-art {
        width: 520px;
        height: 520px;
        top: 55%;
        right: -230px;
        opacity: 0.14;
    }

    html[dir="ltr"]
    .ancor-topography-hero
    > .ancor-topography-art {
        right: auto;
        left: -230px;
    }

    .ancor-topography-footer
    > .ancor-topography-art {
        opacity: 0.11;
        background-size: 480px auto;
        background-position:
            right -210px center;
        background-repeat: no-repeat;
    }

    html[dir="ltr"]
    .ancor-topography-footer
    > .ancor-topography-art {
        background-position:
            left -210px center;
    }
}

/* REDUCED MOTION / PRINT */

@media print {
    .ancor-topography-art {
        display: none !important;
    }
}