/* ---------- the board: type, cork, tape titles, boot screen ---------- */
:root {
  --bg: #c9955c;
  --ink: #d6ebe6;
  --ink-dim: #6f9893;
  --accent: #78f1dd;
  --osd: #7dff9a;
  --yellow: #f4df57;
  --pink: #f5a2bc;
  --blue: #9ed9f2;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --pen: "Reenie Beanie", "Segoe Print", cursive;
  --zoom: 1;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background: var(--bg) url(/assets/textures/cork.jpg) 0 0 / 800px 600px repeat;      /* anchored top-left: the page grows without the cork sliding */
  font-family: var(--mono);
  overflow-x: hidden;
}
.top { position: relative; min-height: 100vh; display: grid; place-items: center; }

/* the board: the tile, a second copy at another scale to break the repeat, mottling, grain, vignette */
.board { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.board::before {
  content: ""; position: absolute; inset: 0;
  background: url(/assets/textures/cork.jpg) -418px -534px / 1130px 848px repeat;
  opacity: .5;
}
.board::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(110% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(60,30,0,.28) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.0035' numOctaves='4' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .35  0 0 0 0 .2  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>") 0 0 / 900px 900px repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") 0 0 / 240px 240px repeat;
  mix-blend-mode: soft-light;
}

/* a strip of masking tape with a marker-pen label: every section's heading */
.tape-title {
  grid-column: 1 / -1; justify-self: start;
  font: 400 clamp(1.25em, 2.6vh, 1.75em)/1 var(--marker); color: #2a2218;
  background: rgba(238,228,200,.94); padding: .35em .8em .3em;
  box-shadow: 0 0.0625em 0.125em rgba(0,0,0,.3);
  transform: rotate(-1.5deg);
  position: relative;
}
.tape-title::before, .tape-title::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0.5em; background: rgba(238,228,200,.6); }
.tape-title::before { left: -8px; clip-path: polygon(100% 0, 0 20%, 100% 45%, 0 70%, 100% 100%); }
.tape-title::after { right: -8px; clip-path: polygon(0 0, 100% 25%, 0 50%, 100% 75%, 0 100%); }

/* boot: the set stays dark until the pictures are in */
.boot { position: fixed; inset: 0; z-index: 200; background: #050a0c; display: grid; place-items: center; }
.boot i { display: block; width: .5em; height: .5em; border-radius: 50%; background: #9df3e3; box-shadow: 0 0 .6em #78f1dd, 0 0 2em rgba(120,241,221,.6);
  animation: bootdot 1.1s ease-in-out infinite alternate; }
@keyframes bootdot { from { transform: scale(.8); opacity: .55; } to { transform: scale(1.15); opacity: 1; } }
.boot.off i { animation: bootline .45s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes bootline { 40% { width: 70vw; height: 2px; border-radius: 1px; opacity: 1; } 100% { width: 70vw; height: 2px; opacity: 0; } }
.boot.off { animation: bootfade .35s .3s ease-out forwards; }
@keyframes bootfade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .boot i, .boot.off i { animation: none; } .boot.off { animation: bootfade .25s forwards; } }

@media (max-width: 640px) {
  /* the document scrolls, not the body, so the cork travels with what's pinned to it */
  .top { display: block; min-height: 0; padding-bottom: 84vw; }
}