/* Mello World admin page-loader
   Paw-prints walking animation matching melloworld.com */

.page-loader-paws {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 20px rgba(82, 82, 82, 0.12));
    rotate: 48deg;
}

.page-loader-paws .paw-tracks {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.page-loader-paws .paw-print {
    fill: #9e8e8e;
    opacity: 0;
    animation-duration: 2.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.page-loader-paws .paw-print--1 { animation-name: paw-step-1; }
.page-loader-paws .paw-print--2 { animation-name: paw-step-2; }
.page-loader-paws .paw-print--3 { animation-name: paw-step-3; }
.page-loader-paws .paw-print--4 { animation-name: paw-step-4; }

/* Each paw appears in sequence, all four stay together briefly,
   then clear together and the sequence restarts. Only opacity is
   animated so the SVG `transform` attribute (position of each paw)
   is preserved. */
@keyframes paw-step-1 {
    0%, 4%    { opacity: 0; }
    10%, 82%  { opacity: 1; }
    92%, 100% { opacity: 0; }
}
@keyframes paw-step-2 {
    0%, 20%   { opacity: 0; }
    26%, 82%  { opacity: 1; }
    92%, 100% { opacity: 0; }
}
@keyframes paw-step-3 {
    0%, 36%   { opacity: 0; }
    42%, 82%  { opacity: 1; }
    92%, 100% { opacity: 0; }
}
@keyframes paw-step-4 {
    0%, 52%   { opacity: 0; }
    58%, 82%  { opacity: 1; }
    92%, 100% { opacity: 0; }
}

.page-loader-paws .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 576px) {
    .page-loader-paws {
        width: 160px;
        height: 160px;
    }
}