/* WAD Commander handout, default 3D view: the two faces as the front and back of a
   3D big box (box3d.js), after a DOS boot screen. The inline script in
   index.html links this file and portrait.css, and drops landscape.css, before
   the first paint, so both faces always use the A4 layout.

   The faces are laid out at their largest zoom and the box is scaled down from
   there, so text stays sharp when it zooms in: 1.15 × the viewport height, or
   the zoom that reads them across the screen's width (up to 1920px wide). On
   narrow screens the camera reads them section by section instead, so they are
   laid out at a readable size (9.5px to the rem), or at half a face across. */

html.box3d {
  --depth: 24rem;
  --half-depth: 12rem;
  font-size: max(calc(100svh * 1.15 / 141.43), min(.96vw, 19.2px));
  scroll-snap-type: none;
  scroll-behavior: auto;
  background: var(--dos-black);
}
@media (max-width: 832px) {
  html.box3d { font-size: max(calc(100svh * 1.15 / 141.43), 9.5px, 1.88vw); }
}
html.box3d body { background: var(--dos-black); overflow-x: hidden; }
html.box3d.booting { overflow: hidden; }
.box3d .desk { display: none; }
.box3d .to-3d { display: none; }

/* The scroll track drives the animation (box3d.js sets its height from the
   length of the path); the stage stays put */
.box3d-track { height: 800svh; }
.box3d-stage { position: fixed; inset: 0; overflow: hidden; }
.box3d-bg {
  position: absolute; left: 50%; top: 50%;
  width: max(190vw, 190svh); height: max(190vw, 190svh); translate: -50% -50%;
  pointer-events: none;
}
.box3d-bg svg { width: 100%; height: 100%; }
.box3d-floor {
  position: absolute; left: 50%; top: 50%;
  width: 120rem; height: 26rem; margin: -13rem 0 0 -60rem;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0));
  pointer-events: none; will-change: transform, opacity;
}

/* The box: the faces at its sides, the depth of a 1990s big box */
.box3d-box {
  position: absolute; left: 50%; top: 50%;
  width: 100rem; height: 141.43rem; margin: -70.715rem 0 0 -50rem;
  transform-style: preserve-3d; will-change: transform;
}
.box3d-box > * { position: absolute; backface-visibility: hidden; }
.box3d .box3d-box > .face { left: 0; top: 0; margin: 0; border-radius: 0; box-shadow: none; scroll-snap-align: none; }
.box3d #front { transform: translateZ(var(--half-depth)); }
.box3d #back { transform: rotateY(180deg) translateZ(var(--half-depth)); }

.box3d-side { overflow: hidden; background: var(--dos-black); box-shadow: inset 0 0 0 .15rem rgba(255, 255, 255, .08); }
.box3d-side--left, .box3d-side--right { left: calc(50rem - var(--half-depth)); top: 0; width: var(--depth); height: 141.43rem; }
.box3d-side--left { transform: rotateY(-90deg) translateZ(50rem); }
.box3d-side--right { transform: rotateY(90deg) translateZ(50rem); }
.box3d-side--top, .box3d-side--bottom { left: 0; top: calc(70.715rem - var(--half-depth)); width: 100rem; height: var(--depth); }
.box3d-side--top { transform: rotateX(90deg) translateZ(70.715rem); }
.box3d-side--bottom { transform: rotateX(-90deg) translateZ(70.715rem); }

/* The spine continues the front: its gray band at the top, its stripes near
   the bottom, the logo running down the middle */
.box3d-side .spine-band {
  position: absolute; left: 0; right: 0; top: 0; height: 7.6rem;
  background: var(--dos-light-gray); box-shadow: inset 0 .15rem #e6e6e6, inset 0 -.25rem #7c7c7c;
}
.box3d-side .spine-stripes {
  position: absolute; left: 0; right: 0; top: 130.5rem; height: 3.2rem;
  background: linear-gradient(to bottom, var(--dos-yellow) 0 22%, transparent 0 34%, var(--dos-brown) 0 56%, transparent 0 68%, var(--dos-red) 0 90%, transparent 0);
}
.box3d-side .spine-title {
  position: absolute; left: 50%; top: 69rem; width: 112rem; height: var(--depth);
  display: flex; align-items: center; justify-content: center; gap: 4rem;
  translate: -50% -50%; rotate: 90deg;
}
.box3d-side .spine-title .logo-line { width: 72rem; max-width: none; height: auto; }
.box3d-side .spine-title b { font-size: 4.2rem; font-weight: normal; color: var(--amber); }
.box3d-side--top { background: var(--dos-light-gray); box-shadow: inset 0 0 0 .15rem #e6e6e6; }
.box3d-side--top .spine-rule {
  position: absolute; left: 4rem; right: 4rem; top: 50%; height: 3rem; translate: 0 -50%;
  background: repeating-linear-gradient(to bottom, #8f8f8f 0 .3rem, transparent 0 .7rem);
}

/* Light from the upper left: box3d.js darkens each face by the angle it turns away */
.box3d-shade { position: absolute; inset: 0; z-index: 30; background: var(--dos-black); opacity: 0; pointer-events: none; will-change: opacity; }

.box3d-hint, .box3d-flat {
  position: fixed; left: 50%; bottom: max(3svh, 18px); translate: -50% 0; z-index: 5;
  padding: .4em .8em; font: 18px/1 var(--font); white-space: nowrap; color: var(--dos-black); background: var(--amber);
  box-shadow: 4px 4px 0 #333; pointer-events: none; transition: opacity .3s;
}
@media (max-height: 599px) {
  .box3d-hint, .box3d-flat { bottom: 8px; font-size: 14px; }
}
/* At the end, back to the flat pages: fades in, and out when the page scrolls back */
.box3d-flat {
  display: inline-flex; align-items: center; gap: .6em;
  text-decoration: none; text-transform: uppercase; background: var(--dos-bright-cyan);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s;
}
.box3d-flat.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s; }
.box3d-flat:hover { background: #aaffff; }
.box3d-flat:active { transform: translate(4px, 4px); box-shadow: none; }

/* The boot screen: a VGA text mode covering the screen, in square pixels (box3d.js sizes it) */
.box3d-boot { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--dos-black); cursor: pointer; }
.box3d-boot.is-melting { background: transparent; cursor: auto; }
.box3d-boot canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.box3d-boot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}
.box3d-boot.is-melting::after { opacity: 0; }
.box3d-boot p { position: absolute; right: 18px; bottom: 14px; margin: 0; font: 15px/1 var(--font); color: #555; }
.box3d-boot.is-melting p { display: none; }