/* The balloon headline: a party shop's first page, with the headline in foil letter balloons tied to little weights
   on the floor. The wall, the floor, the ribbons and the balloons are one canvas drawn by the script; the words
   around it are plain HTML. */
:root {
  --wall-top: #f7e9dc;      /* the wall high up */
  --wall-low: #f1d6c8;      /* the wall near the floor */
  --stripe: #ecd2c2;        /* the soft stripes of the wallpaper */
  --floor: #e3b9a4;         /* the floor */
  --floor-edge: #c9917c;    /* the line where the wall meets the floor */
  --foil-1: #ef5d7a;        /* the foil colours, one letter after the other */
  --foil-2: #f4a531;
  --foil-3: #2fb6a3;
  --foil-4: #7d6cf0;
  --foil-5: #3d8ff2;
  --box-1: #ffffff;         /* the little weights on the floor */
  --box-2: #ffd9e1;
  --box-3: #d7f0ea;
  --ink: #3a1d2b;           /* the words */
  --muted: #7a5562;         /* the smaller words */
  --pill: #3a1d2b;          /* the button */
  --pill-ink: #fff6ee;      /* the words on the button */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--wall-top);
  color: var(--ink);
  font-family: 'Fredoka Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 460px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--wall-top), var(--wall-low));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

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

.brand {
  position: absolute;
  top: clamp(18px, 3.4vh, 34px);
  left: clamp(20px, 3.4vw, 48px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.brand__mark {
  width: 20px;
  height: 29px;
  color: var(--foil-1);
}

.brand__name {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 620;
  font-stretch: 112%;
  letter-spacing: -0.01em;
}

.hint {
  position: absolute;
  top: clamp(22px, 3.8vh, 38px);
  right: clamp(20px, 3.4vw, 48px);
  z-index: 2;
  max-width: 30ch;
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 460;
  line-height: 1.4;
  text-align: right;
  color: var(--muted);
  pointer-events: none;
}

.copy {
  position: absolute;
  left: clamp(20px, 3.4vw, 48px);
  right: clamp(20px, 3.4vw, 48px);
  bottom: clamp(20px, 4vh, 40px);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}

.copy__line {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 450;
  line-height: 1.45;
  color: var(--ink);
}

/* the button: the words widen on the stretch axis of the typeface and the pill swells with a bounce */
.pill {
  position: relative;
  flex: none;
  margin: 0;
  padding: 15px 28px 16px;
  border: 0;
  background: none;
  color: var(--pill-ink);
  font: inherit;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 560;
  font-stretch: 100%;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.pill__bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--pill);
  transition: transform 0.55s cubic-bezier(0.34, 1.9, 0.5, 1);
}

.pill__text {
  position: relative;
  display: inline-block;
  font-stretch: inherit;
  transition: font-stretch 0.45s cubic-bezier(0.34, 1.7, 0.5, 1), letter-spacing 0.45s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.pill:focus-visible {
  outline: none;
}

.pill:focus-visible .pill__bg {
  box-shadow: 0 0 0 3px var(--wall-top), 0 0 0 6px var(--foil-1);
}

@media (hover: hover) {
  .pill:hover .pill__bg {
    transform: scale(1.07, 1.12);
  }

  .pill:hover .pill__text {
    font-stretch: 122%;
    letter-spacing: 0.01em;
  }

  .stage.is-over {
    cursor: pointer;
  }
}

.pill:active .pill__bg {
  transform: scale(0.94, 0.88);
  transition-duration: 0.12s;
}

@media (max-width: 719px) {
  .hint {
    top: 64px;
    left: 20px;
    right: 20px;
    max-width: none;
    text-align: left;
    font-size: 13px;
  }

  .copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .copy__line {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill__bg,
  .pill__text {
    transition: none;
  }

  .pill:hover .pill__bg,
  .pill:active .pill__bg {
    transform: none;
  }
}