/* ==========================================================================
   PRELOADER

   Fourteen brass slats close over the viewport, the mark engraves itself in the
   gap, a real progress count runs to 100, then the slats part.

   Rules it has to obey, which is why the markup carries `hidden`:
   - Without scripting the curtain never appears at all. A visitor is never
     asked to wait for a loader they cannot dismiss.
   - It cannot outlast its usefulness: a hard ceiling forces completion even if
     an image never fires.
   - It is not shown again on a return visit in the same session.
   - Reduced motion skips straight to the content.
   ========================================================================== */

.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bc-canvas);
  overflow: hidden;
}

/* The hidden state must win over everything.
   `.js .boot` and `.boot[hidden]` have the same specificity, so a later rule
   would otherwise keep the slats painted after the script hid them: the
   attribute said hidden while the screen still showed brass. `!important` is
   the honest expression of "this state is never negotiable". */
.boot[hidden],
.js .boot[hidden] {
  display: none !important;
}

.js .boot {
  display: grid;
}

/* --- Slats --------------------------------------------------------------- */

.boot__slats {
  position: absolute;
  inset: 0;
  display: flex;
}

.boot__slat {
  flex: 1 1 0;
  background: var(--bc-brass-plate);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
  /* Hairline gaps read as separated slats rather than one flat panel. */
  box-shadow: inset -1px 0 0 rgba(13, 15, 14, 0.55);
}

/* On exit they part from the centre outwards, so the content is revealed from
   the middle rather than from one edge. */
.boot.is-leaving .boot__slat {
  transform-origin: bottom center;
}

/* --- The mark and the count ---------------------------------------------- */

.boot__core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-7);
  /* Visible from the first frame. Hiding it until loading finished left the
     visitor staring at a blank curtain while the count ran. */
  opacity: 1;
  transition: opacity 240ms var(--ease-out);
}

/* The curtain is brass, so brass artwork on it is invisible. The core gets a
   soft dark vignette rather than a plate: a plate with any opacity at its outer
   stop reads as a hard rectangle sitting on the slats. */
.boot__core::before {
  content: "";
  position: absolute;
  inset: -55% -42%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--bc-canvas) 0%,
    rgba(13, 15, 14, 0.94) 42%,
    rgba(13, 15, 14, 0.55) 66%,
    rgba(13, 15, 14, 0) 100%
  );
}

.boot__mark {
  width: clamp(3.5rem, 8vw, 5.5rem);
  height: auto;
  color: var(--bc-brass);
}

/* The fill is the resting state, as in the story section; the outline draws. */
.boot__mark [data-boot-fill] {
  fill: currentColor;
  opacity: 0.9;
}

.boot__mark [data-boot-outline] {
  opacity: 0;
  /* Near-white, because this sits on brass slats. */
  stroke: #fbf1dc;
}

.boot__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--bc-ink);
}

.boot__count {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-meta);
  color: var(--bc-brass-bright);
  font-variant-numeric: tabular-nums;
}

/* A hairline under the count, filling with load progress. */
.boot__count::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 1px;
  margin: 0.6rem auto 0;
  background: linear-gradient(
    90deg,
    rgba(200, 160, 104, 0.35) 0%,
    #fbf1dc var(--boot-progress, 0%),
    rgba(244, 242, 236, 0.12) var(--boot-progress, 0%)
  );
}

/* --- Leaving ------------------------------------------------------------- */

.boot.is-leaving {
  pointer-events: none;
}

.boot.is-leaving .boot__core {
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  /* No curtain, no draw, no count. The script removes it immediately anyway;
     this is the belt to that braces. */
  .boot {
    display: none !important;
  }
}