/* loader.css — pre-flight boot overlay. A short HUD instrument check:
   pixel quad glyph materializes, tick bar fills, counter locks, then the
   veil lifts with a phosphor scan edge and hands off to the hero intro.
   JS-gated: without JS the overlay never displays; content stays reachable. */

.sf-loader {
  --sf-pad: clamp(1.4rem, 2.6vw, 2.6rem);
  --sf-glyph-w: clamp(4.5rem, 6vw, 5.5rem);
  position: fixed;
  inset: 0;
  z-index: 80; /* above every page layer, below the skip-link (z 99) */
  display: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--phosphor-rgb), 0.055), transparent 36%),
    var(--ink);
  color: var(--paper-soft);
  font-family: var(--display);
  font-weight: 400;
}

.sf-loader.is-mounted {
  display: block;
  will-change: transform;
}

/* Phosphor scan edge riding the bottom of the veil as it lifts. */
.sf-loader::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--phosphor);
  box-shadow:
    0 0 18px rgba(var(--phosphor-rgb), 0.55),
    0 6px 42px rgba(var(--phosphor-rgb), 0.28);
  opacity: 0;
}

/* ---- center instrument ---- */

.sf-boot-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 1.05rem;
  width: max-content;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    opacity 460ms var(--ease-out-expo) 80ms,
    transform 560ms var(--ease-out-expo) 80ms;
}

.sf-loader.is-live .sf-boot-core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sf-glyph {
  width: var(--sf-glyph-w);
  height: var(--sf-glyph-w);
  fill: var(--phosphor);
}

.sf-glyph rect {
  opacity: 0;
  transition: opacity 40ms steps(1, end);
  /* per-cell transition-delay + target alpha (--a) set inline by loader.js */
}

.sf-loader.is-live .sf-glyph rect {
  opacity: var(--a, 1);
}

.sf-loader.is-locked .sf-glyph {
  animation: sf-lock-flash 240ms steps(2, end) 1;
}

.sf-ticks {
  display: flex;
  justify-content: space-between;
  width: var(--sf-glyph-w);
}

.sf-ticks span {
  width: 4px;
  height: 3px;
  background: rgba(var(--paper-rgb), 0.16);
}

.sf-ticks span.is-fill {
  background: var(--phosphor);
}

.sf-boot-label {
  padding-left: 0.34em; /* optically recenter tracked uppercase */
  color: var(--muted);
  font-size: 0.55rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-standard);
}

.sf-loader.is-locked .sf-boot-label {
  color: var(--phosphor);
}

/* ---- corner microdata ---- */

.sf-corner {
  position: absolute;
  display: grid;
  gap: 0.28rem;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 480ms var(--ease-out-expo),
    transform 480ms var(--ease-out-expo);
}

.sf-corner .sf-dim {
  color: var(--muted);
}

.sf-tl { top: var(--sf-pad); left: var(--sf-pad); }
.sf-tr { top: var(--sf-pad); right: var(--sf-pad); justify-items: end; text-align: right; }
.sf-bl { bottom: var(--sf-pad); left: var(--sf-pad); }
.sf-br { right: var(--sf-pad); bottom: var(--sf-pad); justify-items: end; text-align: right; }

.sf-loader.is-live .sf-tl { transition-delay: 40ms, 40ms; }
.sf-loader.is-live .sf-tr { transition-delay: 120ms, 120ms; }
.sf-loader.is-live .sf-bl { transition-delay: 200ms, 200ms; }
.sf-loader.is-live .sf-br { transition-delay: 280ms, 280ms; }

.sf-loader.is-live .sf-corner {
  opacity: 1;
  transform: translateY(0);
}

.sf-count {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--paper);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color var(--dur-1) var(--ease-standard);
}

.sf-count-unit {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.sf-loader.is-locked .sf-count {
  color: var(--phosphor);
}

/* ---- resolve: the veil lifts, content lags with a blur ramp ---- */

.sf-loader.is-resolving {
  transform: translateY(-100.5%);
  transition: transform var(--dur-8) var(--ease-in-out-quart);
}

.sf-loader.is-resolving::after {
  opacity: 1;
  transition: opacity 140ms var(--ease-linear);
}

.sf-loader.is-resolving .sf-boot-core {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 6vh));
  filter: blur(5px);
  transition:
    opacity 460ms var(--ease-in-out-quart) 60ms,
    transform 520ms var(--ease-in-out-quart),
    filter 520ms var(--ease-in-out-quart);
}

.sf-loader.is-resolving .sf-corner {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 300ms var(--ease-in-out-quart),
    transform 300ms var(--ease-in-out-quart);
  transition-delay: 0ms, 0ms;
}

@keyframes sf-lock-flash {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.55); }
}

/* Scroll is held only while the veil is fully down; released at resolve. */
html.sf-boot-lock {
  overflow: hidden;
}

@media (max-width: 760px) {
  .sf-loader {
    --sf-pad: 1.15rem;
    --sf-glyph-w: 4.25rem;
  }

  .sf-corner {
    font-size: 0.5rem;
  }

  .sf-count {
    font-size: 1.9rem;
  }

  .sf-boot-label {
    font-size: 0.5rem;
    letter-spacing: 0.28em;
  }
}

/* The boot sequence is an enhancement only: reduced-motion users and
   print never see it (loader.js also skips it entirely). */
@media (prefers-reduced-motion: reduce) {
  .sf-loader {
    display: none !important;
  }
}

@media print {
  .sf-loader {
    display: none !important;
  }
}