/* LOADING TEXT */
.lmp-load-more-wrapper,
.lmp-loading {
    text-align: center;
}

.lmp-load-more-wrapper {
    margin: 20px 0;
}

.lmp-load-more {
    padding: 10px 20px;
    background: #0073aa;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.lmp-load-more:hover {
    background: #005177;
}

.lmp-loading {
    display: none;
}

.lmp-loading.active {
    display: block;
}

.lmp-loading:after {
    content: '...';
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% {
        color: transparent;
        text-shadow: .25em 0 0 transparent, .5em 0 0 transparent;
    }
    40% {
        color: #000;
        text-shadow: .25em 0 0 transparent, .5em 0 0 transparent;
    }
    60% {
        text-shadow: .25em 0 0 #000, .5em 0 0 transparent;
    }
    80%, 100% {
        text-shadow: .25em 0 0 #000, .5em 0 0 #000;
    }
}

/* POST IMAGE */
img.post_image {
    --g: 15px;
    width: 280px;
    aspect-ratio: 1;
    box-sizing: border-box;
    --_g: var(--g)/calc(50% - var(--g)) calc(50% - var(--g)) no-repeat conic-gradient(#000 0 0);
    mask: left var(--_i, ) top var(--_g),
          bottom var(--_i, ) left var(--_g),
          top var(--_i, ) right var(--_g),
          right var(--_i, ) bottom var(--_g);
    filter: grayscale(100%);
    transition: all 0.3s linear;
    cursor: pointer;
}

img.post_image:hover {
    --_i: var(--g);
    filter: grayscale(0);
    padding: var(--g);
}

/* LOADING ICON */
.loader {
    --c1: #B398F5;
    --c2: #F098F5;
    --c3: #BA5CF5;
    --c4: #F5DAE7;
    width: 80px;
    aspect-ratio: 8/5;
    --_g: no-repeat radial-gradient(#000 68%, transparent 71%);
    -webkit-mask: var(--_g), var(--_g), var(--_g);
    mask: var(--_g), var(--_g), var(--_g);
    -webkit-mask-size: 25% 40%;
    mask-size: 25% 40%;
    background: conic-gradient(var(--c1) 50%, var(--c2) 0) no-repeat,
                conic-gradient(var(--c3) 50%, var(--c4) 0) no-repeat;
    background-size: 200% 50%;
    animation: back 4s infinite steps(1),
               load 2s infinite;
}

@keyframes load {
    0% { -webkit-mask-position: 0% 0%, 50% 0%, 100% 0%; mask-position: 0% 0%, 50% 0%, 100% 0%; }
    16.67% { -webkit-mask-position: 0% 100%, 50% 0%, 100% 0%; mask-position: 0% 100%, 50% 0%, 100% 0%; }
    33.33% { -webkit-mask-position: 0% 100%, 50% 100%, 100% 0%; mask-position: 0% 100%, 50% 100%, 100% 0%; }
    50% { -webkit-mask-position: 0% 100%, 50% 100%, 100% 100%; mask-position: 0% 100%, 50% 100%, 100% 100%; }
    66.67% { -webkit-mask-position: 0% 0%, 50% 100%, 100% 100%; mask-position: 0% 0%, 50% 100%, 100% 100%; }
    83.33% { -webkit-mask-position: 0% 0%, 50% 0%, 100% 100%; mask-position: 0% 0%, 50% 0%, 100% 100%; }
    100% { -webkit-mask-position: 0% 0%, 50% 0%, 100% 0%; mask-position: 0% 0%, 50% 0%, 100% 0%; }
}

@keyframes back {
    0%, 100% { background-position: 0% 0%, 0% 100%; }
    25% { background-position: 100% 0%, 0% 100%; }
    50% { background-position: 100% 0%, 100% 100%; }
    75% { background-position: 0% 0%, 100% 100%; }
}