@font-face {
  font-family: "Archivo Black";
  src: url("/archivo-black.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Anton";
  src: url("/anton.woff2") format("woff2");
  font-display: block;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #f3efe4;
}

/* name is in the title bar; keep it for screen readers only */
h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the sheet of paper; cycle.js sets its colour and fills it with ink layers */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #f3efe4;
  isolation: isolate;
  cursor: pointer;
}

/* one ink layer: placed, turned and flipped here, moved by the three boxes inside it */
.pos {
  position: absolute;
  transform: translate(var(--ox, 0vmin), var(--oy, 0vmin)) rotate(var(--r, 0deg)) scale(var(--fx-flip, 1), var(--fy-flip, 1));
}
.pos .move,
.pos .creep,
.pos .ink {
  position: absolute;
  inset: 0;
}
.over {
  mix-blend-mode: multiply;
}

/* shapes are masks, so any shape prints in any ink */
.m-disc {
  border-radius: 50%;
}
.m-acorn {
  -webkit-mask: url("/acorn.svg") center / contain no-repeat;
  mask: url("/acorn.svg") center / contain no-repeat;
}
.m-engraving {
  -webkit-mask: url("/engraving.png") center / contain no-repeat;
  mask: url("/engraving.png") center / contain no-repeat;
}
.m-dots-a {
  -webkit-mask: url("/dots-a.png") center / contain no-repeat;
  mask: url("/dots-a.png") center / contain no-repeat;
}
.m-dots-b {
  -webkit-mask: url("/dots-b.png") center / contain no-repeat;
  mask: url("/dots-b.png") center / contain no-repeat;
}
.m-rows {
  -webkit-mask: url("/tile.svg") 0 0 / var(--tile, 13vmax) var(--tile, 13vmax) repeat;
  mask: url("/tile.svg") 0 0 / var(--tile, 13vmax) var(--tile, 13vmax) repeat;
}

.word {
  position: absolute;
  line-height: .86;
  white-space: nowrap;
  transform: translate(var(--ox, 0vmin), var(--oy, 0vmin)) rotate(var(--r, 0deg));
}
.word.fat {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  letter-spacing: -.05em;
}
.word.tall {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  text-transform: uppercase;
  line-height: .98;
}
.at-bl { left: 4vw; bottom: 3vh; }
.at-br { right: 4vw; bottom: 3vh; text-align: right; }
.at-tl { left: 4vw; top: 3vh; }
.at-tr { right: 4vw; top: 3vh; text-align: right; }
.at-c { left: 0; right: 0; top: 50%; text-align: center; transform: translate(var(--ox, 0vmin), calc(-50% + var(--oy, 0vmin))) rotate(var(--r, 0deg)); }

/* the print that shows when cycle.js has not run */
.plain-disc { left: calc(50vw - 38vmin); top: calc(47vh - 38vmin); width: 76vmin; height: 76vmin; }
.plain-disc .ink { background: #ff48b0; }
.plain-acorn { left: calc(50vw - 24vmin); top: calc(47vh - 24vmin); width: 48vmin; height: 48vmin; --ox: 1.3vmin; --oy: 1vmin; }
.plain-acorn .ink { background: #0078bf; }
.plain-word { color: #0078bf; font-size: clamp(22px, 6vw, 96px); }

/* movement: ink slams in from its own side, keeps creeping while the print is up, and shivers the whole time */
.move {
  animation: slam 110ms steps(3, end) both;
}
.creep {
  animation: creep var(--hold, 600ms) linear both;
}
.ink,
.text {
  animation: shiver var(--ss, .4s) steps(1) infinite;
}
@keyframes slam {
  from { transform: translate(var(--sx, 0vmin), var(--sy, 0vmin)); }
  to { transform: none; }
}
@keyframes creep {
  from { transform: none; }
  to { transform: translate(var(--dx, 0vmin), var(--dy, 0vmin)) rotate(var(--dr, 0deg)); }
}
@keyframes shiver {
  0% { transform: none; }
  25% { transform: translate(var(--sh, .3vmin), calc(var(--sh, .3vmin) * -.6)); }
  50% { transform: translate(calc(var(--sh, .3vmin) * -.6), var(--sh, .3vmin)) rotate(var(--sr, 0deg)); }
  75% { transform: translate(calc(var(--sh, .3vmin) * .4), calc(var(--sh, .3vmin) * .8)); }
}

@media (prefers-reduced-motion: reduce) {
  .move, .creep, .ink, .text { animation: none; }
}