/* ==========================================================================
   LOOT cookies — boot screen
   A cookie baking in: grey and flat, filling with colour from the bottom as
   the real assets arrive. The fill height is --p (0 to 1), written by boot.js
   from actual load progress, so the bar cannot lie about how far along it is.
   ========================================================================== */

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  gap: 1.5rem;
  grid-auto-flow: row;
  background: #f6e7c1;
  transition: opacity .55s ease, visibility .55s ease;
}

.boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot__cookie {
  position: relative;
  width: min(38vw, 15rem);
  aspect-ratio: 613 / 539;
}

/* Two copies of the same cookie. The under one is drained of colour; the over
   one is full strength and revealed bottom-up by the progress clip. */
.boot__cookie img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.boot__grey {
  filter: grayscale(1) brightness(1.06) contrast(.9) opacity(.42);
}

.boot__fill {
  /* inset() from the top: at --p 0 the whole image is clipped away, at 1 none
     of it is. Animating the clip keeps it on the compositor. */
  clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0);
  transition: clip-path .35s cubic-bezier(.4, 0, .2, 1);
}

/* The line of dough it rises out of. */
.boot__bar {
  position: relative;
  width: min(38vw, 15rem);
  height: 3px;
  border-radius: 100px;
  background: rgb(51 37 28 / .14);
  overflow: hidden;
}

.boot__bar i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: #33251c;
  transform-origin: left center;
  scale: var(--p, 0) 1;
  transition: scale .35s cubic-bezier(.4, 0, .2, 1);
}

.boot__pct {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: lowercase;
  color: #33251c;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}

/* The page underneath does not animate until the screen is gone, so the hero
   burst is not playing to nobody. */
html.is-booting,
html.is-booting body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .boot__fill, .boot__bar i { transition: none; }
}