﻿.mud-ex-blur {
    backdrop-filter: blur(10px);
}


.mud-ex-bg-gradient {
    position: absolute;
    display: flex;
    /*justify-content: center;
    align-items: center;*/
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mud-ex-bg-gradient::after {
    content: "";
    --size: 250px;
    --speed: 50s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    position: absolute;
    /*    width: var(--size);
    height: var(--size);*/
    width: 50%;
    height: 50%;
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(hsl(158, 82, 57, 85%), hsl(252, 82, 57));
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

@media (min-width: 720px) {
    .mud-ex-bg-gradient::after {
        --size: 700px;
    }
}




.mud-ex-bg-dot {
    transition-property: opacity !important;
    transition-duration: 0.3s;    
    opacity: .4;
    
    font: 5vmin/1.3 Serif;
    overflow: hidden;
    background: #123;
    display: block;
    font-size: 52px;
    color: transparent;

    &::before, &::after {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 3em;
        height: 3em;
        content: '.';
        mix-blend-mode: screen;
        animation: 44s -27s move infinite ease-in-out alternate;
    }

    &::before {
        @include dots(40);
        animation-duration: 44s;
        animation-delay: -27s;
    }

    &::after {
        @include dots(40);
        animation-duration: 43s;
        animation-delay: -32s;
    }
}

@keyframes move {
    from {
        transform: rotate(0deg) scale(12) translateX(-20px);
    }

    to {
        transform: rotate(360deg) scale(18) translateX(20px);
    }
}