.fv-orbit {
  background:
    radial-gradient(circle at 72% 46%, rgba(138, 92, 255, 0.17), transparent 26%),
    radial-gradient(circle at 72% 46%, rgba(46, 231, 255, 0.12), transparent 42%),
    var(--color-night);
}

.fv-orbit::before {
  position: absolute;
  z-index: var(--z-base);
  inset: 0;
  background-image:
    linear-gradient(rgba(155, 168, 199, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 168, 199, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 72% 46%, #000, transparent 60%);
  content: "";
}

.fv-orbit__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(72vh, 740px);
  perspective: 1100px;
}

.fv-orbit__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(43vw, 620px);
  aspect-ratio: 1;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 160ms ease-out;
}

.fv-orbit__stage.is-tilting {
  will-change: transform;
}

.fv-orbit__media {
  position: absolute;
  z-index: var(--z-decoration);
  inset: 17%;
  overflow: hidden;
  border: 1px solid rgba(46, 231, 255, 0.42);
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
  transform: translateZ(-70px) rotate(-5deg);
}

.fv-orbit__media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(6, 11, 26, 0.2), rgba(6, 11, 26, 0.84)),
    linear-gradient(90deg, rgba(57, 123, 255, 0.12), rgba(138, 92, 255, 0.16));
  content: "";
}

.fv-orbit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.fv-orbit__ring {
  position: absolute;
  z-index: var(--z-content);
  border: 1px solid rgba(155, 168, 199, 0.25);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: fv-orbit-spin 18s linear infinite;
}

.fv-orbit__ring--one {
  inset: 4%;
  border-color: rgba(46, 231, 255, 0.34);
  transform: rotateX(64deg);
}

.fv-orbit__ring--two {
  inset: 15%;
  border-style: dashed;
  border-color: rgba(138, 92, 255, 0.38);
  animation-direction: reverse;
  animation-duration: 14s;
  transform: rotateY(68deg) rotateZ(20deg);
}

.fv-orbit__ring--three {
  inset: 27%;
  animation-duration: 10s;
  transform: rotateX(74deg) rotateY(18deg);
}

.fv-orbit__ring::before,
.fv-orbit__ring::after {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-cyan);
  content: "";
}

.fv-orbit__ring::before {
  left: -5px;
}

.fv-orbit__ring::after {
  right: -5px;
  background: var(--color-violet);
}

@keyframes fv-orbit-spin {
  to {
    rotate: 1turn;
  }
}

.fv-orbit__cube {
  position: relative;
  z-index: var(--z-content);
  width: clamp(118px, 12vw, 176px);
  aspect-ratio: 1;
  transform: rotateX(-18deg) rotateY(28deg);
  transform-style: preserve-3d;
  animation: fv-cube-spin 17s linear infinite;
}

@keyframes fv-cube-spin {
  to {
    transform: rotateX(342deg) rotateY(388deg);
  }
}

.fv-orbit__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(46, 231, 255, 0.5);
  background:
    linear-gradient(135deg, rgba(57, 123, 255, 0.38), rgba(8, 17, 39, 0.88)),
    rgba(6, 11, 26, 0.8);
  color: var(--color-white);
  font: 900 12px/1.5 var(--font-mono);
  text-align: center;
  backface-visibility: visible;
}

.fv-orbit__face:nth-child(1) {
  transform: translateZ(calc(clamp(118px, 12vw, 176px) / 2));
}

.fv-orbit__face:nth-child(2) {
  transform: rotateY(90deg) translateZ(calc(clamp(118px, 12vw, 176px) / 2));
}

.fv-orbit__face:nth-child(3) {
  transform: rotateY(180deg) translateZ(calc(clamp(118px, 12vw, 176px) / 2));
}

.fv-orbit__face:nth-child(4) {
  transform: rotateY(-90deg) translateZ(calc(clamp(118px, 12vw, 176px) / 2));
}

.fv-orbit__face:nth-child(5) {
  transform: rotateX(90deg) translateZ(calc(clamp(118px, 12vw, 176px) / 2));
}

.fv-orbit__face:nth-child(6) {
  transform: rotateX(-90deg) translateZ(calc(clamp(118px, 12vw, 176px) / 2));
}

.fv-orbit__token {
  position: absolute;
  z-index: var(--z-content);
  padding: 8px 10px;
  border: 1px solid rgba(155, 168, 199, 0.28);
  background: rgba(6, 11, 26, 0.86);
  color: rgba(244, 247, 255, 0.7);
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  animation: fv-token-float 4.8s ease-in-out infinite alternate;
}

.fv-orbit__token--a {
  top: 13%;
  left: 5%;
}

.fv-orbit__token--b {
  top: 30%;
  right: 0;
  animation-delay: -1.2s;
}

.fv-orbit__token--c {
  right: 13%;
  bottom: 13%;
  animation-delay: -2.6s;
}

.fv-orbit__token--d {
  bottom: 22%;
  left: 0;
  animation-delay: -3.4s;
}

@keyframes fv-token-float {
  to {
    transform: translate3d(0, -14px, 26px);
  }
}

.fv-orbit__status {
  position: absolute;
  z-index: var(--z-content);
  right: 0;
  bottom: 2%;
  left: 0;
  color: rgba(244, 247, 255, 0.42);
  font: 700 9px/1.6 var(--font-mono);
  text-align: center;
  text-transform: uppercase;
}

.fv-orbit__status b {
  color: var(--color-cyan);
}

.is-motion-paused .fv-orbit__ring,
.is-motion-paused .fv-orbit__cube,
.is-motion-paused .fv-orbit__token {
  animation-play-state: paused;
}

@media (max-width: 960px) {
  .fv-orbit__visual {
    position: absolute;
    z-index: var(--z-decoration);
    top: 70px;
    right: 0;
    left: 0;
    min-height: 340px;
    opacity: 0.74;
  }

  .fv-orbit__stage {
    width: min(88vw, 420px);
  }

  .fv-orbit__token {
    display: none;
  }
}

@media (max-width: 600px) {
  .fv-orbit__visual {
    min-height: 300px;
  }

  .fv-orbit__stage {
    width: min(92vw, 350px);
  }

  .fv-orbit__media {
    inset: 19%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-orbit__stage,
  .fv-orbit__ring,
  .fv-orbit__cube,
  .fv-orbit__token {
    animation: none;
    transition: none;
  }
}