/* The key art for any screen. layouts.css (generated by build.py from the editor's saved
   layouts) sets, for the saved layout nearest the viewport's aspect, the canvas size --W x --H
   and each layer's place in canvas pixels. Here the canvas is scaled to fit the viewport whole,
   so the title is never trimmed, and the background is stretched over the rest. No script. */

@font-face {
  font-family: "Akt";
  src: url("akt-black.woff2") format("woff2");
  font-weight: 900;
  font-display: block;
}

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }

.page {
  /* The viewport; svh so a phone's browser bars never cover the title. */
  --vw: 100vw;
  --vh: 100vh;
  /* One canvas pixel on screen. */
  --u: min(var(--vw) / var(--W), var(--vh) / var(--H));
  /* Where the canvas starts inside the viewport: on the left and bottom edges, so the arm
     still enters from the screen's left and the torso reaches its bottom; spare width goes
     to the right, spare height into the sky above. Both are 0 when the aspect matches. */
  --ox: 0px;
  --oy: calc(var(--vh) - var(--H) * var(--u));
  position: fixed;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
@supports (height: 100svh) {
  .page { --vh: 100svh; }
}

.stage {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: calc(var(--W) * var(--u));
  height: calc(var(--H) * var(--u));
}

/* The layout's background rectangle, grown where needed to reach the viewport's edges. */
.bg {
  position: absolute;
  --l: min(calc(var(--bx) * var(--u)), calc(-1 * var(--ox)));
  --t: min(calc(var(--by) * var(--u)), calc(-1 * var(--oy)));
  --r: max(calc((var(--bx) + var(--bw)) * var(--u)), calc(var(--vw) - var(--ox)));
  --b: max(calc((var(--by) + var(--bh)) * var(--u)), calc(var(--vh) - var(--oy)));
  left: var(--l);
  top: var(--t);
  width: calc(var(--r) - var(--l));
  height: calc(var(--b) - var(--t));
  background: #000 url("bg.webp") center / cover no-repeat;
}

/* The title: centred on --tx, its baseline on --ty (the font's box ends on the baseline). */
.title {
  position: absolute;
  left: calc(var(--tx) * var(--u));
  top: calc((var(--ty) - var(--ts)) * var(--u));
  transform: translateX(-50%);
  font: 900 calc(var(--ts) * var(--u)) / 1 "Akt", sans-serif;
  font-kerning: none;
  color: #ad1100;
  white-space: nowrap;
}
.title span { position: relative; }
.title span:nth-child(1) { left: var(--l0dx); top: var(--l0dy); }
.title span:nth-child(2) { left: var(--l1dx); top: var(--l1dy); }
.title span:nth-child(3) { left: var(--l2dx); top: var(--l2dy); }
.title span:nth-child(4) { left: var(--l3dx); top: var(--l3dy); }

.arm {
  position: absolute;
  left: calc(var(--ax) * var(--u));
  top: calc(var(--ay) * var(--u));
  width: calc(var(--aw) * var(--u));
  height: auto;
  /* The image's top edge (the flame) is cut off. Where the spare height above the canvas
     shows it, it fades over up to 4% of the arm's height (1808 / 1945 of its width); where
     it is off screen or on the canvas's top edge, --fade is 0 and nothing changes. */
  --fade: clamp(0px, calc(var(--oy) + var(--ay) * var(--u)), calc(var(--aw) * var(--u) * 0.0372));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade));
}

.page:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }