:root {
  color-scheme: dark;
  --youtube: #ff0033;
  --youtube-hover: #cc0029;
  --twitch: #9146ff;
  --twitch-hover: #772ce8;
  --focus: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: #000000;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  position: relative;
  width: min(100vw, calc(100vh * 1363 / 1154));
  aspect-ratio: 1363 / 1154;
  overflow: hidden;
}

h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.hand-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.morpheus {
  animation: breathe 11.2s ease-in-out infinite;
  transform-origin: 50% 42%;
}

.left-hand {
  animation: drift-left 9.6s ease-in-out infinite;
  transform-origin: 22% 78%;
}

.right-hand {
  animation: drift-right 10.4s ease-in-out infinite;
  transform-origin: 83% 78%;
}

.channel-link {
  position: absolute;
  display: block;
  z-index: 2;
  width: clamp(84px, 12vw, 142px);
  min-height: clamp(92px, 13vw, 154px);
  color: #ffffff;
  font-size: clamp(11px, 1.25vw, 17px);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  overflow-wrap: anywhere;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.channel-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: inherit;
  align-items: start;
  justify-items: center;
  gap: clamp(5px, 0.65vw, 9px);
  padding: clamp(7px, 1vw, 12px);
  border: 2px solid rgb(255 255 255 / 72%);
  border-radius: clamp(18px, 2.6vw, 28px);
  box-shadow: 0 10px 24px rgb(0 0 0 / 45%);
  overflow: hidden;
  transform-origin: center;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.channel-card::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  background-repeat: repeat;
  background-position: center;
  transform: rotate(-18deg);
  transform-origin: center;
  pointer-events: none;
}

.channel-card > * {
  position: relative;
  z-index: 1;
}

.channel-meta {
  display: block;
  width: 100%;
  padding: 0 clamp(2px, 0.35vw, 5px);
  text-align: center;
}

.username {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(13px, 1.55vw, 21px);
  text-shadow:
    0 1px 2px rgb(0 0 0 / 70%),
    0 0 8px rgb(0 0 0 / 48%);
}

.channel-logo,
.channel-initial {
  width: clamp(58px, 8vw, 96px);
  height: clamp(58px, 8vw, 96px);
  border: 2px solid rgb(255 255 255 / 70%);
  border-radius: 50%;
  background: rgb(0 0 0 / 20%);
  object-fit: cover;
  justify-self: center;
  box-shadow:
    0 0 0 2px rgb(0 0 0 / 24%),
    0 6px 18px rgb(0 0 0 / 38%),
    0 0 16px rgb(255 255 255 / 20%);
}

.channel-initial {
  display: grid;
  place-items: center;
  font-size: clamp(24px, 3.6vw, 44px);
  font-weight: 800;
}

.youtube {
  left: 24%;
  top: 73%;
}

.twitch {
  left: 76%;
  top: 73%;
}

.youtube .channel-card {
  background-color: var(--youtube);
}

.twitch .channel-card {
  background-color: var(--twitch);
}

.youtube .channel-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath fill='white' fill-opacity='.38' d='M27.3 13.4a3.4 3.4 0 0 0-2.4-2.4c-2-.5-7.9-.5-7.9-.5s-5.9 0-7.9.5a3.4 3.4 0 0 0-2.4 2.4A18 18 0 0 0 6.2 17a18 18 0 0 0 .5 3.6A3.4 3.4 0 0 0 9.1 23c2 .5 7.9.5 7.9.5s5.9 0 7.9-.5a3.4 3.4 0 0 0 2.4-2.4 18 18 0 0 0 .5-3.6 18 18 0 0 0-.5-3.6ZM15 20.3v-6.6l5.7 3.3-5.7 3.3Z'/%3E%3C/svg%3E");
  background-size: clamp(22px, 3.2vw, 36px) clamp(22px, 3.2vw, 36px);
}

.twitch .channel-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath fill='white' fill-opacity='.16' d='M12 9h22v15.1l-6.3 6.3H23l-3 2.9h-3v-2.9h-5V9Zm3 3v15.4h5v2.9l2.9-2.9h4.8l3.3-3.3V12H15Zm7.4 4.2h2.8v7.5h-2.8v-7.5Zm5.4 0h2.8v7.5h-2.8v-7.5Z'/%3E%3C/svg%3E");
  background-size: clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px);
}

.youtube:hover .channel-card,
.youtube:focus-visible .channel-card {
  background-color: var(--youtube-hover);
}

.twitch:hover .channel-card,
.twitch:focus-visible .channel-card {
  background-color: var(--twitch-hover);
}

.channel-link:hover .channel-card,
.channel-link:focus-visible .channel-card {
  transform: scale(1.06);
}

.channel-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@keyframes breathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -1.1%, 0) scale(1.025);
  }
}

@keyframes drift-left {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(-0.8%, 0.7%, 0) rotate(-1.4deg);
  }
}

@keyframes drift-right {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(0.8%, 0.6%, 0) rotate(1.2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .morpheus,
  .left-hand,
  .right-hand {
    animation: none;
  }
}