/* Every rule is scoped to .xl / .xl-btn so the loader can sit on top of any page without touching its styles. */
.xl, .xl-btn {
  --ink: #0E0E0C;
  --bone: #F3F0EA;
  --cyan: #00B8F0;
}

.xl, .xl *, .xl *::before, .xl *::after, .xl-btn { box-sizing: border-box; }

/* Full-screen loader. Stays pure black throughout: the logo export's background is #000,
   so matching it here keeps the reveal seamless without touching a single logo pixel. */
.xl {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: #000;
  overflow: hidden;
  contain: strict;
}

.xl-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Isolated logo slot. --logo-aspect is set from the image's natural size by loader.js. */
.xl-logo-slot {
  --logo-aspect: 0.3;
  --reveal: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 640px, calc(56vh / var(--logo-aspect)));
  aspect-ratio: 1 / var(--logo-aspect);
  transform: translate(-50%, -50%);
}

.xl-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(0 calc((1 - var(--reveal)) * 100%) 0 0);
  /* The logo PNG is transparent: a black plate (the loader's own colour) hides the collapsing glyphs behind the revealed part. */
  background: #000;
  user-select: none;
  -webkit-user-drag: none;
}

.xl-scan {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: calc(var(--reveal) * 100%);
  width: 2px;
  margin-left: -1px;
  background: var(--cyan);
  box-shadow: 0 0 14px 1px rgba(0, 184, 240, 0.65);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.xl.is-revealing .xl-scan { opacity: 1; }

/* Shown only if the logo file fails to load. */
.xl-logo-slot.is-missing .xl-logo { visibility: hidden; }
.xl-logo-slot.is-missing::after {
  content: "LOGO MISSING";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(243, 240, 234, 0.35);
  border-radius: 12px;
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: rgba(243, 240, 234, 0.6);
  clip-path: inset(0 calc((1 - var(--reveal)) * 100%) 0 0);
}

.xl-hud {
  position: absolute;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  color: rgba(243, 240, 234, 0.5);
  white-space: nowrap;
  transition: opacity 0.5s ease;
}
.xl-pct { color: var(--cyan); font-variant-numeric: tabular-nums; }
.xl.is-complete .xl-hud { opacity: 0; }

/* Small pill control: Replay on the preview page, Skip intro on the homepage. */
.xl-btn {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(243, 240, 234, 0.22);
  border-radius: 999px;
  background: rgba(14, 14, 12, 0.6);
  color: var(--bone);
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.xl-btn:hover { border-color: var(--cyan); }
.xl-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.xl-btn kbd {
  font: inherit;
  padding: 2px 5px;
  border: 1px solid rgba(243, 240, 234, 0.25);
  border-radius: 4px;
  color: rgba(243, 240, 234, 0.7);
}

/* Reduced motion: no typographic animation, the logo simply fades in. */
.xl.is-reduced .xl-logo { clip-path: none; opacity: 0; transition: opacity 0.6s ease; }
.xl.is-reduced.is-complete .xl-logo { opacity: 1; }
.xl.is-reduced .xl-scan { display: none; }