#preloader {
    --cols: 3;
    --rows: 3;
    --delay-step: 0.25s;

    position: fixed;
    z-index: 998;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
}

img.loader {
    width: 50px;
    position: fixed;
    z-index: 999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: loaderGlow ease 4.30s infinite;
}

@keyframes loaderGlow {
    50% {
        filter: drop-shadow(0 0 10px rgba(var(--white-color), 0.25));
    }
}

/* base */
.anime-window {
    --borderwidth: 1px;
    --borderop: 0.05;

    width: 100%;
    height: 100%;
    background: #111111;

    border: var(--borderwidth) solid rgba(255,255,255,var(--borderop));

    transition: all 1s ease;
}

/* 🎯 Assign row/col using nth-child */
/* top left blast */
.topleftblast .anime-window:nth-child(1) { --r: 0; --c: 0; }
.topleftblast .anime-window:nth-child(2) { --r: 0; --c: 1; }
.topleftblast .anime-window:nth-child(3) { --r: 0; --c: 2; }

.topleftblast .anime-window:nth-child(4) { --r: 1; --c: 0; }
.topleftblast .anime-window:nth-child(5) { --r: 1; --c: 1; }
.topleftblast .anime-window:nth-child(6) { --r: 1; --c: 2; }

.topleftblast .anime-window:nth-child(7) { --r: 2; --c: 0; }
.topleftblast .anime-window:nth-child(8) { --r: 2; --c: 1; }
.topleftblast .anime-window:nth-child(9) { --r: 2; --c: 2; }

/* ordered */
.ordered .anime-window:nth-child(1) { --r: 0; --c: 0; }
.ordered .anime-window:nth-child(2) { --r: 0; --c: 1; }
.ordered .anime-window:nth-child(3) { --r: 0; --c: 2; }

.ordered .anime-window:nth-child(4) { --r: 1; --c: 3; }
.ordered .anime-window:nth-child(5) { --r: 1; --c: 4; }
.ordered .anime-window:nth-child(6) { --r: 1; --c: 5; }

.ordered .anime-window:nth-child(7) { --r: 2; --c: 6; }
.ordered .anime-window:nth-child(8) { --r: 2; --c: 7; }
.ordered .anime-window:nth-child(9) { --r: 2; --c: 8; }


/* 🎯 Dynamic delay based on position */
.anime-window {
    transition-delay: calc((var(--r) + var(--c)) * var(--delay-step));
}

/* 🎯 Direction logic */
#preloader.loaded .anime-window {
    transform: translate(
        calc((var(--c) - 1) * 100%),
        calc((var(--r) - 1) * 100%)
    );
    opacity: 0;
}

#preloader.loaded+img.loader {
    animation: preloaderloaded ease 9s 3s forwards;
}

@keyframes preloaderloaded {
    to {
        opacity: 0;
    }
}

/* 🎨 Optional color variation */
#preloader.loaded .anime-window:nth-child(odd) {
    background-color: var(--primary-color);
}

#preloader.loaded .anime-window:nth-child(even) {
    background-color: var(--secondary-color);
}

#preloader.loaded .anime-window.anime-window-center {
    background: inherit;
}