/* Loading screen overlay — keep this in <head> so it covers the page before any JS runs */
html.wl-loading { overflow: hidden; }

#wl-loader {
  /* Tweak these to taste */
  --wl-bg: #feffff;              /* the PSD background colour */
  --wl-portrait-zoom: 1.25;      /* on tall phones, how much wider than the screen the art may get (sides get cropped) */
  --wl-portrait-max: 62dvh;      /* ...but never taller than this share of the screen */
  --wl-y: 50%;                   /* vertical position of the art */

  position: fixed; inset: 0; z-index: 2147483000;
  background: var(--wl-bg);
  overflow: hidden;
}

/* The artwork is a square (like the video) that fits the screen ("contain");
   the loader continues the room around it, so wide and tall screens are filled edge to edge. */
#wl-loader .wl-stage {
  position: absolute; left: 50%; top: var(--wl-y);
  transform: translate(-50%, -50%);
  width: min(100vw, 100vh);
  width: min(100vw, 100dvh);     /* dvh = the visible height on mobile, ignoring the URL bar */
  aspect-ratio: 1 / 1;
  visibility: hidden;            /* shown once the artwork is decoded */
  /* no overflow clipping: the scene continues past the square (floor, walls, cords) to fill the screen */
}

/* Tall, narrow screens (phones in portrait): a contained square would be a small strip in the
   middle, so let it grow past the sides a little. Only the outer edges of the room get cropped;
   the headline and the people stay in view. */
@media (max-aspect-ratio: 4/5) {
  #wl-loader .wl-stage {
    width: max(100vw, min(calc(100vw * var(--wl-portrait-zoom)), 62vh));
    width: max(100vw, min(calc(100vw * var(--wl-portrait-zoom)), var(--wl-portrait-max)));
  }
}

#wl-loader.wl-ready .wl-stage { visibility: visible; }
#wl-loader .wl-p, #wl-loader .wl-clip { position: absolute; }
#wl-loader .wl-p { background-repeat: no-repeat; will-change: transform; }
#wl-loader .wl-clip { overflow: hidden; }
#wl-loader .wl-p > svg { display: block; }
#wl-loader .wl-flip { position: absolute; inset: 0; background-repeat: no-repeat; transform: scaleX(-1); }
#wl-loader .wl-cord { position: absolute; background: #000; }

/* the <img> only exists so the browser picks and downloads the right atlas size */
#wl-loader .wl-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }