.boot-loader {
  z-index: 100;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #f5f5f5;
  color: #141414;
  font: 16px/24px sans-serif;
  transform: translateX(0);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.boot-loader.boot-ready {
  transform: translateX(-100%);
  pointer-events: none;
}
.boot-loader--ssr {
  /* SSR stays readable even if hydration or an image request never completes. */
  animation: boot-ssr-fallback 600ms cubic-bezier(0.16, 1, 0.3, 1) 8s forwards;
}
.boot-loader.boot-ready {
  animation: none;
}
@keyframes boot-ssr-fallback {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); visibility: hidden; pointer-events: none; }
}
.boot-loader img {
  display: block;
  object-fit: contain;
}
.boot-loader p {
  margin: 0;
}
.boot-loader span {
  width: 64px;
  height: 2px;
  background: #0755ff;
  animation: loading-opacity 900ms ease-in-out infinite alternate;
}
@keyframes loading-opacity {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot-loader {
    transition: none;
  }
  .boot-loader--ssr {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .boot-loader span {
    animation: none;
  }
}