/* ═══════════════════════════════════════════════════════════════════
   SPLASH SCREEN — SAC Logo Assembly Sequence
   8 cols × 6 rows = 48 tiles, 5px gap, Z-depth fly-in/fly-out
   ═══════════════════════════════════════════════════════════════════ */

#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  width: 100vw;
  height: 100vh;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Radial halftone field — bold near center, fades sharply outward ── */
#splash-halftone {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Larger, bolder dots than before — 2.6px solid core vs the
     previous 1.4px, so the field reads clearly near the logo */
  background-image:
    radial-gradient(circle, var(--ink, #111111) 2.6px, transparent 2.8px);
  background-size: 16px 16px;
  background-position: center center;
  /* Sharper falloff: stays fully solid through the first 18% of
     radius, then drops off quickly rather than gradually — bold at
     center, thin band of fade, then gone, instead of a long gradual taper */
  -webkit-mask-image: radial-gradient(
    circle at center,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    18%,
    rgba(0,0,0,0.55) 34%,
    rgba(0,0,0,0.15) 48%,
    transparent      62%
  );
  mask-image: radial-gradient(
    circle at center,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    18%,
    rgba(0,0,0,0.55) 34%,
    rgba(0,0,0,0.15) 48%,
    transparent      62%
  );
  opacity: 0;
  transition: opacity 1.1s ease;
}

#splash-halftone.is-visible {
  opacity: 1;
}

@media (max-width: 768px) {
  #splash-halftone {
    background-image:
      radial-gradient(circle, var(--ink, #111111) 1.9px, transparent 2.1px);
    background-size: 11px 11px;
  }
}

#splash-stage {
  position: relative;
  width: min(86vw, 980px);
  height: min(64.5vw, 735px); /* maintains ~730:600 logo aspect ratio */
  perspective: 2600px;
  perspective-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

@media (max-width: 768px) {
  #splash-stage {
    width: 92vw;
    height: 69vw;
    perspective: 1800px;
  }
}

/* ── Split Nav Bar — text flanks the logo, centered in the gap
       between screen edge and the stage on each side ──────────────── */
#splash-nav {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  pointer-events: none; /* re-enabled on the buttons themselves */
}

.splash-nav-group {
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: auto;
}

.splash-nav-group--right {
  justify-content: flex-end;
}

.splash-nav-btn {
  background: none;
  border: none;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #111111);
  opacity: 0.55;
  cursor: pointer;
  padding: 6px 2px;
  transition: opacity 0.2s ease;
}

.splash-nav-btn:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  #splash-nav {
    top: 20px;
    padding: 0 18px;
  }
  .splash-nav-group {
    gap: 10px;
  }
  .splash-nav-btn {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}
/* ── Tile grid — preserves 3D so children's translateZ works ──────── */
#splash-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 5px;
  transform-style: preserve-3d;
  transform: translateZ(0px); /* establishes this as the 3D rendering context's child plane so descendant translateZ values project correctly */
}

@media (max-width: 768px) {
  #splash-grid {
    gap: 3px;
  }
}

/* ── Individual tile ──────────────────────────────────────────────── */
.sp-tile {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ── Full logo overlay — the clean editable PNG layer ─────────────── */
#splash-logo-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  /* Cursor-follow parallax + tilt applied via JS as a transform —
     this transition smooths each mousemove update */
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.25s ease-out;
  transform: translate3d(0px, 0px, 0) rotateX(0deg) rotateY(0deg);
  will-change: transform;
}

/* ── Enter Gallery button — De Stijl aesthetic ─────────────────────── */
#splash-enter-btn {
  position: absolute;
  bottom: 0px;
  left: 48%;
  transform: translate(-50%, 12px);
  opacity: 0;
  z-index: 5010;

  background: var(--chalk, #F9F9F9);
  color: var(--ink, #111111);
  border: 2px solid var(--ink, #111111);
  padding: 14px 36px;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 12px;

  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

#splash-enter-btn:hover {
  background: var(--ink, #111111);
  color: var(--chalk, #F9F9F9);
}

#splash-enter-btn:hover .sp-btn-arrow {
  transform: translateX(4px);
}

.sp-btn-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 14px;
}

@media (max-width: 768px) {
  #splash-enter-btn {
    bottom: 44px;
    padding: 12px 28px;
    font-size: 10px;
  }
}

/* ── Canvas + macro button hidden until splash hands off ──────────── */
#canvas-root {
  display: none;
}

#macro-toggle-btn {
  display: none;
}