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

html {
  overflow-x: hidden;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fcd004;
  color: #111111;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
}

.masthead {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 1.2rem 1rem 0;
  text-align: center;
}

h1 {
  font-size: clamp(2.4rem, 14vw, 4.4rem);
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tagline {
  margin-top: 0.55rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(0.9rem, 3.6vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.scene {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.gorilla {
  display: block;
  width: 100%;
  max-height: 42dvh;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.sitters {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 28%;
  height: 46%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  gap: 22px;
  padding-inline: 6px;
  z-index: 1;
}

.sitter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  height: 100%;
  cursor: pointer;
  transform: translateY(0);
  transform-origin: bottom center;
  transition: transform 220ms cubic-bezier(0.22, 1.4, 0.32, 1);
  -webkit-tap-highlight-color: transparent;
}

.frame {
  position: relative;
  display: block;
  max-width: 100%;
}

.sitter img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 5.1rem;
  border-radius: 12px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  user-select: none;
}

.ants {
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
}

.ants rect {
  fill: none;
  stroke: #1f5bff;
  stroke-width: 3;
  stroke-dasharray: 9 6;
  animation: ants 7.2s linear infinite;
}

@keyframes ants {
  to {
    stroke-dashoffset: -15;
  }
}

.sitter:nth-child(2) {
  z-index: 2;
}

.sitter:nth-child(2) img {
  max-height: 6rem;
}

.sitter:nth-child(3) img {
  max-height: 5.4rem;
}

.sitter:nth-child(4) img {
  max-height: 4.4rem;
}

.sitter:focus-visible {
  transform: translateY(-14px);
  outline: 3px solid #111111;
  outline-offset: 6px;
  border-radius: 12px;
}

.cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: min(100%, 28rem);
  margin: 0.15rem auto 0;
  padding: 0 1.25rem 0.2rem;
  color: #111111;
}

.arrow {
  width: 1.7rem;
  height: auto;
  display: block;
  animation: arrow-bounce 7s ease-in-out infinite;
}

@keyframes arrow-bounce {
  0%,
  91.5%,
  100% {
    transform: translateY(0);
  }
  94.5% {
    transform: translateY(-12px);
  }
  97.5% {
    transform: translateY(0);
  }
  98.75% {
    transform: translateY(-4px);
  }
}

.cue p {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  text-transform: lowercase;
}

.cue a {
  color: inherit;
  font-weight: 700;
  text-underline-offset: 2px;
}

.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  gap: 1.4rem;
  padding: 0.8rem 0 max(1.2rem, env(safe-area-inset-bottom));
  z-index: 2;
}

.social {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: #111111;
  transform: translateY(0);
  transition: transform 180ms cubic-bezier(0.22, 1.4, 0.32, 1);
}

.social svg {
  width: 100%;
  height: 100%;
  display: block;
}

.social:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 6px;
  border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .sitter:hover {
    transform: translateY(-18px);
    animation: bob 0.55s cubic-bezier(0.22, 1.4, 0.32, 1);
  }

  .social:hover,
  .social:focus-visible {
    transform: translateY(-6px);
  }
}

@keyframes bob {
  0% {
    transform: translateY(0);
  }
  55% {
    transform: translateY(-24px);
  }
  100% {
    transform: translateY(-18px);
  }
}

@media (min-width: 720px) {
  .masthead {
    padding: 2.2vh 4vw 0;
  }

  h1 {
    font-size: clamp(3.6rem, 12vw, 11rem);
    line-height: 0.82;
  }

  .tagline {
    margin-top: 0.7rem;
    font-size: clamp(1rem, 2vw, 1.45rem);
  }

  .stage {
    flex: 0 1 auto;
    justify-content: flex-start;
  }

  .scene {
    width: min(96vw, 1080px);
    margin-top: 1.6rem;
  }

  .gorilla {
    max-height: 62dvh;
  }

  .sitters {
    left: 18%;
    right: 18%;
    top: 26%;
    height: 40%;
  }

  .sitter img {
    max-height: 8.5rem;
  }

  .sitter:nth-child(2) img {
    max-height: 10rem;
  }

  .sitter:nth-child(3) img {
    max-height: 9rem;
  }

  .sitter:nth-child(4) img {
    max-height: 7rem;
  }

  .sitter:focus-visible {
    transform: translateY(-28px);
    outline-offset: 8px;
  }

  .cue {
    width: min(100%, 34rem);
    margin-top: 0.2rem;
    gap: 0.7rem;
  }

  .arrow {
    width: 2.1rem;
  }

  .cue p {
    font-size: 0.88rem;
  }

  .socials {
    gap: clamp(1.2rem, 3vw, 2.4rem);
    padding: 1.2rem 0 2.2rem;
    margin-top: auto;
  }

  .social {
    width: 2.6rem;
    height: 2.6rem;
  }
}

@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  .sitter:hover {
    transform: translateY(-28px);
  }

  @keyframes bob {
    0% {
      transform: translateY(0);
    }
    55% {
      transform: translateY(-34px);
    }
    100% {
      transform: translateY(-28px);
    }
  }
}