/* e3xplolt club-mark atmosphere: shared by the public index, 404 and Web labs. */
.brand-atmosphere {
    --brand-purple: #9278bd;
    --brand-purple-filter: brightness(0) saturate(100%) invert(56%) sepia(18%) saturate(1157%) hue-rotate(219deg) brightness(91%) contrast(88%);
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: strict;
}

.brand-watermark,
.brand-echo {
    position: absolute;
    display: block;
    height: auto;
    aspect-ratio: 478 / 441;
    object-fit: contain;
    filter: var(--brand-purple-filter);
}

.brand-watermark {
    will-change: transform;
    transition: transform 1.2s cubic-bezier(.2, .72, .22, 1);
}

.brand-watermark--primary {
    top: 12vh;
    right: -8vw;
    width: clamp(360px, 43vw, 720px);
    opacity: .038;
    transform: translate3d(var(--brand-shift-x, 0), var(--brand-shift-y, 0), 0) rotate(-6deg);
}

.brand-watermark--secondary {
    bottom: -13vh;
    left: -9vw;
    width: clamp(260px, 31vw, 500px);
    opacity: .025;
    transform: translate3d(var(--brand-shift-x-alt, 0), var(--brand-shift-y-alt, 0), 0) rotate(11deg);
}

.brand-echo {
    top: var(--echo-y);
    left: var(--echo-x);
    width: clamp(210px, 25vw, 400px);
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.34) rotate(var(--echo-rotate, 0deg));
    filter: var(--brand-purple-filter) blur(0);
    will-change: transform, opacity, filter;
    animation: brand-echo-expand 1.7s cubic-bezier(.16, .72, .22, 1) forwards;
}

@keyframes brand-echo-expand {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.34) rotate(var(--echo-rotate, 0deg));
        filter: var(--brand-purple-filter) blur(0);
    }

    16% {
        opacity: .072;
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(1.55) rotate(calc(var(--echo-rotate, 0deg) + 3deg));
        filter: var(--brand-purple-filter) blur(3px);
    }
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
    .brand-watermark--primary {
        top: 20vh;
        right: -24vw;
        width: 78vw;
        opacity: .03;
    }

    .brand-watermark--secondary,
    .brand-echo {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-watermark {
        transition: none;
    }

    .brand-echo {
        display: none;
        animation: none;
    }
}