.infinite-menu-component,
.infinite-menu-canvas {
  width: 100%;
  height: 100%;
}

.infinite-menu-component {
  position: relative;
  overflow: hidden;
}

.infinite-menu-canvas {
  position: absolute;
  inset: 0;
  display: block;
  cursor: grab;
  outline: none;
  touch-action: none;
}

.infinite-menu-canvas:active { cursor: grabbing; }
.infinite-menu-canvas:focus-visible { box-shadow: inset 0 0 0 2px #ff8a3d; }

.infinite-menu-copy,
.infinite-menu-description,
.infinite-menu-action {
  transition: opacity .16s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.infinite-menu-copy {
  position: absolute;
  top: 50%;
  left: 6%;
  z-index: 2;
  pointer-events: none;
  transform: translateY(-50%);
}

.infinite-menu-copy > span {
  color: #ffd84d;
  font: 500 10px 'DM Mono', monospace;
  letter-spacing: .1em;
}

.infinite-menu-copy h3 {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .9;
  letter-spacing: 0;
}

.infinite-menu-description {
  position: absolute;
  top: 50%;
  right: 6%;
  z-index: 2;
  width: 150px;
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.65;
  pointer-events: none;
  transform: translateY(-50%);
}

.infinite-menu-action {
  position: absolute;
  bottom: 38px;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 5px solid #000;
  border-radius: 50%;
  background: #ff8a3d;
  color: #fff;
  font-size: 27px;
  text-decoration: none;
  transform: translateX(-50%);
}

.infinite-menu-action:hover,
.infinite-menu-action:focus-visible {
  background: #ff70e8;
  transform: translateX(-50%) scale(1.08);
}

.infinite-menu-action.is-moving {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 80px) scale(.75);
}

.infinite-menu-copy.is-moving,
.infinite-menu-description.is-moving { opacity: 0; }
.infinite-menu-copy.is-moving { transform: translate(12px, -50%); }
.infinite-menu-description.is-moving { transform: translate(-12px, -50%); }

.infinite-menu-hint {
  position: absolute;
  right: 28px;
  bottom: 20px;
  color: rgba(255,255,255,.36);
  font: 10px 'DM Mono', monospace;
  letter-spacing: .1em;
}

.infinite-menu-empty {
  display: grid;
  height: 100%;
  margin: 0;
  place-items: center;
  color: rgba(255,255,255,.62);
}

@media (max-width: 760px) {
  .infinite-menu-copy { top: 28px; left: 24px; transform: none; }
  .infinite-menu-copy h3 { margin-top: 7px; font-size: 36px; }
  .infinite-menu-description { top: auto; right: 24px; bottom: 28px; width: 122px; transform: none; font-size: 11px; }
  .infinite-menu-action { bottom: 22px; width: 54px; height: 54px; font-size: 23px; }
  .infinite-menu-hint { top: 28px; right: 24px; bottom: auto; }
  .infinite-menu-copy.is-moving { transform: translateY(-8px); }
  .infinite-menu-description.is-moving { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .infinite-menu-copy,
  .infinite-menu-description,
  .infinite-menu-action { transition: none; }
}