/* The official monogram is the first 150 × 96 pixels of the existing wordmark. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
  color: #fff;
  gap: 0;
  isolation: isolate;
}
.boot-monogram {
  position: relative;
  display: block;
  width: clamp(112px, 16vw, 148px);
  aspect-ratio: 150 / 96;
  overflow: hidden;
  transform: translateZ(0);
  animation: mly-boot-arrive 850ms cubic-bezier(.16, 1, .3, 1) both;
}
.boot-monogram > img {
  display: block;
  width: 480%;
  max-width: none;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .7;
  animation: mly-boot-breathe 3.2s ease-in-out 850ms infinite;
}
.boot-monogram-light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url('/assets/milyssus-wordmark-dark.png') left top / 480% auto no-repeat;
  mask: url('/assets/milyssus-wordmark-dark.png') left top / 480% auto no-repeat;
}
.boot-monogram-light::after {
  content: '';
  position: absolute;
  inset: -80% -100%;
  background: linear-gradient(120deg, transparent 38%, #ffffff18 44%, #fff 49.5%, #fff 50.5%, #ffffff18 56%, transparent 62%);
  animation: mly-boot-scan 3.2s cubic-bezier(.4, 0, .2, 1) 150ms infinite both;
}
@keyframes mly-boot-arrive {
  from { opacity: 0; transform: translateY(8px) scale(.94); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes mly-boot-breathe {
  0%, 100% { opacity: .7; }
  50% { opacity: .94; }
}
@keyframes mly-boot-scan {
  0%, 12% { transform: translateX(-60%); opacity: 0; }
  24% { opacity: .9; }
  68% { opacity: .9; }
  82%, 100% { transform: translateX(60%); opacity: 0; }
}
.boot-error {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  background: #fff;
  color: #111;
  text-align: center;
}
.boot-error h1 { margin: 0; font-size: clamp(22px, 4vw, 32px); font-weight: 500; }
.boot-error p { margin: 0; color: #666; font-size: 14px; }
.boot-error a { margin-top: 10px; padding: 13px 22px; border-radius: 12px; background: #111; color: #fff; text-decoration: none; }
.boot-error a:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .boot-monogram, .boot-monogram > img, .boot-monogram-light::after { animation: none; }
  .boot-monogram > img { opacity: 1; }
  .boot-monogram-light { display: none; }
}