/* Prevent any white flash before #splash renders */
html, body { background: #0b0c0f; margin: 0; }

/* ── Origami splash screen ───────────────────────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background: #0b0c0f;
  transition: opacity 0.5s ease;
}
#splash.splash-out {
  opacity: 0;
  pointer-events: none;
}

/* Cross layout: center 48 px + four 48 px flaps = 144 × 144 px */
.splash-origami {
  position: relative;
  width: 144px;
  height: 144px;
  perspective: 360px;
}
.splash-origami > div {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 3px;
}

/* Centre face — always visible */
.so-center {
  top: 48px; left: 48px;
  background: #ff7208;
  z-index: 2;
}

/* North flap — folds around its bottom edge */
.so-n {
  top: 0; left: 48px;
  background: #ffffff;
  transform-origin: center bottom;
  animation: so-n 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* East flap — folds around its left edge */
.so-e {
  top: 48px; left: 96px;
  background: #3d464b;
  transform-origin: left center;
  animation: so-e 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.16s;
}
/* South flap — folds around its top edge */
.so-s {
  top: 96px; left: 48px;
  background: #5a6167;
  transform-origin: center top;
  animation: so-s 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.32s;
}
/* West flap — folds around its right edge */
.so-w {
  top: 48px; left: 0;
  background: rgba(255, 114, 8, 0.55);
  transform-origin: right center;
  animation: so-w 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.48s;
}

/* Each panel starts edge-on (90 °, invisible crease) and unfolds to flat (0 °).
   The direction ensures each panel opens "toward the viewer" from behind. */
@keyframes so-n {
  0%, 5%    { transform: rotateX(90deg); }
  28%, 68%  { transform: rotateX(0deg); }
  93%, 100% { transform: rotateX(90deg); }
}
@keyframes so-e {
  0%, 5%    { transform: rotateY(-90deg); }
  28%, 68%  { transform: rotateY(0deg); }
  93%, 100% { transform: rotateY(-90deg); }
}
@keyframes so-s {
  0%, 5%    { transform: rotateX(-90deg); }
  28%, 68%  { transform: rotateX(0deg); }
  93%, 100% { transform: rotateX(-90deg); }
}
@keyframes so-w {
  0%, 5%    { transform: rotateY(90deg); }
  28%, 68%  { transform: rotateY(0deg); }
  93%, 100% { transform: rotateY(90deg); }
}

/* App label fades in after the first flap opens */
.splash-label {
  color: #f2f4f7;
  font-family: system-ui, -apple-system, 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
  animation: splash-label-in 0.5s ease 0.7s both;
}
.splash-label b { color: #ff7208; font-weight: 800; }

@keyframes splash-label-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}