/* ===========================================================================
   Landing overture: the first visit opens under a raking lamp
   ---------------------------------------------------------------------------
   What the overture needs that the cover does not already provide: the
   cover's furniture held back until the hand-over, a plane the lamp's light
   is drawn on, the one control that leaves early, and the beam's mask on the
   title. landing-overture.js records what each of these is for.
   =========================================================================== */

/* The cover's furniture belongs to the cover. It waits for the hand-over and
   then arrives on the cover's own ramp, so the last half second of the
   overture is the cover assembling rather than a second sequence. */
html.overture-running .terrain-readout,
html.overture-running .landing-continue{opacity:0!important;transition:none!important;pointer-events:none}
/* The opening and the chapter index are written into the page for a reader
   without script, so they paint before the landing is enhanced and only then
   fade away; in a dark room that fade would be the first thing a new reader
   saw. They stay out of the room until it is the cover's, by which time they
   are already in the state the cover keeps them in. */
html.overture-running .landing-intro,
html.overture-running #chapters{opacity:0!important;transition:none!important}
html.overture-done .landing-enhanced .terrain-readout,
html.overture-done .landing-enhanced .landing-continue{transition:opacity .9s .12s ease,transform .9s var(--landing-ease)}

/* The lamp's light is drawn on a plane the size of the loom's own canvas,
   directly above it and below the title. */
.overture-plane{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none}

/* The title is shown only where the beam has reached it: a pool that passes
   through the letters with the lamp, a trace of light left behind it, and
   the room's own light filling the rest once the lamp has lifted. Each word
   carries its own mask on its rise layer, because the words ride the
   terrain and stand outside the title's box, and a mask on the title could
   not reach them there. A mask also clips at its own box, so for the length
   of the overture each rise layer is padded out past its glyphs, the italic
   overhang and the descenders included, with margins that take the padding
   straight back, so nothing in the line moves. Crisis keeps the cover's
   neutral ink until the room has filled the title, so that no single word
   arrives ahead of the rest. */
html.overture-lit #landing-title .landing-title-word-rise{
  --overture-mask:linear-gradient(transparent,transparent);
  padding:.34em .24em;margin:-.34em -.24em;
  -webkit-mask-image:var(--overture-mask);mask-image:var(--overture-mask);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}
html.overture-lit:not(.overture-filled) #landing-title .landing-title-crisis-word{color:var(--landing-ink)}
html.overture-filled #landing-title .landing-title-crisis-word{transition:color .9s .08s var(--landing-ease)}
/* Since the lamp reveals the name alone, the scope line beneath it stays in
   the dark while the lamp is down and rises on its own curve once the room's
   light has begun to fill the title, finishing before the lamp lifts. It
   keeps no fill once it has risen, so that a scroll which follows can still
   take it away with the title. */
html.overture-lit:not(.overture-filled) .landing-title-scope-text{opacity:0!important;animation:none!important}
html.overture-filled .landing-title-scope-text{animation:landing-title-scope-rise 900ms cubic-bezier(.16,1,.3,1) 420ms backwards!important}

/* Leaving early. The control is one word and a key, set in the archive's
   notation, and it never asks for attention: any key, any click and any
   scroll do the same thing. */
.overture-skip{
  position:fixed;z-index:120;right:clamp(16px,2.6vw,40px);bottom:clamp(16px,3.4vh,36px);
  display:inline-flex;align-items:center;gap:10px;padding:9px 12px 9px 14px;
  border:0;border-radius:999px;background:transparent;color:var(--landing-muted);
  font:500 10px/1 var(--landing-mono);letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s var(--landing-ease),color .2s ease;
  cursor:pointer
}
.overture-skip.is-shown{opacity:1;transform:none}
.overture-skip:hover,.overture-skip:focus-visible{color:var(--landing-ink)}
.overture-skip:focus-visible{outline:1px solid var(--mhc-accent);outline-offset:2px}
.overture-skip kbd{
  padding:3px 5px 2px;border:1px solid var(--landing-line-soft);border-radius:3px;
  font:inherit;font-size:10px;letter-spacing:.06em;text-transform:lowercase
}
@media (max-width:700px){
  .overture-skip{right:12px;bottom:auto;top:12px}
}