html,
body {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  overflow-x: hidden;
  background: #120b1f;
}

canvas#bg {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
}

#bliss {
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
  width: 100vw;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#title {
  position: fixed;
  top: 15%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 96vw;
  color: rgb(255 255 255 / 88%);
  font: 800 clamp(2rem, 10vw, 9rem) / 1 Arial, sans-serif;
  text-shadow: 0 3px 10px rgb(0 0 0 / 38%), 0 0 28px rgb(255 255 255 / 18%);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

#title span {
  display: block;
  will-change: transform, translate;
  animation: float-letter 7s ease-in-out infinite;
}

#title span:nth-child(1) { animation-delay: -1.2s; }
#title span:nth-child(2) { animation-delay: -2.7s; }
#title span:nth-child(3) { animation-delay: -0.6s; }
#title span:nth-child(4) { animation-delay: -3.1s; }
#title span:nth-child(5) { animation-delay: -1.8s; }
#title span:nth-child(6) { animation-delay: -0.3s; }
#title span:nth-child(7) { animation-delay: -2.2s; }
#title span:nth-child(8) { animation-delay: -3.5s; }
#title span:nth-child(9) { animation-delay: -0.9s; }
#title span:nth-child(10) { animation-delay: -2.9s; }

#title span:nth-child(3n + 1) { animation-duration: 6s; }
#title span:nth-child(3n + 2) { animation-duration: 7s; }
#title span:nth-child(3n) { animation-duration: 8s; }

@keyframes float-letter {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

#title span:nth-child(1),
#title span:nth-child(10) {
  transform: translateY(0.34em);
}

#title span:nth-child(2),
#title span:nth-child(9) {
  transform: translateY(0.3em);
}

#title span:nth-child(3),
#title span:nth-child(8) {
  transform: translateY(0.23em);
}

#title span:nth-child(4),
#title span:nth-child(7) {
  transform: translateY(0.14em);
}

#title span:nth-child(5),
#title span:nth-child(6) {
  transform: translateY(0.05em);
}

#horse {
  position: fixed;
  top: 62%;
  left: 50%;
  width: 30vw;
  max-height: 90vh;
  object-fit: contain;
  clip-path: polygon(
    83.6% 1.4%, 85.6% 5%, 89.4% 1.7%, 88.3% 8.1%, 96.1% 28.1%,
    93.3% 32.5%, 89.7% 32.8%, 88.1% 29.4%, 79.2% 25%, 73.1% 35.3%,
    72.8% 47.2%, 63.6% 67.5%, 60% 81.1%, 59.7% 89.7%, 64.2% 96.7%,
    57.5% 96.4%, 57.8% 92.2%, 55.3% 89.4%, 58.6% 59.4%, 52.2% 83.9%,
    51.9% 90%, 55.3% 97.5%, 50.3% 97.5%, 48.3% 95.8%, 51.4% 58.9%,
    40.3% 59.4%, 32.5% 56.1%, 30% 59.2%, 25% 75%, 26.7% 87.8%,
    32.2% 95%, 25% 94.2%, 25.8% 91.4%, 22.5% 89.2%, 19.4% 71.4%,
    18.6% 85%, 23.1% 95.3%, 19.4% 96.4%, 14.2% 93.1%, 13.1% 85.8%,
    11.7% 89.4%, 11.4% 85%, 9.2% 85.3%, 9.4% 82.2%, 8.1% 87.2%,
    8.9% 77.8%, 6.4% 57.5%, 7.2% 42.2%, 8.6% 35.3%, 11.1% 31.9%,
    25.3% 25.6%, 45.6% 28.9%, 51.7% 22.8%, 59.7% 18.6%, 65.8% 10.8%,
    75% 6.4%, 79.4% 6.4%
  );
  transform: translate(-50%, -50%);
  z-index: 3;
  cursor: pointer;
}

#tele-link {
  position: fixed;
  left: 8rem;
  bottom: 5rem;
  z-index: 4;
  width: 20vw;
  max-height: 30vh;
}

#tele {
  display: block;
  width: 100%;
  max-height: 30vh;
  object-fit: contain;
}

#tele-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

#noteblock {
  position: fixed;
  right: 17rem;
  bottom: 5rem;
  z-index: 4;
  width: 10vw;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

#noteblock img {
  display: block;
  width: 100%;
  height: auto;
}

#noteblock:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

#music-notes {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.music-note {
  position: fixed;
  width: auto;
  height: 32px;
  animation: note-pop 1.4s ease-out forwards;
}

@keyframes note-pop {
  from {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  to {
    opacity: 0;
    transform: translate(var(--note-drift), -130px) rotate(var(--note-rotation));
  }
}

#foxy-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

#foxy-overlay.is-visible {
  display: flex;
}

#foxy-image {
  display: block;
  width: 100vw;
  height: auto;
  flex: none;
}

@media (max-width: 700px) {
  #title {
    top: 14%;
    width: min(94vw, 480px);
    font-size: clamp(1.8rem, 11vw, 5rem);
  }

  #bliss {
    top: auto;
    bottom: 0;
    width: 160vw;
    transform: translate(-50%, 0);
  }

  #horse {
    top: auto;
    bottom: 10vh;
    width: min(68vw, 360px);
    transform: translateX(-50%);
  }

  #tele-link {
    left: 1rem;
    bottom: 1rem;
    width: min(26vw, 120px);
    max-height: none;
  }

  #noteblock {
    right: 1rem;
    bottom: 1rem;
    width: min(18vw, 88px);
  }
}

@media (max-width: 420px) {
  #title {
    top: 12%;
    width: 92vw;
    letter-spacing: -0.06em;
  }

  #bliss {
    width: 185vw;
  }

  #horse {
    bottom: 15vh;
    width: 82vw;
  }
}