/* ENVOY — next.css
   the black run-up either side of the order panel

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* --------------------------------------------------------------- next up */

/* Deliberately empty — the film panel under the tour, waiting for content.
   It is what the last tour panel's scroll falls through into, so give it real
   height or the tour ends at the bottom of the document again.

   Taller than a screen on purpose. The plate fades in as the panel arrives and
   back out as the closing panel takes over, and at exactly 100vh those two
   ramps meet with nothing between them — the fire would reach full and
   immediately start leaving. The extra fifth of a screen is the beat it holds
   for. */
.next {
  position: relative;
  z-index: 1;
  min-height: 120vh;
}

/* Black run-up. It paints its own black, so it hides the fixed plate behind it
   for its whole height — which is the point: the fire is not allowed to start
   until the tour has properly finished, and it is properly gone before the
   closing panel arrives.

   A quarter of a screen, not the three quarters this used to be. The run-up is
   not the only black between the claims above and the order title: the .light
   section's own bottom padding comes first and the panel's 24vh black mask
   comes after, so three quarters of a screen here put the better part of two
   screens of nothing between the last card and the heading. Long enough to
   read as the page having ended rather than as a beat before the sale. */
.gap {
  position: relative;
  z-index: 1;
  height: 24vh;
  background: #000;
}

/* The run-up *out* of the order panel is shorter than the one into it. The two
   are not the same beat: the one above is a wait, held long because the reader
   is arriving somewhere and the fire has to have somewhere to come up out of.
   This one is an exit, and the page is over just below it — three quarters of
   a screen of nothing between the last thing you are asked to do and the
   footer reads as the site having stalled rather than as a pause.

   This number is not taste — it is the floor, and it is tied to one constant in
   js/backdrop.js. The exit fade runs over FADE of a viewport starting from the
   foot of #next, so the fire reaches zero exactly FADE screens below this box's
   top edge. Match the two and the closing panel's first row of pixels arrives
   at the bottom of the screen on the same scroll position the fire finishes
   leaving. Anything shorter and the panel is on screen while the plate is still
   lit behind it — at 42vh against FADE = 0.5 it came in over an ember still at
   about 16%.

   So the pair moves together, and it has, twice: 50vh/0.5 to 34vh/0.34 to take
   some of the dead black out from under the form, and now to 20vh/0.20 to close
   the rest of it. Shorten it further only by moving FADE by the same amount —
   and note this is now a fifth of a screen, which is about as fast as the fire
   can leave before the fade itself starts to read as a cut. */
.next + .gap { height: 20vh; }

/* The tour above paints solid black and this panel paints nothing at all, so
   the edge where they meet is a hard horizontal line drawn straight across the
   fire. Carry the black down into the plate instead.

   It belongs on the panel rather than on the fixed backdrop: the plate does not
   move, but this seam does — it is the tour's bottom edge, and it has to travel
   with it.

   The stops are hand-placed rather than left to a two-colour ramp. A straight
   linear fade of alpha over this much height bands visibly against a near-flat
   dark field; easing it out slowly at first and quickly at the end reads as
   depth instead of as a gradient. */
.next::before,
.next::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Was 38vh. The mask reads as black for most of its run, so its height is
     black run-up as much as the .gap above it is — and it is stacked directly
     on top of that gap. Shortening both is what actually closes the hole; the
     ramp is still long enough at this height not to band. .order's own top
     padding is set clear of this, so the two move together. */
  height: 24vh;
  /* below anything this panel will hold, above the plate behind it */
  z-index: -1;
  pointer-events: none;
}

.next::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.94) 14%,
    rgba(0, 0, 0, 0.78) 32%,
    rgba(0, 0, 0, 0.52) 54%,
    rgba(0, 0, 0, 0.26) 76%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Same edge, other end: the gap below is black too, so without this the fire
   would stop dead on a line at the foot of the panel. */
.next::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.94) 14%,
    rgba(0, 0, 0, 0.78) 32%,
    rgba(0, 0, 0, 0.52) 54%,
    rgba(0, 0, 0, 0.26) 76%,
    rgba(0, 0, 0, 0) 100%
  );
}