/* Tokens: every colour, size and space on the page comes from here. */
:root {
  --ink: #1b1622; /* text and outlines */
  --page: #2fb3a8; /* the ground is Perry's own teal; ink on it is 6.9:1 */
  --bubble: #fffdf7;

  /* Lab, flat cartoon fills */
  --wall: #6d5a7a;
  --wall-dark: #574766;
  --night: #2a2333;
  --floor: #8c8794;
  --floor-dark: #6f6a78;
  --metal: #9aa3ad;
  --metal-dark: #6c7580;
  --warning: #e8b23a;
  --smoke: #d9d4de;

  --perry-teal: #2fb3a8;
  --perry-teal-dark: #1f8a81;
  --perry-orange: #f08a24;
  --fedora: #7a5232;
  --fedora-band: #3b2718;

  --doof-coat: #eef0f2;
  --doof-coat-shade: #c9ced4;
  --doof-skin: #e9c39b;
  --doof-hair: #5b4a3c;
  --doof-pants: #3f3a46;
  --doof-shoes: #24202a;

  /* Rounded faces where the device has one (SF Rounded on Apple), for a cartoon voice
     without loading a web font. */
  --font:
    ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Avenir Next', 'Segoe UI', system-ui,
    sans-serif;
  --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  --step-2: clamp(2.6rem, 1.8rem + 4vw, 5rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;

  --border: 5px;
  --stage-max: 1000px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.5;
}

main {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-2) var(--space-3);
}

.intro {
  margin-bottom: var(--space-3);
}

h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--step-2);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.intro p {
  max-width: 38ch;
  margin: 0;
  font-weight: 500;
}

.scene {
  margin: 0;
}

/* The bubble breaks out over the panel's top edge, as comic lettering does, and its
   tail lands on Perry, who sits at 55% across the drawing. */
.bubble {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin: 0 auto -1.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--bubble);
  border: var(--border) solid var(--ink);
  border-radius: 2.5rem;
}

.bubble p {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.bubble em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.15em;
}

.bubble::before,
.bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  clip-path: polygon(0 0, 100% 0, 25% 100%);
}

.bubble::before {
  left: calc(55% - 24px);
  width: 48px;
  height: 52px;
  margin-top: -1px;
  background: var(--ink);
}

.bubble::after {
  left: calc(55% - 16px);
  width: 31px;
  height: 36px;
  margin-top: calc(-1 * var(--border) - 1px);
  background: var(--bubble);
}

@media (min-width: 40rem) {
  /* Shift the whole bubble so its centre, and the tail, sit over Perry. */
  .bubble {
    left: 5%;
  }

  .bubble::before {
    left: calc(50% - 24px);
  }

  .bubble::after {
    left: calc(50% - 16px);
  }
}

.stage {
  border: var(--border) solid var(--ink);
  background: var(--wall);
}

.stage svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}

/* On a phone the drawing crops in from the sides a little (it is set to slice), so
   Perry and Doof get more of the width. */
@media (max-width: 40rem) {
  main {
    padding-inline: var(--space-2);
  }

  .stage svg {
    aspect-ratio: 4 / 3;
  }
}

.credit {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: 0 var(--space-2) var(--space-4);
  font-size: var(--step--1);
  font-weight: 500;
}

.credit p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

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

/* Drawing. Every shape is a flat fill with the same ink outline. */
.stage svg * {
  stroke-linejoin: round;
  stroke-linecap: round;
}

.wall {
  fill: var(--wall);
}
.wall-line {
  fill: none;
  stroke: var(--wall-dark);
  stroke-width: 6;
}
.pipe {
  fill: none;
  stroke: var(--wall-dark);
  stroke-width: 18;
}
.sky {
  fill: var(--night);
}
.city {
  fill: var(--ink);
}
.moon {
  fill: var(--smoke);
}
.frame {
  fill: none;
  stroke: var(--ink);
  stroke-width: 8;
}
.floor {
  fill: var(--floor);
}
.seam {
  fill: none;
  stroke: var(--floor-dark);
  stroke-width: 4;
}
.edge,
.line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
}
.line-thin {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
}
.shadow {
  fill: var(--floor-dark);
}

.metal,
.metal-dark,
.bulb,
.plate,
.coat,
.skin,
.hair,
.shoe,
.teal,
.orange,
.hat,
.band,
.eye,
.lid,
.star,
.smoke {
  stroke: var(--ink);
  stroke-width: 6;
}
.metal {
  fill: var(--metal);
}
.metal-dark {
  fill: var(--metal-dark);
}
.bulb,
.plate,
.star {
  fill: var(--warning);
}
.plate {
  stroke-width: 5;
}
.label {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 22px;
  font-weight: 800;
}
.smoke {
  fill: var(--smoke);
  stroke-width: 4;
}
.star {
  stroke-width: 3;
  scale: 1.5;
}

/* Thick limbs: a wide ink stroke under a narrower fill stroke on the same path. */
.limb-ink,
.leg-ink,
.finger-ink {
  fill: none;
  stroke: var(--ink);
}
.limb-ink {
  stroke-width: 46;
}
.leg-ink {
  stroke-width: 56;
}
.finger-ink {
  stroke-width: 16;
}
.limb-coat,
.limb-teal,
.leg,
.finger-skin,
.finger-teal {
  fill: none;
}
.limb-coat {
  stroke: var(--doof-coat);
  stroke-width: 34;
}
.limb-teal {
  stroke: var(--perry-teal);
  stroke-width: 34;
}
.leg {
  stroke: var(--doof-pants);
  stroke-width: 44;
}
.finger-skin {
  stroke: var(--doof-skin);
  stroke-width: 7;
}
.finger-teal {
  stroke: var(--perry-teal);
  stroke-width: 7;
}

.coat,
.coat-fill {
  fill: var(--doof-coat);
}
.coat-shade {
  fill: var(--doof-coat-shade);
}
.fold {
  fill: none;
  stroke: var(--doof-coat-shade);
  stroke-width: 5;
}
.outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
}
.skin {
  fill: var(--doof-skin);
}
.hair {
  fill: var(--doof-hair);
}
.shoe {
  fill: var(--doof-shoes);
}
.sole {
  fill: none;
  stroke: var(--ink);
  stroke-width: 10;
}

.teal {
  fill: var(--perry-teal);
}
.teal-dark,
.lid {
  fill: var(--perry-teal-dark);
}
.orange {
  fill: var(--perry-orange);
}
.hat {
  fill: var(--fedora);
}
.band {
  fill: var(--fedora-band);
}
.eye {
  fill: var(--bubble);
  stroke: none;
}
.pupil,
.mouth {
  fill: var(--ink);
}
.lid {
  stroke-width: 5;
}

/* Motion: slow and small, and none at all for anyone who prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .smoke {
    transform-box: fill-box;
    transform-origin: center;
    animation: drift 6s ease-out infinite;
  }
  .puff2 {
    animation-delay: -2s;
  }
  .puff3 {
    animation-delay: -4s;
  }

  /* Perry's finger keeps time with the words. */
  .wag {
    transform-origin: 74px -128px;
    animation: wag 1.2s ease-in-out infinite;
  }

  .tail {
    transform-origin: -50px -18px;
    animation: flick 4s ease-in-out infinite;
  }

  .kick {
    transform-origin: 382px 672px;
    animation: kick 5s ease-in-out infinite;
  }

  .star {
    animation: orbit 2.4s linear infinite;
  }
  .s2 {
    animation-delay: -0.8s;
  }
  .s3 {
    animation-delay: -1.6s;
  }
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate(-15px, -120px) scale(1.6);
    opacity: 0;
  }
}

@keyframes wag {
  0%,
  100% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(7deg);
  }
}

@keyframes flick {
  0%,
  80%,
  100% {
    transform: rotate(0);
  }
  86% {
    transform: rotate(14deg);
  }
  92% {
    transform: rotate(-4deg);
  }
}

@keyframes kick {
  0%,
  84%,
  100% {
    transform: rotate(0);
  }
  88% {
    transform: rotate(-16deg);
  }
  92% {
    transform: rotate(6deg);
  }
  96% {
    transform: rotate(-8deg);
  }
}

/* A flat ellipse, 60 by 18, walked in eight steps. */
@keyframes orbit {
  0%,
  100% {
    transform: translate(60px, 0);
  }
  12.5% {
    transform: translate(42px, 13px);
  }
  25% {
    transform: translate(0, 18px);
  }
  37.5% {
    transform: translate(-42px, 13px);
  }
  50% {
    transform: translate(-60px, 0);
  }
  62.5% {
    transform: translate(-42px, -13px);
  }
  75% {
    transform: translate(0, -18px);
  }
  87.5% {
    transform: translate(42px, -13px);
  }
}

/* Where the stars rest when nothing moves. */
.s1 {
  transform: translate(60px, 0);
}
.s2 {
  transform: translate(-36px, 12px);
}
.s3 {
  transform: translate(-30px, -14px);
}