/* css/scramble.css — slot-machine type-in (ANALYSIS.md #5, decision E.3).
 * Loaded last. Pairs with js/scramble.js.
 *
 * Anti-flash safety net: <main> and the nav links stay transparent under
 * `html.js` until js/scramble.js has swapped every text node for its
 * frame-0 wrapper and added `html.offer-scramble-ready` (same task, before
 * paint). If the script never runs (error, blocked), the fallback keyframe
 * reveals everything at 1.2s. Without JS, `html.js` never exists and
 * nothing is hidden.
 */
html.js:not(.offer-scramble-ready) main,
html.js:not(.offer-scramble-ready) .nav-links,
html.js:not(.offer-scramble-ready) .lang-toggle {
  opacity: 0;
  animation: offer-scramble-fallback 0s 1.2s forwards;
}

@keyframes offer-scramble-fallback {
  to { opacity: 1; }
}

html.offer-scramble-ready main,
html.offer-scramble-ready .nav-links,
html.offer-scramble-ready .lang-toggle {
  animation: offer-scramble-in 220ms ease-out both;
}

@keyframes offer-scramble-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- the effect ------------------------------------------------------
 * .osc       wrapper replacing one text node while it types
 * .osc-lead  the 2–4 real chars at the cursor, kept as invisible width
 *            placeholders; .osc-reel overlays the cycling glyphs on top,
 *            so glyph widths never move the line (no layout jump)
 * .osc-rest  the untyped remainder: laid out, invisible, still readable
 *            by assistive tech (color, not visibility)
 */
.osc-lead {
  position: relative;
}

.osc-lead,
.osc-rest {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.osc-reel {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  pointer-events: none;
  user-select: none;
  color: var(--accent-bright, #2E7FD8);
  -webkit-text-fill-color: var(--accent-bright, #2E7FD8);
  opacity: .9;
  /* a faint trailing fade: the glyph nearest the cursor reads strongest */
  -webkit-mask-image: linear-gradient(90deg, #000 35%, rgba(0,0,0,.35));
          mask-image: linear-gradient(90deg, #000 35%, rgba(0,0,0,.35));
}

/* Inside a `background-clip: text` ancestor (.osc--clip, set by
 * js/scramble.js) a transparent glyph still shows the ancestor's background,
 * so the untyped chars must not be painted at all. The reel stays visible.
 * (These chars leave the a11y tree for the ≤3.2s of typing; the wrapper's
 * root carries aria-busy meanwhile.) */
.osc--clip .osc-lead,
.osc--clip .osc-rest {
  visibility: hidden;
}

.osc--clip .osc-reel {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  /* js/scramble.js never touches text under reduced motion. */
  html.js main,
  html.js .nav-links,
  html.js .lang-toggle {
    opacity: 1 !important;
    animation: none !important;
  }
}