@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/comic-neue-700.woff2') format('woff2');
}

:root {
  --ink: #141414;
  --pea: #aee61d;
  --paper: #f5f6f0;
  --k: 1;
  --g: max(16px, calc(28px * var(--k)));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #f2f3ed;
  color: var(--ink);
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  font-weight: 700;
}

body {
  -webkit-font-smoothing: antialiased;
}

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px;
  height: 864px;
  transform-origin: 0 0;
  z-index: 1;
}

#shake {
  position: relative;
  width: 1536px;
  height: 864px;
}

#plate {
  position: absolute;
  left: -512px;
  top: -160px;
  width: 2560px;
  height: 1024px;
  display: block;
  z-index: 1;
  -webkit-user-drag: none;
  user-select: none;
}

.rig {
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px;
  height: 864px;
  z-index: 2;
  will-change: transform;
}

#peajak-rig { transform-origin: 957px 374px; }
#man-rig { transform-origin: 500px 864px; }

#peajak-bob,
#man-breathe {
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px;
  height: 864px;
}

#peajak-bob { transform-origin: 957px 374px; will-change: transform; }
#man-breathe { transform-origin: 500px 864px; will-change: transform; }

.layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px;
  height: 864px;
  display: block;
  visibility: hidden;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.layer.on { visibility: visible; }

#peas {
  position: absolute;
  left: -512px;
  top: -160px;
  width: 2560px;
  height: 1024px;
  z-index: 3;
  pointer-events: none;
}

/* ---------- stage-anchored UI ---------- */

.ui { position: absolute; z-index: 4; }

#brand { left: 48px; top: 30px; pointer-events: none; }

#brand .name {
  font-size: 88px;
  line-height: .9;
  letter-spacing: 2px;
  color: var(--pea);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink);
  white-space: nowrap;
}

#brand .tick {
  display: inline-block;
  margin-top: 10px;
  font-size: 22px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 2px 14px;
}

.bubble {
  --bubble-fill: #fff;
  background: var(--bubble-fill);
  border: 3.5px solid var(--ink);
  border-radius: 46% 54% 50% 50% / 55% 50% 50% 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bubble .tail {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.bubble .tail .tf { fill: var(--bubble-fill); }
.bubble .tail .tl {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

#cta {
  left: 58px;
  top: 200px;
  width: 470px;
  height: 120px;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 6px 6px 0 var(--ink);
  white-space: nowrap;
}

#cta .tail { left: 300px; top: 112px; }
#cta[aria-busy="true"] { cursor: progress; }

#pline {
  left: 1252px;
  top: 118px;
  width: 262px;
  height: 178px;
  font-size: 36px;
  line-height: 1.05;
  transform-origin: 8% 78%;
}

#pline .tail { left: -46px; top: 96px; }

#what {
  left: 120px;
  top: 372px;
  width: 230px;
  height: 92px;
  font-size: 36px;
  transform-origin: 92% 96%;
}

#what .tail { left: 150px; top: 80px; }

#pay {
  left: 1252px;
  top: 118px;
  width: 262px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#pay .say {
  position: relative;
  height: 110px;
  font-size: 30px;
  line-height: 1.02;
  transform-origin: 0 55%;
}

#pay .say .tail { left: -46px; top: 50px; }

.pill {
  display: inline-block;
  font: inherit;
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}

#pay .buy {
  display: block;
  background: var(--pea);
  font-size: 24px;
  text-align: center;
}

#pay .ca {
  display: block;
  width: 100%;
  font-size: 22px;
  text-align: center;
}

#copy-status {
  min-height: 22px;
  font-size: 16px;
  text-align: center;
}

[aria-disabled="true"] { cursor: default; }


/* ---------- viewport-anchored UI ---------- */

#hdr {
  position: fixed;
  right: var(--g);
  top: var(--g);
  z-index: 20;
  display: flex;
  gap: calc(12px * var(--k));
}

#hdr .pill {
  font-size: calc(20px * var(--k));
  padding: calc(10px * var(--k)) calc(18px * var(--k));
}

#count {
  position: fixed;
  left: var(--g);
  bottom: var(--g);
  z-index: 20;
  font-size: calc(22px * var(--k));
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: calc(6px * var(--k)) calc(14px * var(--k));
  transform-origin: left bottom;
}

#count b { font-weight: 700; }

#mute {
  position: fixed;
  right: var(--g);
  bottom: var(--g);
  z-index: 20;
  font-size: calc(20px * var(--k));
  padding: calc(10px * var(--k)) calc(18px * var(--k));
}

/* ---------- states & motion ---------- */

.off { display: none !important; }
.hide { display: none !important; }

body[data-state="ready"] #peajak-bob,
body[data-state="stuffed"] #peajak-bob {
  animation: bob 3.2s ease-in-out infinite;
}

body[data-state="ready"] #man-breathe,
body[data-state="stuffed"] #man-breathe {
  animation: breathe 4s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.006); }
}

body[data-state="ready"] #cta:hover,
body[data-state="stuffed"] #cta:hover {
  --bubble-fill: var(--pea);
  background: var(--pea);
  animation: hoverwig .3s ease-in-out;
}

@keyframes hoverwig {
  0%, 100% { rotate: 0deg; }
  30% { rotate: -1deg; }
  70% { rotate: 1deg; }
}

#cta.attn { animation: attn .3s ease-in-out; }

@keyframes attn {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -1deg; }
  75% { rotate: 1deg; }
}

#peajak-rig.jitter {
  animation: jit .12s steps(2, end) infinite;
}

@keyframes jit {
  0% { translate: 0 0; }
  25% { translate: 2px -2px; }
  50% { translate: -2px 1px; }
  75% { translate: 1px 2px; }
  100% { translate: -1px -1px; }
}

a:focus-visible,
button:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 5px;
  box-shadow: 0 0 0 3px var(--pea);
}

/* #cta owns a hard drop shadow, so the lime ring needs id specificity. */
#cta:focus-visible {
  box-shadow: 0 0 0 3px var(--pea);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.still #peajak-bob,
body.still #man-breathe { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  body[data-state="ready"] #peajak-bob,
  body[data-state="stuffed"] #peajak-bob,
  body[data-state="ready"] #man-breathe,
  body[data-state="stuffed"] #man-breathe,
  #cta.attn,
  body[data-state="ready"] #cta:hover,
  body[data-state="stuffed"] #cta:hover,
  #peajak-rig.jitter {
    animation: none !important;
  }
}