/**
 * SciprogFi HUD Layer
 * Three parts the existing system did not cover: a moving scan sweep,
 * a self-drawing underline, and a multi-row readout panel.
 *
 * Clean-room: built from a functional description of the effects, against
 * this project's own tokens. No third-party source was read. The visual
 * vocabulary (hairline strokes, tick rails, small uppercase mono labels,
 * cool field with one warm accent) is the film/game HUD idiom this site
 * already speaks via Arwes (MIT).
 *
 * Load order: after components.css, which defines the .sf-frame surfaces
 * these sit on top of.
 *
 * Contrast: every rule that paints readable text uses --sf-text or one of
 * the --sf-*-text tokens, all verified >= 8:1 against the lightest dark
 * background in the era ladder (#1a1a18). Neon at full saturation is a
 * stroke-and-tick color here, never a text color — hsl(210,90%,60%) is
 * 5.87:1 and fails.
 */

/* ===================================================================
   SCAN SWEEP
   A light pass that travels across a surface once per cycle. Distinct
   from .sf-scanlines, which is a static raster texture. The sweep is
   ambient, so it is the one thing here that repeats.
   =================================================================== */

.sf-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sf-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 40%,
    color-mix(in srgb, var(--sf-neon) 14%, transparent) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 150% 0;
  opacity: var(--sf-sweep-opacity, 1);
  animation: sf-sweep-pass var(--sf-sweep-duration, 7s) var(--sf-ease) infinite;
}

@keyframes sf-sweep-pass {
  0%   { background-position: 150% 0; }
  /* Long tail: the pass is brief, the rest of the cycle is rest. */
  45%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}

/* Blue variant tracks the Clean Net side of the palette. */
.sf-sweep--blue::after {
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    transparent 40%,
    color-mix(in srgb, var(--sf-neon-blue) 14%, transparent) 50%,
    transparent 60%,
    transparent 100%
  );
}


/* ===================================================================
   SELF-DRAWING UNDERLINE
   A rule that draws left-to-right on hover or on reveal, instead of
   appearing whole. Scales with --sf-link-luminous so it stays inert in
   the early eras and gains glow as the technology saturates.
   =================================================================== */

.sf-underline {
  position: relative;
  text-decoration: none;
  color: var(--sf-text);
}

.sf-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 1px;
  background: var(--sf-neon);
  box-shadow: 0 0 calc(var(--sf-glow-strength, 0) * 1px) var(--sf-neon);
  opacity: calc(0.45 + (var(--sf-link-luminous, 0) * 0.55));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sf-duration-med) var(--sf-ease);
}

.sf-underline:hover::after,
.sf-underline:focus-visible::after,
.sf-underline.sf-underline--drawn::after {
  transform: scaleX(1);
}

/* Right-origin variant, for a rule that retracts toward its source. */
.sf-underline--reverse::after { transform-origin: right center; }


/* ===================================================================
   READOUT PANEL
   A labelled key/value block: mono, uppercase keys, hairline tick rule,
   values in body text. The existing .sf-data-badge is a single chip;
   this is the multi-row instrument it belongs on.
   =================================================================== */

.sf-readout {
  font-family: var(--sf-font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  border-left: 2px solid var(--sf-neon);
  padding: var(--sf-space-sm) 0 var(--sf-space-sm) var(--sf-space-md);
  margin: var(--sf-baseline) 0;
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: 0.35em var(--sf-space-md);
}

.sf-readout__key {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Muted-looking but still readable: 8.04:1 minimum, not the 4.92:1
     that plain --sf-muted would give on a dark surface. */
  color: var(--sf-muted-text);
  white-space: nowrap;
}

.sf-readout__value {
  color: var(--sf-text);
  font-variant-numeric: tabular-nums;
}

/* Tick rule between rows — decorative, so it may sit below 8:1. */
.sf-readout__key::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  margin-left: 0.5em;
  border-bottom: 1px dotted color-mix(in srgb, var(--sf-neon) 45%, transparent);
  vertical-align: 0.25em;
}

.sf-readout--blue { border-left-color: var(--sf-neon-blue); }
.sf-readout--blue .sf-readout__key::after {
  border-bottom-color: color-mix(in srgb, var(--sf-neon-blue) 45%, transparent);
}

/* An emphatic value — the one warm accent in a cool field. */
.sf-readout__value--flag { color: var(--sf-amber-text); }


/* ===================================================================
   REDUCED MOTION
   The sweep is the only ambient loop here; it stops entirely. The
   underline keeps its end state and drops the transition.
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sf-sweep::after { animation: none; opacity: 0; }
  .sf-underline::after { transition: none; transform: scaleX(1); }
}