/* Homepage-only decorative brand watermark. It sits above section backgrounds,
   but never blocks interaction with the existing content. */
body#body.jmt-homepage {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background: #f8fbff;
}

.jmt-homepage-brand-background {
    position: fixed;
    inset: 0;
    /* Decorative background must stay behind every page section. */
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 12%, rgba(218, 232, 251, .46), transparent 29%),
        radial-gradient(circle at 88% 76%, rgba(224, 236, 253, .5), transparent 30%),
        linear-gradient(135deg, #f7faff 0%, #ffffff 46%, #f5f9ff 100%);
}

.jmt-homepage-brand-background__layer {
    position: absolute;
    inset: -38%;
    background-image: url("../img/homepage-jmt-watermark.svg");
    background-repeat: repeat;
    pointer-events: none;
    will-change: transform;
}

.jmt-homepage-brand-background__layer--primary {
    background-size: 350px 172px;
    background-position: 24px 40px;
    opacity: .065;
    animation: jmt-homepage-watermark-drift-primary 108s linear infinite alternate;
}

.jmt-homepage-brand-background__layer--secondary {
    background-size: 430px 211px;
    background-position: 190px 126px;
    opacity: .035;
    animation: jmt-homepage-watermark-drift-secondary 126s linear infinite alternate-reverse;
}

body#body.jmt-homepage > :not(.jmt-homepage-brand-background) {
    position: relative;
    z-index: 1;
}

@keyframes jmt-homepage-watermark-drift-primary {
    from { transform: rotate(-7deg) translate3d(-3%, -2%, 0); }
    to { transform: rotate(-7deg) translate3d(5%, 4%, 0); }
}

@keyframes jmt-homepage-watermark-drift-secondary {
    from { transform: rotate(6deg) translate3d(4%, -3%, 0); }
    to { transform: rotate(6deg) translate3d(-4%, 4%, 0); }
}

@media (max-width: 767px) {
    .jmt-homepage-brand-background__layer--primary {
        background-size: 285px 140px;
        opacity: .055;
    }

    .jmt-homepage-brand-background__layer--secondary {
        background-size: 350px 172px;
        opacity: .03;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jmt-homepage-brand-background__layer {
        animation: none;
    }

    .jmt-homepage-brand-background__layer--primary {
        transform: rotate(-7deg) translate3d(-1%, -1%, 0);
    }

    .jmt-homepage-brand-background__layer--secondary {
        transform: rotate(6deg) translate3d(1%, 1%, 0);
    }
}