/* Preloader Container */
#preloader {
  position: fixed;
  inset: 0;
  background: #141B5B; /* Light blue sky */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 7s;
  perspective: 1000px; /* enable 3D */
}

/* Pyramid wrapper */
.pyramid {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 60px);
  gap: 5px;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-20deg);
}

/* Cubes */
.cube {
  width: 60px;
  height: 60px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

/* Triangle (top piece) */
.triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid white;
  grid-column: 2;
  grid-row: 1;
}

/* FALL animations */
@keyframes fallLeft {
  0% { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-300px,300px) rotate(-720deg); opacity: 0; }
}

@keyframes fallRight {
  0% { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(300px,300px) rotate(720deg); opacity: 0; }
}

/* Sequence: triangle first, then cubes */
.triangle {
  animation: fallLeft 2s ease forwards;
}

.cube.top-right {
  grid-column: 3;
  grid-row: 1;
}

.cube.top-left {
  grid-column: 1;
  grid-row: 1;
}

/* Bottom row cubes */
.cube.bottom-left {
  grid-column: 1;
  grid-row: 3;
}

.cube.bottom-right {
  grid-column: 3;
  grid-row: 3;
}

.cube.middle-middle {
  grid-column: 2;
  grid-row: 2;
}

.cube.middle-right {
  grid-column: 3;
  grid-row: 2;
  animation: fallRight 2s ease forwards;
  animation-delay: 2s;
}

.cube.middle-left {
  grid-column: 1;
  grid-row: 2;
  animation: fallRight 2s ease forwards;
  animation-delay: 4s;
}