/* ---------- Intro loader ----------
   Shared across every page that wants the 0→100% progress-bar intro
   (Figma flow 835:22504). Driven by assets/js/loader.js. Relies only on
   --color-orange / --color-white / --font-display, which every page's
   own :root already defines identically.

   Sequence:
   1. Progress bar fills 0→100%, pinned flush to the bottom edge.
   2. At 100%, .loader__circle appears as a small dot dead-center and
      grows past viewport coverage (200vmax — always exceeds any real
      viewport's diagonal, so it never leaves a gap at the corners).
   3. .loader (the plain black backdrop) is removed the instant the
      circle finishes covering the screen — no visible seam, since the
      circle itself is now indistinguishable from a full orange screen.
   4. The circle "flies" upward (translateY past -100%, relative to
      itself — safe to overshoot since it's already far bigger than the
      viewport) revealing the page underneath as it clears each row. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.loader__percent {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--color-orange);
  transition: opacity 0.25s ease;
}

.loader__track {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #515151;
  transition: opacity 0.25s ease;
}

.loader__fill {
  width: 0%;
  height: 100%;
  background: var(--color-white);
}

.loader.is-done .loader__percent,
.loader.is-done .loader__track {
  opacity: 0;
}

.loader__circle {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-orange);
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.loader__circle.is-expanding {
  opacity: 1;
  width: 200vmax;
  height: 200vmax;
  transition: width 0.55s cubic-bezier(0.3, 0, 0.2, 1), height 0.55s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.15s ease;
}

.loader__circle.is-flying {
  transform: translate(-50%, -220%);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader__circle {
    display: none !important;
  }
}

/* Mobile only — desktop keeps the bar flush against the bottom edge. */
@media (max-width: 767px) {
  .loader__track {
    top: 0;
    bottom: auto;
  }
}