set the layer 0 as stack top

assets/css/_partial/_image.scss

@@ -79,11 +79,11 @@
   }
   
   &#layer5 {
-    z-index: 5;
+    z-index: 1;
   }
   
   &#layer4 {
-    z-index: 4;
+    z-index: 2;
   }
   
   &#layer3 {
@@ -91,10 +91,10 @@
   }
   
   &#layer2 {
-    z-index: 2;
+    z-index: 4;
   }
   
   &#layer1 {
-    z-index: 1;
+    z-index: 5;
   }
 }

assets/ts/desktop.ts

@@ -18,7 +18,7 @@ let topLayerPos: number[] = [0, 0]
 
 // set top layer position
 export const topLayerPosSet = (): void => {
-  layerPosSet(topLayerPos[0], topLayerPos[1], layers[4])
+  layerPosSet(topLayerPos[0], topLayerPos[1], layers[0])
 }
 
 // global index for "activated"
@@ -62,9 +62,9 @@ async function enterOverlay(): Promise<void> {
   // stop images animation
   window.removeEventListener('mousemove', handleOnMove)
   // set top image
-  center(layers[4])
-  for (let i = 4; i >= 0; i--) {
-    layers[i].dataset.status = `t${4 - i}`
+  center(layers[0])
+  for (let i = 0; i <= 4; i++) {
+    layers[i].dataset.status = `t${i}`
   }
   await delay(1600)
   // Offset previous self increment of global index (by handleOnMove)
@@ -76,7 +76,7 @@ async function enterOverlay(): Promise<void> {
 // initialization
 export const trackMouseInit = (): void => {
   window.addEventListener('mousemove', handleOnMove)
-  layers[4].addEventListener(
+  layers[0].addEventListener(
     'click',
     () => {
       void enterOverlay()

assets/ts/overlay.ts

@@ -52,11 +52,11 @@ export const overlayDisable = (): void => {
 async function handleCloseClick(): Promise<void> {
   overlayDisable()
   topLayerPosSet()
-  for (let i: number = 4; i >= 0; i--) {
-    layers[i].dataset.status = `r${4 - i}`
+  for (let i: number = 0; i <= 4; i++) {
+    layers[i].dataset.status = `r${i}`
   }
   await delay(1700)
-  for (let i: number = 4; i >= 0; i--) {
+  for (let i: number = 0; i <= 4; i++) {
     layers[i].dataset.status = 'null'
   }
   window.addEventListener('mousemove', handleOnMove, { passive: true })
@@ -122,7 +122,7 @@ export const vwRefreshInit = (): void => {
         r.style.setProperty('--footer-height', '31px')
       }
       // recenter image (only in overlay)
-      if (layers[4].dataset.status === 't0') center(layers[4])
+      if (layers[0].dataset.status === 't0') center(layers[0])
     },
     { passive: true }
   )

assets/ts/utils.ts

@@ -38,12 +38,12 @@ export const FIFO = (
       if (passPosition) layerL.style.transform = layerH.style.transform
     }
   }
-  for (let i: number = 0; i <= 3; i++) {
-    layerProcess(layersArray[i], layersArray[i + 1])
+  for (let i: number = 4; i >= 1; i--) {
+    layerProcess(layersArray[i], layersArray[i - 1])
   }
-  if (layersArray[4].childElementCount !== 0)
-    layersArray[4].removeChild(layersArray[4].lastElementChild as HTMLImageElement)
-  layersArray[4].appendChild(element)
+  if (layersArray[0].childElementCount !== 0)
+    layersArray[0].removeChild(layersArray[0].lastElementChild as HTMLImageElement)
+  layersArray[0].appendChild(element)
 }
 
 export const mouseToTransform = (