/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ bitsLAND · boot.css                                                  ║
   ║ Loading screen shown on every marketing page until DOM + fonts load. ║
   ║ Mirrors the in-game boot screen so the brand reads consistently.     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

#sl-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at center, #14213D 0%, #06070d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
#sl-boot.gone { opacity: 0; visibility: hidden; pointer-events: none; }

#sl-boot .stars span {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--sl-yellow, #F5E663);
  animation: sl-twinkle 2.4s ease-in-out infinite;
}
#sl-boot .stars span:nth-child(2n) { background: var(--sl-cyan, #4FE7E7); animation-delay: -.6s; }
#sl-boot .stars span:nth-child(3n) { background: var(--sl-pink, #F55CC1); animation-delay: -1.2s; }
@keyframes sl-twinkle { 0%,100% {opacity:.2;} 50% {opacity:1;} }

#sl-boot .corner {
  position: absolute;
  padding: 10px 14px;
  background: #000;
  border: 1px solid var(--sl-yellow, #F5E663);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--sl-yellow, #F5E663);
  font-weight: 700;
  text-transform: uppercase;
}
#sl-boot .corner.tl { top: 18px; left: 18px; }
#sl-boot .corner.tr { top: 18px; right: 18px; }
#sl-boot .corner.bl { bottom: 18px; left: 18px; }
#sl-boot .corner.br { bottom: 18px; right: 18px; }

#sl-boot .stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* The brand mark — 8 columns rising from bottom-up.
   Same proportions as brand/mark.svg. */
#sl-boot .mark {
  width: 200px; height: 200px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}
#sl-boot .mark span {
  background: var(--sl-yellow, #F5E663);
  animation: sl-rise 1.6s steps(8, end) infinite;
}
#sl-boot .mark span:nth-child(1){ grid-column:1; grid-row:7/9; }
#sl-boot .mark span:nth-child(2){ grid-column:2; grid-row:6/9; animation-delay:.1s; }
#sl-boot .mark span:nth-child(3){ grid-column:3; grid-row:4/9; animation-delay:.2s; }
#sl-boot .mark span:nth-child(4){ grid-column:4; grid-row:3/9; animation-delay:.3s; }
#sl-boot .mark span:nth-child(5){ grid-column:5; grid-row:5/9; animation-delay:.4s; }
#sl-boot .mark span:nth-child(6){ grid-column:6; grid-row:2/9; animation-delay:.5s; }
#sl-boot .mark span:nth-child(7){ grid-column:7; grid-row:4/9; animation-delay:.6s; }
#sl-boot .mark span:nth-child(8){ grid-column:8; grid-row:6/9; animation-delay:.7s; }
@keyframes sl-rise {
  0%   { transform: translateY(80px); opacity: 0; }
  30%, 100% { transform: translateY(0); opacity: 1; }
}

#sl-boot .word {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .04em;
}
#sl-boot .word .s { color: var(--sl-text, #f1f3fb); }
#sl-boot .word .l { color: var(--sl-yellow, #F5E663); text-shadow: 0 0 18px rgba(245,230,99,.5); }

#sl-boot .bar {
  width: 480px; max-width: 80vw;
  height: 14px;
  background: #000;
  border: 2px solid var(--sl-yellow, #F5E663);
}
#sl-boot .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sl-yellow, #F5E663);
  box-shadow: 0 0 16px var(--sl-yellow, #F5E663);
  animation: sl-fill 1.4s cubic-bezier(.5,.1,.3,.9) forwards;
}
@keyframes sl-fill { 0%{width:0;} 100%{width:100%;} }

#sl-boot .meta {
  font-size: 10.5px;
  color: var(--sl-cyan, #4FE7E7);
  letter-spacing: .18em;
  font-weight: 700;
}
#sl-boot .meta b { color: var(--sl-yellow, #F5E663); }

/* Hide page scroll while boot is on screen so a tall page doesn't peek
   behind the splash on slower frames. */
html.sl-booting, html.sl-booting body { overflow: hidden; }