@property --content {
  syntax: "<string>";
  inherits: true;
  initial-value: "";
}

@property --x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

#snot {
  height: 150vh;
  view-timeline: --snot;
}

#snot-c, #snot-j {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;

  &::before {
    content: var(--content);
  }

  translate: var(--x) var(--y);
  animation-fill-mode: forwards;
  animation-timeline: --snot;
}

#snot-c {
  font-size: 40vh;

  animation-name: snot-c-emoji, snot-c-x, snot-c-y, snot-c-rotate;
  animation-timing-function: step-end, ease-in, ease-out, ease;
}

#snot-j {
  font-size: 30vh;

  animation-name: snot-j-emoji, snot-j-x, snot-j-y, snot-j-rotate;
  animation-timing-function: step-end, ease-in, ease-out, ease;
}

@keyframes snot-c-emoji {
  0% { --content: "😪"; }
  37% { --content: "🤧"; scale: -1 1; }  /* horizontal flip */
  50% { --content: "😖"; }
  65% { --content: "😳"; }
  100% { --content: "😳"; }
}

@keyframes snot-j-emoji {
  0% { --content: "👄"; }
  35% { --content: "🫦"; }
  100% { --content: "🫦"; }
}

@keyframes snot-c-x {
  0% { --x: -20vh; }
  20% { --x: -10vh; }
  60% { --x: -10vh; }
  100% { --x: -150vh; }
}

@keyframes snot-c-y {
  0% { --y: 100vh; }
  20% { --y: 40vh; }
  60% { --y: 40vh; }
  100% { --y: -100vh; }
}

@keyframes snot-c-rotate {
  0% { rotate: 5deg; }
  35% { rotate: -5deg; }
  36% { rotate: 2deg; }
  45% { rotate: 4deg; }
  50% { rotate: -5deg; }
  54% { rotate: 5deg; }
  58% { rotate: -5deg; }
  62% { rotate: 5deg; }
  66% { rotate: -5deg; }
  72% { rotate: 5deg; }
  80% { rotate: -5deg; }
  100% { rotate: 5deg; }
}

@keyframes snot-j-x {
  0% { --x: calc(50vw + 30vh); }
  10% { --x: 40vw; }
  15% { --x: 25vw; }
  20% { --x: 0vh; }
  30% { --x: 3vh; }
  60% { --x: 8vh; }
  100% { --x: -100vw; }
}

@keyframes snot-j-y {
  0% { --y: 0vh; }
  10% { --y: 40vh; }
  15% { --y: 65vh; }
  20% { --y: 52vh; }
  60% { --y: 54vh; }
  100% { --y: -20vh; }
}

@keyframes snot-j-rotate {
  0% { rotate: 5deg; }
  10% { rotate: -5deg; }
  15% { rotate: 5deg; }
  20% { rotate: 10deg; }
  30% { rotate: 2deg; }
  40% { rotate: 8deg; }
  60% { rotate: 15deg; }
  100% { rotate: -20deg; }
}