/* =========================================================
   THE OPENING — a lid over the page (js/opening.js)
   =========================================================
   It covers the viewport, runs once per visit on its own clock, and
   unmounts; the page underneath never knew it was there. The picture is
   one canvas — the About island's engine, borrowed — and the reveal is a
   mask on this element, written per frame, so everything in the lid
   (canvas, lines, rail) is taken by the same edge. */
.hero {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #000;
}
.hero[hidden],
.no-js .hero,
.op-seen .hero { display: none; }

/* The skip: the lid fades off the page it is covering. */
.hero.is-leaving { transition: opacity 480ms var(--ease-out); }

/* The scroll is locked for the length of the opening and only for that.
   position: fixed on the body as well, because iOS scrolls the document
   under an overflow: hidden html quite happily. */
html.is-opening,
html.is-opening body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}
html.is-opening body {
  position: fixed;
  inset: 0;
  width: 100%;
}

/* The island arrives rather than having always been there. */
.hero__isle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.hero__isle[data-live] { opacity: 1; }

/* ---------- the lines ----------
   Stacked in the space the erosion opens, which is the middle of the
   frame. Every row is present from the first frame and holds one line
   of height while empty, so the block never grows and nothing already
   read is nudged. One line each at every width: the size is set from
   the longest of them ("no designer is an island", 17.4em in Panchang
   at this tracking, measured) so it cannot wrap, and a wrap would be a
   row changing height. 84vw of it leaves a real margin on a phone. */
.hero__lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .34em;
  padding: 0 6vw;
  font-size: clamp(13px, calc(84vw / 17.4), 31px);
  pointer-events: none;
}
.hero__ln {
  min-height: 1.4em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .045em;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
  text-shadow: var(--halo);
  opacity: 0;
}

/* The key, drawn as a key, and copy that tells the truth about the
   pointer it is under — used by the rail's skip. */
.door__kbd {
  display: inline-block;
  padding: .06em .5em .12em;
  margin: 0 .12em;
  border: 1px solid currentColor;
  border-radius: .3em;
  /* The UI face, deliberately: a key is a piece of hardware, not a
     line of the writing, and setting it in the display face would
     make it read as a word in the sentence rather than a thing you
     press. Small caps at the UI scale, the same as the nav. */
  font-family: var(--font-ui);
  font-size: .52em;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: .7;
  text-shadow: none;
  vertical-align: .16em;
}

.door__line--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .door__line--desk  { display: none; }
  .door__line--touch { display: inline; }
}


/* =========================================================
   THE RAIL — the clock, made visible
   =========================================================

   THE SCROLL CUE THAT USED TO LIVE HERE IS GONE, and it went with the
   thing it reported on. It said READY / WAIT because the page was
   holding the scroll between beats and a page that refuses to move
   without saying so is broken. Nothing holds the scroll now — the
   scroll is simply not the instrument — so there is nothing to report.

   What replaces it answers the only question a timed sequence leaves
   open: how much longer. A hairline that fills across the bottom of
   the frame, no numbers on it. A countdown would be the brightest
   thing on a black frame and would make the reader do arithmetic; a
   bar is read in the periphery without being looked at.

   Beside it, an exit that stands for the whole run. The old version's
   one defensible claim was that there was always a visible way out.
   A sequence the reader cannot pace needs that more than a scrubbed
   one did, not less. */
.hero__rail {
  position: absolute;
  left: 6vw; right: 6vw; bottom: 4.4svh;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}
.hero__rail[hidden] { display: none; }
.hero__rail[data-show] { opacity: 1; }

/* 2px, not 1. A hairline over a black frame with grain on it is a
   suggestion of a line; this has to be readable at the edge of
   vision, which is the only place it will ever be looked at. */
.hero__rail-track {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(251, 247, 240, .16);
  overflow: hidden;
}
/* transform, not width — width is a layout property and this runs for
   fifteen seconds at sixty frames a second. scaleX off the left edge. */
.hero__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Quiet: findable rather than competing. No pulse — a thing that blinks
   for ten seconds beside a story is asking you to leave it. */
.hero__bail {
  pointer-events: auto;
  flex: none;
  margin: 0;
  padding: .55rem .2rem;
  /* Was 44px only below 640px — this is the fire exit for the whole
     opening, at every width, not just on a phone. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-shadow: var(--halo);
  opacity: .62;
  cursor: pointer;
  transition: opacity 200ms var(--ease-ui), color 200ms var(--ease-ui);
}
.hero__bail:hover,
.hero__bail:focus-visible { opacity: 1; color: var(--ink); }
.hero__bail:focus-visible { outline: 1px solid var(--ink-dim); outline-offset: .4rem; }
.hero__bail .door__kbd { font-size: 1em; vertical-align: .05em; }

@media (max-width: 640px) {
  .hero__rail { left: 8vw; right: 8vw; gap: 1rem; }
  /* A tap target, not a word. */
  .hero__bail { min-height: 44px; padding: .8rem .4rem; }
}