/* Boyrun, for the type sign's words. A demo font, licensed for personal use only (see ~/Downloads/boyrun). */
@font-face {
  font-family: 'Boyrun';
  src: url('../assets/fonts/Boyrun.ttf') format('truetype');
  font-display: block;
}

/* A stage: --sw by --sh art pixels at size --s. The home scene's corner sits at --ox, --oy.
   wind.js sets all five: 404 by 237 for the rock, wider and taller for the full scene. */
.stage {
  position: relative;
  width: calc(var(--sw) * var(--s) * 1px);
  height: calc(var(--sh) * var(--s) * 1px);
  max-width: none;
  margin-inline: auto;
  /* Turned images poke their empty corners past the stage, and the overflow comes and goes as they sway: without this
     a scrollbar flickers on and off around the stage and the scene jumps sideways. The stage already has room for
     everything that draws. */
  overflow: clip;
}

/* In context: the stage sits inside the home page's .scene box, so the home scene's corner lands on the box's corner. */
.scene > .stage {
  left: calc(var(--ox) * var(--s) * -1px);
  top: calc(var(--oy) * var(--s) * -1px);
  margin: 0;
}

.stage > * {
  position: absolute;
}

/* In 1, each element's pieces share a box the size of the stage (wind.js, Stage.layer), so a page can bring an element
   in or hide it whole. Its pieces sit in it as they would in the stage. */
.stage .layer {
  inset: 0;
}

.stage .layer > * {
  position: absolute;
}

/* In 1, the ground shadows: one canvas to each thing, in a box the size of the stage that holds their opacity (wind.js). */
.stage .grounds {
  inset: 0;
}

.stage .grounds > * {
  position: absolute;
}

.stage canvas,
.stage img,
.stage .strip {
  image-rendering: pixelated;
}

.stage canvas {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Art placed in art pixels: --x, --y, --w, --h. */
.stage .art {
  left: calc(var(--x) * var(--s) * 1px);
  top: calc(var(--y) * var(--s) * 1px);
  width: calc(var(--w) * var(--s) * 1px);
  height: calc(var(--h) * var(--s) * 1px);
  max-width: none;
}

/* A word on the type sign: wind.js places its centre and tilt each frame, so it rides its board. --type is its size in
   art pixels, from the panel's Sign tab (16 in the Figma). */
.stage .word {
  left: 0;
  top: 0;
  color: #fffefc;
  font: 400 calc(var(--type, 16) * var(--s) * 1px) / 1.4 'Boyrun', cursive;
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.stage svg {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Technique 6: a window one frame wide; the strip slides behind it in whole frames. */
.stage .window {
  overflow: hidden;
}

.stage .strip {
  position: static; /* the home page's .scene img rule would place it, in context */
  display: block;
  height: 100%;
  max-width: none;
  animation: strip var(--loop, 4s) steps(var(--frames, 16)) infinite;
}

@keyframes strip {
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage .strip {
    animation: none;
  }
}

/* Technique 10: the boil filter's own svg takes no room. */
.stage .boil-defs {
  width: 0;
  height: 0;
}

/* 1b and 1d: everything but the sign in one box, which the boil filter moves. */
.stage .boil-wrap {
  inset: 0;
}

.stage .boil-wrap > * {
  position: absolute;
}