/* ==========================================================================
   JADE Boot Screen — Apple-style startup sequence
   White logo on black, fade in + glow, then slide away
   ========================================================================== */

.bootscreen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.bootscreen--done {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

/* Logo */
.bootscreen__logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0;
  filter: brightness(0) invert(1);
  animation: boot-logo 2.8s ease forwards;
}

@keyframes boot-logo {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: brightness(0) invert(1);
  }
  20% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0) invert(1);
  }
  50% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(255,255,255,0.4));
  }
  70% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0) invert(1) drop-shadow(0 0 40px rgba(255,255,255,0.6));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(255,255,255,0.3));
  }
}

/* Progress bar (thin Apple-style) */
.bootscreen__progress {
  width: 180px;
  height: 4px;
  background: #222;
  border-radius: 2px;
  margin-top: 30px;
  overflow: hidden;
  opacity: 0;
  animation: boot-progress-appear 0.3s ease 0.6s forwards;
}

@keyframes boot-progress-appear {
  to { opacity: 1; }
}

.bootscreen__progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 2px;
  animation: boot-fill 2s ease 0.8s forwards;
}

@keyframes boot-fill {
  0%   { width: 0%; }
  20%  { width: 15%; }
  40%  { width: 35%; }
  60%  { width: 55%; }
  80%  { width: 80%; }
  100% { width: 100%; }
}

/* Optional chime ripple */
.bootscreen__ripple {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0;
  animation: boot-ripple 2s ease 0.2s forwards;
}

@keyframes boot-ripple {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  30% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}