/* ========================================
   SPLASH SCREEN — PRELOADER
   ======================================== */

/* Full-screen overlay */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: visible;
  background-color: #4a2711;
}

/* The grid of grey tiles that covers the screen */
.splash__grid {
  position: absolute;
  inset: 0;
  display: grid;
  z-index: 1;
  /* 6 columns × 5 rows = 30 tiles */
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0;
  overflow: visible;
}

.splash__tile {
  background-color: #4a2711;
  will-change: transform;
  /* Ensure tiles can visually escape the grid cell when translating */
  overflow: visible;
  /* Prevent subpixel seams between adjacent tiles */
  outline: 1px solid #4a2711;
  box-shadow: 0 0 0 1px #4a2711;
}

/* Centered logo — starts large (50% of viewport width). */
.splash__logo {
  position: fixed;
  z-index: 10000;
  display: block;
  pointer-events: none;
  opacity: 0;
  line-height: 0;
  top: 50%;
  left: 50%;
  width: 50vw;
  max-width: 600px;
}

.splash__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Keep the real header logo hidden until the splash animation reveals it */
.logo {
  opacity: 0;
}