/* ── BLACK SYNTAX — terms, inscribed ─────────────────────────────
   The terms are carved into the dark one clause at a time: each
   writes itself glyph by glyph, holds to be read, then burns away
   to embers as the next begins. (Layered over the readable document
   in legal.css, which stays for screen readers and reduced motion.) */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* only once JS confirms motion is welcome does the page go full-void */
.is-scribe, .is-scribe body { height: 100%; overflow: hidden; }

.is-scribe .wrap {
  position: relative;
  z-index: 10;
  min-height: 0;
  pointer-events: none;      /* taps fall through to the stage… */
}
.is-scribe .top { pointer-events: auto; }  /* …masthead stays live */

.scribe-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  cursor: pointer;
  touch-action: manipulation;
}

.scribe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(38rem, 88vw);
  text-align: left;
}

.scribe__label {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.5em;
  text-transform: lowercase;
  color: var(--grey-dim);
  margin-bottom: 1.15rem;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.scribe__label.is-in { opacity: 1; }

.scribe__text {
  font-size: clamp(1rem, 0.6rem + 1.1vw, 1.25rem);
  line-height: 1.95;
  letter-spacing: 0.015em;
  color: var(--grey-lit);
  min-height: 1.95em;
}

.scribe--big .scribe__text {
  font-size: clamp(1.5rem, 5.5vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-shadow: 0 0 42px rgba(233, 233, 233, 0.12);
  min-height: 1.3em;
}

/* words hold together; only the whole word wraps to the next line */
.scribe-word { display: inline-block; white-space: nowrap; }

/* each carved glyph is its own body, so it can burn on its own */
.scribe-glyph {
  display: inline-block;
  transition:
    color 0.5s ease,
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.3, 0, 0.5, 1),
    text-shadow 0.5s ease;
}

/* the burn — a cool grey glyph, briefly warmed, then it lifts and is gone */
.scribe-glyph.is-ember {
  color: #cf9a58;
  opacity: 0;
  transform: translateY(-0.55em) scale(1.05);
  text-shadow: 0 0 12px rgba(207, 154, 88, 0.55);
}

/* the writing hand */
.scribe-caret {
  display: inline-block;
  width: 0.52em;
  height: 1.05em;
  margin-left: 0.05em;
  transform: translateY(0.16em);
  background: var(--grey-lit);
  box-shadow: 0 0 12px rgba(168, 168, 168, 0.4);
}
.scribe--big .scribe-caret { height: 1em; transform: translateY(0.1em); }
.scribe.is-writing .scribe-caret { opacity: 0.9; }
.scribe.is-held .scribe-caret { animation: caret-blink 1.05s steps(1) infinite; }
@keyframes caret-blink { 0%, 49% { opacity: 0.9; } 50%, 100% { opacity: 0; } }

/* the whispered instruction, low on the screen */
.scribe-hint {
  position: fixed;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  transform: translateX(-50%);
  z-index: 8;
  max-width: 90vw;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey-dim);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.scribe-hint.is-on { opacity: 1; }