/* §36 THE WALK — the wipe between one room and the next.

   Nothing travels. The shadow comes up over the whole viewport at once, nine
   bootprints appear across it one after another, and the shadow goes. The only
   thing moving is the walking, which is the thing worth looking at — anything
   sweeping sideways drags the eye off the room you are about to be in.

   Under the shadow sits the room you are LEAVING, held there until the shadow
   is fully up. Only then does it drop and let the new room through, so nothing
   on screen changes before the shadow has covered it.

   The prints are yellow and the shadow is navy. Yellow is the colour of things
   that matter in this game, and filling the screen with it twice a minute
   would spend that.

   One number scales the lot. bpSpeed() in the console sets it.

   Nothing here styles a game element except #scene.bp-host, and that class is
   added by §36 rather than written into the page. */
/* the only thing this stylesheet says about anything the game owns, and it
   waits for a class this module adds itself */
#scene.bp-host{position:relative}
#bpWipe{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden;display:none;
  --bp-t:1}
#bpWipe.on{display:block}

/* the shadow. no stagger, no travel — it simply arrives and leaves. */
/* The shadow is solid on the first frame. It has to be: this runs in a
   MutationObserver, which is a microtask, so it lands in the same frame as
   the swap and covers it outright. Nothing needs to hold a copy of the room
   you are leaving, and nothing does — that copy was the flash of the old room
   at the end, and the layer that held it is gone.

   Two phases: the shadow arrives and stays, and §36 adds .out once the new
   picture is decoded. Only then does it leave. */
#bpWipe .bp-dark{position:absolute;inset:0;background:#00131f;opacity:1;
  animation:bpIn calc(330ms * var(--bp-t)) linear forwards}
#bpWipe.out .bp-dark{animation:bpOut calc(100ms * var(--bp-t)) linear forwards}
#bpWipe.bp-g00  .bp-dark{background:#000e18}
#bpWipe.bp-g100 .bp-dark{background:#0a1722}

/* the prints. children of the shadow, so they leave with it and need no fade
   of their own — each one only has to arrive, and it arrives in one frame. */
#bpWipe .bp-step{position:absolute;opacity:0;
  height:clamp(30px,7.4vw,58px);width:auto;fill:var(--yellow);
  animation:bpStamp 1ms steps(1,end) forwards}
#bpWipe .bp-step .tread{fill:#00131f;opacity:.78}

/* two tracks, one leg each, offset from one another the way real prints
   are. they arrive right to left down the diagonal, alternating feet, and
   they cross in about a sixth of a second, which is quick enough to feel
   like a cost and slow enough to watch. */
#bpWipe .bp-step:nth-of-type(1){left:80%;top:23%;transform:translate(-50%,-50%) rotate(237deg);animation-delay:calc(66ms * var(--bp-t))}
#bpWipe .bp-step:nth-of-type(2){left:71.5%;top:38%;transform:translate(-50%,-50%) rotate(236deg) scaleX(-1);animation-delay:calc(90ms * var(--bp-t))}
#bpWipe .bp-step:nth-of-type(3){left:63%;top:33%;transform:translate(-50%,-50%) rotate(241deg);animation-delay:calc(114ms * var(--bp-t))}
#bpWipe .bp-step:nth-of-type(4){left:54.5%;top:48%;transform:translate(-50%,-50%) rotate(241deg) scaleX(-1);animation-delay:calc(138ms * var(--bp-t))}
#bpWipe .bp-step:nth-of-type(5){left:46%;top:43%;transform:translate(-50%,-50%) rotate(236deg);animation-delay:calc(162ms * var(--bp-t))}
#bpWipe .bp-step:nth-of-type(6){left:37.5%;top:58%;transform:translate(-50%,-50%) rotate(235deg) scaleX(-1);animation-delay:calc(186ms * var(--bp-t))}
#bpWipe .bp-step:nth-of-type(7){left:29%;top:53%;transform:translate(-50%,-50%) rotate(242deg);animation-delay:calc(210ms * var(--bp-t))}
#bpWipe .bp-step:nth-of-type(8){left:20.5%;top:68%;transform:translate(-50%,-50%) rotate(240deg) scaleX(-1);animation-delay:calc(234ms * var(--bp-t))}
#bpWipe .bp-step:nth-of-type(9){left:12%;top:63%;transform:translate(-50%,-50%) rotate(238deg);animation-delay:calc(258ms * var(--bp-t))}

@keyframes bpIn{
  0%   {opacity:1}
  100% {opacity:1}
}
/* the tail is cut. a fade that crawls the last few per cent is where a single
   mismatched frame shows, so it goes to nearly nothing and then stops. */
@keyframes bpOut{
  0%   {opacity:1}
  72%  {opacity:.08}
  73%  {opacity:0}
  100% {opacity:0}
}
@keyframes bpStamp{ to{opacity:.9} }

@media (prefers-reduced-motion:reduce){
  #bpWipe{display:none !important}
}