/* ─── The forge ───
   The sheet laid over the site on a fresh arrival (js/intro.js draws on it).
   It only exists while html.has-intro is set — the head decides that before
   first paint — so without JavaScript, or under reduced motion, the site
   simply opens. It sits under the header (z 100): the name is already
   standing where it will stay, and the sheet is drawn off from beneath it. */

.intro {
  display: none;
}

.has-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 90;
}

/* Once the sheet starts coming away, what's under it is live */
.intro.is-lifting {
  pointer-events: none;
}

/* The paper. The last strike breaks it open from the point of impact
   (--x, --y): --front is how far out the sheet is whole again, --soft how
   far the break feathers. */
.intro__sheet {
  --front: 0px;
  --soft: 0px;
  --x: 50%;
  --y: 50%;
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), transparent calc(var(--front) - var(--soft)), #000 var(--front));
          mask-image: radial-gradient(circle at var(--x) var(--y), transparent calc(var(--front) - var(--soft)), #000 var(--front));
}

/* The plate the pen draws on — printed, not displayed: ink multiplies into
   the paper, and an orange pass lands a few points out of register. */
.intro__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: drop-shadow(4px 3px 0 rgba(212, 98, 43, 0.18));
}

/* The plate's caption, set on the sheet so it goes with it */
.intro__caption {
  position: absolute;
  bottom: clamp(1.25rem, 4vh, 2.25rem);
  margin: 0;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.3s;
}

.intro.is-inked .intro__caption { opacity: 0.72; }

.intro__caption {
  left: var(--gutter);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.3;
}