/* Drawn to Scale: stage, paper layers, lettering, loader and play button. */
:root {
  --kraft: #c9a26f;
  --cream: #f4ead4;
  --ink: #2a2622;
  --orange: #b9542a;
  --teal: #3f7773;
  --cork: #2b1f16;
  --hand: 'Caveat', 'Patrick Hand', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cork); }

#viewport {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #3b2a1d 0%, #1c140e 75%);
}

/* the 1920x1080 stage, letterboxed by app.js fitStage() */
#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden; background: var(--kraft); cursor: pointer;
}
#camera { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
#board, #fadeboard {
  position: absolute; left: -160px; top: -90px; width: 2240px; height: 1260px;
  background-color: var(--kraft); background-size: cover; background-position: center;
}
#layers { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 1; }
#fadeboard { z-index: 2; opacity: 0; pointer-events: none; }

.lyr { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; }
.lyr > img.art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; user-select: none; }
.lyr > img.art.missing { background: var(--cream); outline: 3px dashed var(--orange); }

/* hand lettering: Caveat 700, charcoal ink, word spans pop in on their narration times */
.phrase {
  font-family: var(--hand); font-weight: 700; color: var(--ink);
  line-height: 0.92; white-space: nowrap; text-align: center;
}
.phrase .pl { position: relative; }
.phrase .w { display: inline-block; transform-origin: 50% 80%; opacity: 0; }
.phrase .tagwrap {
  position: absolute; left: -0.28em; right: -0.28em; top: -0.02em; bottom: 0.02em;
  filter: drop-shadow(2px 3px 2.5px rgba(48, 30, 12, 0.34)); opacity: 0;
}
.phrase .tag { position: absolute; inset: 0; background: #f6eddb; }

svg.ink { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
svg.ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; }

/* print grain and vignette sit over everything */
#grain, #vignette { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
#grain { opacity: 0.42; background-size: 384px 384px; }
#vignette {
  background: radial-gradient(ellipse 78% 74% at 50% 47%, rgba(0, 0, 0, 0) 58%, rgba(74, 44, 18, 0.34) 100%);
}

/* loader: the site's pacing Jon on a small kraft track */
#loader {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity 0.4s ease;
}
#loader[hidden] { display: none; }
#loader.done { opacity: 0; }
#loader .track {
  position: relative; width: 340px; height: 118px; overflow: hidden;
  background: var(--kraft); border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 -6px 0 rgba(90, 60, 30, 0.25);
}
#loader .walker { position: absolute; bottom: 4px; height: 104px; animation: pace 3s ease-in-out infinite; }
#loader .caption { font-family: var(--hand); font-size: 30px; color: var(--cream); letter-spacing: 0.5px; }
@keyframes pace {
  0%   { left: 0%;   transform: translateX(0) scaleX(1); }
  45%  { left: 100%; transform: translateX(-100%) scaleX(1); }
  50%  { left: 100%; transform: translateX(-100%) scaleX(-1); }
  95%  { left: 0%;   transform: translateX(0) scaleX(-1); }
  100% { left: 0%;   transform: translateX(0) scaleX(1); }
}

/* the paper play button */
#play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg);
  border: 0; padding: 0; background: none; cursor: pointer;
  filter: drop-shadow(4px 6px 5px rgba(20, 10, 0, 0.45));
  transition: transform 0.18s ease, filter 0.18s ease;
}
#play[hidden] { display: none; }
#play:hover, #play:focus-visible { transform: translate(-50%, -52%) rotate(-1deg) scale(1.03); filter: drop-shadow(8px 12px 10px rgba(20, 10, 0, 0.4)); }
#play:focus-visible { outline: none; }
#play:focus-visible .card { outline: 3px dashed var(--teal); outline-offset: 6px; }
#play .card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 22px 46px 20px; background: var(--cream); color: var(--ink);
  clip-path: polygon(0% 3%, 8% 0%, 19% 2%, 31% 0%, 44% 2%, 58% 0%, 71% 2%, 84% 0%, 100% 2%, 98% 18%, 100% 36%, 98% 55%,
    100% 74%, 98% 90%, 100% 100%, 86% 98%, 72% 100%, 57% 98%, 42% 100%, 28% 98%, 14% 100%, 0% 98%, 2% 80%, 0% 60%, 2% 40%, 0% 20%);
}
#play .card::before {   /* a strip of masking tape */
  content: ''; position: absolute; top: -4px; left: 50%; width: 120px; height: 30px;
  transform: translateX(-50%) rotate(3deg); background: rgba(232, 214, 160, 0.82);
}
#play .tri { width: 64px; height: 64px; margin-top: 6px; }
#play .tri path { fill: var(--orange); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
#play .lbl { font-family: var(--hand); font-weight: 700; font-size: 54px; line-height: 1; }
#play .sub { font-family: 'Patrick Hand', var(--hand); font-size: 20px; opacity: 0.75; }

body.loading #stage { visibility: hidden; }   /* the loader sits on the dark cork until the board is ready */
body.render #loader, body.render #play { display: none !important; }
body.render #stage { cursor: default; }