/* banmon: a webcam frame of the monkey's den. Every picture is a 1672x941 frame; overlays sit in % of it. */
@font-face { font-family: "Anton"; src: url("/fonts/anton-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/fonts/permanent-marker-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #2e2a27; --wall: #3a3633; --ink: #e8c832; --accent: #e8c832; --marker: #1f1408; --tape: #c9a777;
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Permanent Marker", "Comic Sans MS", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --frame: 1.7769; /* 1672 / 941 */
  --spring: cubic-bezier(.3, 1.55, .5, 1);
}
html, body { height: 100%; }
body { background: var(--bg); overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { all: unset; box-sizing: border-box; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- the frame: covers the screen like a webcam window ---------- */
.cam { position: fixed; inset: 0; overflow: hidden; background: var(--wall); }
.stage {
  --w: max(100vw, calc(100dvh * var(--frame)));
  position: absolute; width: var(--w); aspect-ratio: 1672 / 941;
  left: calc((100vw - var(--w)) * .38); top: calc((100dvh - var(--w) / var(--frame)) * .5);
  container-type: inline-size;
}
.plate { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the wall: handwriting under the wordmark that is painted on it */
.wall { position: absolute; left: 10.5%; top: 28.5%; width: 36%; color: var(--ink); text-shadow: 0 0 .25em rgba(232, 200, 50, .35); }
.wall p { margin: 0; line-height: 1.15; }
.wall-ticker { font: 2.3cqw/1 var(--font-body); transform: rotate(-2deg); transform-origin: left; filter: blur(.35px); }
.wall-line { font: 1.6cqw/1.1 var(--font-body); margin-top: .35em !important; filter: blur(.3px); }
.wall-risk { font: max(16px, .85cqw)/1.3 var(--font-body); color: rgba(232, 200, 50, .66); margin-top: .7em !important; max-width: 30em; text-shadow: none; }

/* arrows on masking tape: the way to the other corners of the den */
.go { position: absolute; display: block; z-index: 4; transition: transform .25s var(--spring); }
.go img { width: 100%; height: auto; filter: blur(.4px); }
.go:hover { transform: rotate(-3deg) scale(1.05); }
.go:active { transform: scale(.96); transition-duration: 35ms; }
.go-word { position: absolute; left: 0; right: 0; top: 100%; text-align: center; font: max(16px, 1.25cqw)/1 var(--font-body); color: var(--ink); text-transform: uppercase; }
.go-next { left: 88.6%; top: 43%; width: 10.3%; }

/* ---------- the monkey layer ---------- */
.monkey {
  position: absolute; inset: 0; container-type: inline-size;
  translate: 3% 9%; transform-origin: 30% 75%;
  transition: transform .6s var(--spring);
}
.mk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.mk-mad { opacity: 0; }
.monkey.is-mad .mk-mad { opacity: 1; }
.monkey.is-mad .mk-calm { opacity: 0; }
.face { position: absolute; left: 50%; top: 0; width: 38%; height: 62%; }
.banana { position: absolute; left: 1%; top: 33%; width: 66%; height: 60%; cursor: grab; border-radius: 40%; touch-action: none; }
.banana:active { cursor: grabbing; }

/* the contract, written on the peel in black marker */
.ca-ink {
  position: absolute; left: 33.5%; top: 72.5%; width: 27%; margin: 0; z-index: 2;
  transform: rotate(13.5deg); transform-origin: left top;
  font: 500 1.32cqw/1.3 var(--font-mono); color: var(--marker); text-align: center;
  text-shadow: 0 0 1px rgba(31, 20, 8, .6); pointer-events: auto;
}
.ca-ink code { font: inherit; }

/* produce stickers: the links */
.sticker { position: absolute; z-index: 3; display: grid; place-items: center; transition: transform .25s var(--spring); }
.sticker .st-paper { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(.3px); }
.st-face { position: relative; display: flex; align-items: center; gap: .3em; font: 2.1cqw/1 var(--font-display); color: var(--marker); text-transform: uppercase; letter-spacing: .02em; transform: rotate(var(--r, 0deg)); }
.st-face img { width: 1.15em; height: 1.15em; object-fit: contain; }
.st-small { font-size: .62em; }
.sticker:hover { transform: rotate(-5deg) scale(1.08); }
.sticker:active { transform: scale(.94); transition-duration: 35ms; }
.st-pump { left: 3.5%; top: 47%; width: 15%; aspect-ratio: 392 / 268; --r: -8deg; }
.st-pump .st-face { font-size: 2.7cqw; }
.st-copy { left: 61%; top: 80%; width: 9%; aspect-ratio: 392 / 272; --r: 14deg; }
.st-copy .st-face { font-size: 1.5cqw; }
.st-x { left: 74%; top: 72%; width: 9%; aspect-ratio: 396 / 264; --r: 6deg; }
.st-x .st-face { font-size: 2.2cqw; }
.st-chart { left: 84%; top: 78%; width: 10%; aspect-ratio: 388 / 236; --r: -4deg; }
.st-chart .st-face { font-size: 1.9cqw; flex-direction: column; gap: .1em; }
.is-off { opacity: 1; filter: saturate(.55); }

/* twitch, shake, hold */
@keyframes twitch {
  0% { transform: scale(1); } 12% { transform: scale(1.11) rotate(-1.2deg); }
  40% { transform: scale(.97) rotate(.6deg); } 62% { transform: scale(1.03); } 100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: scale(1.04) rotate(0); } 25% { transform: scale(1.05) rotate(-2.2deg) translateY(-.5%); }
  75% { transform: scale(1.05) rotate(2.4deg) translateY(.4%); }
}
.monkey.is-twitch { animation: twitch .8s ease-out; }
.monkey.is-mad { animation: shake .13s linear infinite; }
.monkey.is-hold { transform: scale(1.75) translate(-6%, -8%); transition: transform 1.2s cubic-bezier(.4, 0, .9, .6); animation: none; }
.monkey.is-calm { animation: none; }

.lunge { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: 6; transform: scale(1.05); }
.lunge.is-on { animation: lunge .55s ease-out; }
@keyframes lunge { 0% { opacity: 0; transform: scale(.8); } 12% { opacity: 1; transform: scale(1.12); } 70% { opacity: 1; transform: scale(1.18) rotate(1deg); } 100% { opacity: 0; transform: scale(1.3); } }

/* forwarded-a-hundred-times grain */
.noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .09; mix-blend-mode: overlay; pointer-events: none; z-index: 7; }

/* ---------- other corners: one picture each ---------- */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.wob { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.go-home { left: 3.6%; top: 4%; width: 14%; }
.go-home .go-word { top: 98%; }
.pg-stash .go-peels { left: 77%; top: 50%; width: 11%; z-index: 4; transform: rotate(4deg); }
.pg-stash .chew { clip-path: ellipse(14% 22% at 30% 52%); animation: chew 1.1s ease-in-out infinite; transform-origin: 30% 60%; }
@keyframes chew { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(.5%) scale(1.012, .99); } 70% { transform: translateY(-.3%) scale(.995, 1.01); } }
.pg-stash .bunch { clip-path: polygon(60% 22%, 96% 22%, 96% 45%, 60% 45%); animation: wob 3.4s ease-in-out infinite; transform-origin: 78% 45%; }
@keyframes wob { 0%, 100% { transform: skewX(0) scaleY(1); } 50% { transform: skewX(-1.2deg) scaleY(1.015); } }
.crate-ink {
  position: absolute; left: 58%; top: 56%; width: 28%; margin: 0; color: var(--marker);
  font: max(20px, 1.55cqw)/1.32 var(--font-body); transform: perspective(900px) rotateY(-6deg) rotate(-1.5deg);
  text-shadow: 0 0 1px rgba(31, 20, 8, .5); filter: blur(.25px);
}
.crate-ink p { margin: 0 0 .35em; }
.crate-ink .hand-title { font-size: 1.5em; line-height: 1; margin-bottom: .3em; }

.pg-peels .go-home { left: 12.4%; top: 7%; width: 16.5%; }
.pg-peels .held { clip-path: polygon(46% 6%, 59% 6%, 59% 68%, 46% 68%); animation: sway 2.6s ease-in-out infinite; transform-origin: 54% 62%; }
@keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.6deg); } 60% { transform: rotate(1.2deg); } }
.floor-tape { position: absolute; left: 5%; top: 72%; width: 31%; transform: rotate(-3deg); }
.floor-tape img { width: 100%; height: auto; }
.floor-tape p { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 1em; text-align: center; color: var(--marker); font: max(20px, 1.7cqw)/1.1 var(--font-body); }

/* ---------- 404 ---------- */
.lost-ink { position: absolute; left: 50%; top: 40%; width: 40%; translate: -50% 0; margin: 0; text-align: center; color: var(--ink); font: max(22px, 2.6cqw)/1.15 var(--font-body); }
.pg-404 .go-home { left: 43%; top: 62%; width: 14%; }

/* ---------- phones: the banana comes in from the edge ---------- */
@media (max-aspect-ratio: 4/5) {
  body { overflow: auto; }
  .cam { position: relative; inset: auto; min-height: 100dvh; display: flex; flex-direction: column; }
  .stage { position: relative; left: auto; top: auto; width: 100vw; aspect-ratio: auto; flex: 1; min-height: 100dvh; display: flex; flex-direction: column; }
  .plate { inset: 0 auto auto 0; width: 200vw; height: auto; max-width: none; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .wall { position: relative; left: auto; top: auto; width: auto; margin: 36vw 16px 0 14vw; padding-right: 24vw; }
  .wall-ticker { font-size: 8.4vw; }
  .wall-line { font-size: 6vw; }
  .wall-risk { font-size: 16px; max-width: none; }
  .go-next { left: auto; right: 3vw; top: 36vw; width: 21vw; }
  .go-word { font-size: 16px; }
  .monkey {
    position: relative; inset: auto; width: 190vw; aspect-ratio: 1672 / 941; flex: none; margin-top: auto;
    margin-left: -50vw; translate: 0 0; animation-name: none;
  }
  .monkey.is-twitch { animation: poke .9s ease-out; }
  @keyframes poke { 0% { transform: translateX(0); } 15% { transform: translateX(-9vw) scale(1.06); } 45% { transform: translateX(3vw) scale(.98); } 100% { transform: none; } }
  .ca-ink { left: 31%; top: 69%; width: 27%; font-size: max(16px, 2.15cqw); transform: rotate(10deg); }
  .st-pump { left: 30%; top: 37%; width: 17%; }
  .st-pump .st-face { font-size: 3.2cqw; }
  .st-copy { left: 58.5%; top: 88%; width: 10%; }
  .st-copy .st-face { font-size: max(16px, 2.1cqw); }
  .st-chart .st-small { display: none; }
  .st-x { left: 66.5%; top: 63%; width: 10.5%; }
  .st-x .st-face { font-size: 2.8cqw; }
  .st-chart { left: 67%; top: 79%; width: 11.5%; }
  .st-chart .st-face { font-size: 2.4cqw; }
  .lunge { position: fixed; inset: 0; width: 100vw; height: 100dvh; object-fit: cover; object-position: 35% 50%; }
  .noise { position: fixed; }

  /* the other corners keep their picture whole and wide, words below it on the same wall */
  .pg-stash .stage, .pg-peels .stage, .pg-404 .stage { min-height: 100dvh; }
  .pg-stash .stage, .pg-peels .stage, .pg-404 .stage { justify-content: center; }
  .frame { --shift: 8vw; position: relative; width: 170vw; margin-left: calc(-1 * var(--shift)); aspect-ratio: 1672 / 941; flex: none;
    -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
  .pg-stash .frame { --shift: 22vw; }
  .pg-peels .frame { --shift: 20vw; }
  .crate-ink, .floor-tape, .lost-ink { position: relative; left: auto; top: auto; width: auto; margin: 4vw 16px 32px; transform: none; translate: none; color: var(--ink); filter: none; text-shadow: none; }
  .crate-ink { font-size: 20px; }
  .floor-tape img { display: none; }
  .floor-tape p { position: static; display: block; color: var(--ink); padding: 0; font-size: 22px; }
  .pg-stash .go-home { left: calc(var(--shift) + 16px); top: 12%; width: 30vw; }
  .pg-stash .go-peels { left: calc(var(--shift) + 70vw - 16px); top: 12%; width: 30vw; transform: none; }
  .go-word { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .monkey, .lunge { animation: none !important; }
  .noise { display: none; }
}
.frame { position: absolute; inset: 0; container-type: inline-size; }
@media (max-aspect-ratio: 4/5) { .frame { position: relative; inset: auto; } }