/*
 * The boot curtain (index.html #boot, lifted by src/lib/boot.ts through
 * html.app-ready). A plain same-origin stylesheet loaded in <head> so the
 * curtain is on the first paint, before the bundle and its CSS arrive. If the
 * bundle never runs, the give-up animations lift it on their own at 8s.
 * theme-boot.js has already set data-theme, so the curtain matches the theme.
 */
#boot {
  --boot-bg: #000;
  --boot-fg: 255 255 255;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2rem;
  background: var(--boot-bg);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.6s;
  animation: boot-giveup 0.4s ease 8s forwards;
}
[data-theme="light"] #boot {
  --boot-bg: #f7f7f8;
  --boot-fg: 10 10 12;
}
html:not(.app-ready) #root {
  visibility: hidden;
  animation: boot-reveal 0s linear 8s forwards;
}
.app-ready #boot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot__mark {
  width: min(40vw, 11rem);
  overflow: visible;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.boot__mark path {
  fill: rgb(var(--boot-fg) / 0);
  stroke: rgb(var(--boot-fg) / 0.9);
  stroke-width: 1.1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
  animation:
    boot-draw 1.4s cubic-bezier(0.83, 0, 0.17, 1) forwards,
    boot-fill 0.8s ease 1s forwards;
}
.app-ready .boot__mark {
  transform: scale(1.06);
}
.boot__bar {
  width: 6.5rem;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgb(var(--boot-fg) / 0.85), transparent) 0 0 / 50% 100% no-repeat,
    rgb(var(--boot-fg) / 0.1);
  animation: boot-scan 1.2s cubic-bezier(0.83, 0, 0.17, 1) infinite;
}
@keyframes boot-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes boot-fill {
  to {
    fill: rgb(var(--boot-fg) / 0.92);
    stroke: rgb(var(--boot-fg) / 0);
  }
}
@keyframes boot-scan {
  from {
    background-position: -100% 0, 0 0;
  }
  to {
    background-position: 200% 0, 0 0;
  }
}
@keyframes boot-giveup {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes boot-reveal {
  to {
    visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot__mark path {
    animation: none;
    fill: rgb(var(--boot-fg) / 0.92);
    stroke: none;
  }
  .boot__bar {
    animation: none;
  }
  .app-ready .boot__mark {
    transform: none;
  }
}