/* ============================================================
   Boot entrance — Axcel Justin D. Tidalgo
   Pairs with boot.js.

   The navbar's bottom rule doubles as the loading bar: it fills
   left to right while data.json is fetched and rendered, then
   fades as the scene rises into place.

   boot.js holds/releases the page's own elements inline, so this
   file only needs to supply the keyframes and the boot layers.
   ============================================================ */

@keyframes ajt-boot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ajt-boot-mark-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ajt-boot-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ajt-boot-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* the cover masks everything below the nav rule */
.ajt-boot-cover {
  position: fixed;
  top: var(--ajt-bar, 3.25rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: #F7F5F2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* same treatment as the AJT monogram in the navbar */
.ajt-boot-mark {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #1C1B1A;
  border: 1px solid #1C1B1A;
  padding: 0.2rem 0.34rem;
  line-height: 1;
  margin-bottom: 6rem;
  animation: ajt-boot-mark-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* the loading bar, sitting on the navbar's own separator */
.ajt-boot-line {
  position: fixed;
  top: var(--ajt-bar, 3.25rem);
  left: 0;
  right: 0;
  height: 1px;
  z-index: 201;
  background: #1C1B1A;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  animation: ajt-boot-fill 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 0.24s;
  transition: opacity 0.34s ease;
}

.ajt-boot-cover.is-out,
.ajt-boot-line.is-out { opacity: 0; }