/* Visible but restrained atmosphere over the deliberately static hero art. */

.bhw-home-atmosphere {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bhw-home-atmosphere::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(2, 4, 6, 0.02),
        transparent 30%,
        rgba(3, 5, 7, 0.08)
    );
    content: "";
}

.bhw-home-atmosphere__mist {
    position: absolute;
    width: 135%;
    height: 48%;
    border-radius: 50%;
    filter: blur(1.4rem) saturate(0.78);
    mix-blend-mode: screen;
    opacity: 0.62;
    will-change: auto;
}

.bhw-home-atmosphere__mist--near {
    inset: 43% auto auto -24%;
    background:
        radial-gradient(ellipse at 13% 53%, rgba(195, 169, 132, 0.39), transparent 22%),
        radial-gradient(ellipse at 35% 47%, rgba(162, 150, 131, 0.32), transparent 25%),
        radial-gradient(ellipse at 59% 57%, rgba(196, 165, 122, 0.34), transparent 24%),
        radial-gradient(ellipse at 84% 46%, rgba(153, 143, 126, 0.3), transparent 21%);
    transform: translate3d(2%, 0, 0);
}

.bhw-home-atmosphere__mist--far {
    inset: 8% -21% auto auto;
    width: 132%;
    height: 44%;
    background:
        radial-gradient(ellipse at 17% 48%, rgba(155, 151, 140, 0.3), transparent 21%),
        radial-gradient(ellipse at 42% 57%, rgba(190, 162, 125, 0.33), transparent 25%),
        radial-gradient(ellipse at 68% 44%, rgba(150, 143, 130, 0.28), transparent 22%),
        radial-gradient(ellipse at 90% 55%, rgba(180, 151, 112, 0.3), transparent 19%);
    opacity: 0.52;
    transform: translate3d(-2%, 0, 0);
}

.bhw-home-atmosphere--active .bhw-home-atmosphere__mist {
    will-change: transform, opacity;
}

.bhw-home-atmosphere--active .bhw-home-atmosphere__mist--near {
    animation: bhw-mist-near 22s ease-in-out infinite alternate;
}

.bhw-home-atmosphere--active .bhw-home-atmosphere__mist--far {
    animation: bhw-mist-far 29s ease-in-out infinite alternate-reverse;
}

.bhw-home-atmosphere__dust {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    mix-blend-mode: screen;
}

.bhw-home-hero__inner {
    position: relative;
    z-index: 2;
}

@keyframes bhw-mist-near {
    0% {
        opacity: 0.56;
        transform: translate3d(-4%, 2%, 0) scale(1.02);
    }
    48% {
        opacity: 0.82;
        transform: translate3d(5%, -3%, 0) scale(1.09);
    }
    100% {
        opacity: 0.64;
        transform: translate3d(12%, 1%, 0) scale(1.04);
    }
}

@keyframes bhw-mist-far {
    0% {
        opacity: 0.48;
        transform: translate3d(6%, -2%, 0) scale(1.04);
    }
    55% {
        opacity: 0.72;
        transform: translate3d(-4%, 4%, 0) scale(1.11);
    }
    100% {
        opacity: 0.56;
        transform: translate3d(-11%, 0, 0) scale(1.05);
    }
}

@media (max-width: 43.749rem) {
    .bhw-home-atmosphere__mist {
        width: 158%;
        filter: blur(1.15rem) saturate(0.76);
    }

    .bhw-home-atmosphere__mist--near {
        inset-inline-start: -34%;
    }
}

@media (max-width: 51.25rem), (pointer: coarse) {
    .bhw-home-atmosphere__mist {
        animation: none;
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bhw-home-atmosphere__mist {
        animation: none;
        will-change: auto;
    }

    .bhw-home-atmosphere__mist--near {
        opacity: 0.62;
        transform: translate3d(2%, 0, 0);
    }

    .bhw-home-atmosphere__mist--far {
        opacity: 0.52;
        transform: translate3d(-2%, 0, 0);
    }
}