/* ============================================================
   PRELOADER
   Full-screen overlay with animated diamond squares
   ============================================================ */

#preloader {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-h); /* align with hero logo position */
  opacity: 1;
  transition: opacity 0.6s ease;
}

#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ---- Square exit: shrink away one by one ---- */
#preloader .loader-square {
  transition: transform 1.2s cubic-bezier(0.45, 0.05, 0.35, 1);
}

#preloader.shrink .loader-square              { transform: scale(0); }
#preloader.shrink .loader-square:nth-of-type(1) { transition-delay: 0.00s; }
#preloader.shrink .loader-square:nth-of-type(2) { transition-delay: 0.12s; }
#preloader.shrink .loader-square:nth-of-type(3) { transition-delay: 0.24s; }
#preloader.shrink .loader-square:nth-of-type(4) { transition-delay: 0.36s; }
#preloader.shrink .loader-square:nth-of-type(5) { transition-delay: 0.48s; }
#preloader.shrink .loader-square:nth-of-type(6) { transition-delay: 0.60s; }
#preloader.shrink .loader-square:nth-of-type(7) { transition-delay: 0.72s; }

/* Scale up so rotated diamond matches hero logo footprint */
#preloader .loader-wrap {
  transform: scale(3.1);
  transform-origin: center;
}

@media (max-width: 760px) {
  #preloader .loader-wrap { transform: scale(2); }
}
@media (max-width: 480px) {
  #preloader .loader-wrap { transform: scale(1.6); }
}
@media (max-width: 360px) {
  #preloader .loader-wrap { transform: scale(1.3); }
}

/* ---- Loader animation (from Uiverse.io by ZacharyCrespin) ---- */
@keyframes square-animation {
  0%    { left: 0;    top: 0;    }
  10.5% { left: 0;    top: 0;    }
  12.5% { left: 32px; top: 0;    }
  23%   { left: 32px; top: 0;    }
  25%   { left: 64px; top: 0;    }
  35.5% { left: 64px; top: 0;    }
  37.5% { left: 64px; top: 32px; }
  48%   { left: 64px; top: 32px; }
  50%   { left: 32px; top: 32px; }
  60.5% { left: 32px; top: 32px; }
  62.5% { left: 32px; top: 64px; }
  73%   { left: 32px; top: 64px; }
  75%   { left: 0;    top: 64px; }
  85.5% { left: 0;    top: 64px; }
  87.5% { left: 0;    top: 32px; }
  98%   { left: 0;    top: 32px; }
  100%  { left: 0;    top: 0;    }
}

.loader {
  position: relative;
  width: 96px;
  height: 96px;
  transform: rotate(45deg);
}

.loader-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: 2px;
  border-radius: 0;
  /* Pix-Map logo gradient — reads light→dark after 45° rotation */
  background: linear-gradient(135deg, #44AFE5 0%, #2F8EDF 50%, #1F63D6 100%);
  animation: square-animation 10s ease-in-out infinite both;
}

.loader-square:nth-of-type(1) { animation-delay: -1.4285714286s; }
.loader-square:nth-of-type(2) { animation-delay: -2.8571428571s; }
.loader-square:nth-of-type(3) { animation-delay: -4.2857142857s; }
.loader-square:nth-of-type(4) { animation-delay: -5.7142857143s; }
.loader-square:nth-of-type(5) { animation-delay: -7.1428571429s; }
.loader-square:nth-of-type(6) { animation-delay: -8.5714285714s; }
.loader-square:nth-of-type(7) { animation-delay: -10s;           }