/* Reusable Logikids loading animation.
   Usage: <div class="logikids-loader" data-logikids-loader aria-hidden="true"></div>
   Optional: data-loader-speed="520" (milliseconds per fill step). */

.logikids-loader {
    --logikids-loader-muted: #919191;
    --logikids-loader-blue: #0c3fd7;
    --logikids-loader-green: #6de807;
    --logikids-loader-pink: #eb1c68;
    --logikids-loader-yellow: #ffad26;

    width: 88px;
    max-width: 100%;
    aspect-ratio: 64 / 51;
    margin: 0 auto;
    display: grid;
    place-items: center;
    line-height: 0;
}

.logikids-loader .logikids-loader-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

/* Base state: every inner puzzle piece is gray. */
.logikids-loader .logikids-loader-piece {
    fill: var(--logikids-loader-muted);
    transition: fill 220ms ease;
}

/* The loader fills cumulatively: blue -> + green -> + pink -> + yellow. */
.logikids-loader[data-loader-step="blue"] .logikids-loader-piece--blue,
.logikids-loader[data-loader-step="green"] .logikids-loader-piece--blue,
.logikids-loader[data-loader-step="pink"] .logikids-loader-piece--blue,
.logikids-loader[data-loader-step="yellow"] .logikids-loader-piece--blue,
.logikids-loader[data-loader-step="flash"] .logikids-loader-piece--blue {
    fill: var(--logikids-loader-blue);
}

.logikids-loader[data-loader-step="green"] .logikids-loader-piece--green,
.logikids-loader[data-loader-step="pink"] .logikids-loader-piece--green,
.logikids-loader[data-loader-step="yellow"] .logikids-loader-piece--green,
.logikids-loader[data-loader-step="flash"] .logikids-loader-piece--green {
    fill: var(--logikids-loader-green);
}

.logikids-loader[data-loader-step="pink"] .logikids-loader-piece--pink,
.logikids-loader[data-loader-step="yellow"] .logikids-loader-piece--pink,
.logikids-loader[data-loader-step="flash"] .logikids-loader-piece--pink {
    fill: var(--logikids-loader-pink);
}

.logikids-loader[data-loader-step="yellow"] .logikids-loader-piece--yellow,
.logikids-loader[data-loader-step="flash"] .logikids-loader-piece--yellow {
    fill: var(--logikids-loader-yellow);
}

/* Short pulse after the whole puzzle is filled. */
.logikids-loader[data-loader-step="flash"] .logikids-loader-svg {
    animation: logikids-loader-flash 360ms ease-in-out 1;
    transform-origin: 50% 50%;
}

@keyframes logikids-loader-flash {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
    45% {
        opacity: 0.68;
        transform: scale(1.035);
        filter: brightness(1.35);
    }
}

/* First usage: Activities page, before the location picker title. */
body.page-schools .schools-location-picker-loader {
    width: 92px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
}

@media (max-width: 768px) {
    body.page-schools .schools-location-picker-loader {
        width: 80px;
        margin: 0 auto 16px;
    }
}