.orb-hero {
  --orb-tilt-x: 0deg;
  --orb-tilt-y: 0deg;
  background: transparent;
  color: var(--ink);
  isolation: isolate;
  min-height: 580px;
  overflow: visible;
  padding: 0;
  position: relative;
}

.orb-hero::before,
.orb-hero::after {
  display: none;
}

.orb-hero__stage {
  height: 100%;
  left: 50%;
  min-height: 510px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
}

.orb-hero__object {
  height: min(31vw, 430px);
  left: 50%;
  min-height: 350px;
  min-width: 350px;
  position: absolute;
  top: 46%;
  transform: translate(-50%, -50%) perspective(900px) rotateX(var(--orb-tilt-x)) rotateY(var(--orb-tilt-y));
  transform-style: preserve-3d;
  width: min(31vw, 430px);
}

.orb-hero__sphere {
  border-radius: 50%;
  height: 70%;
  left: 15%;
  overflow: hidden;
  position: absolute;
  top: 15%;
  transform: translateZ(12px);
  width: 70%;
  z-index: 2;
}

.orb-hero__canvas {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.orb-hero__shell {
  background: radial-gradient(circle at 32% 27%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.08) 28%, rgba(13, 14, 18, 0.035) 68%, rgba(13, 14, 18, 0.11) 100%);
  border: 1px solid rgba(13, 14, 18, 0.17);
  border-radius: 50%;
  box-shadow: inset -18px -22px 34px rgba(13, 14, 18, 0.055), inset 13px 10px 24px rgba(255, 255, 255, 0.82);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.orb-hero__shell::after {
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  content: "";
  inset: 6%;
  opacity: 0.56;
  position: absolute;
}

.orb-hero__chevrons {
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  transform: translateZ(34px);
  width: 100%;
  z-index: 4;
}

.orb-hero__chevron {
  transform-box: fill-box;
  transform-origin: center;
}

.orb-hero__chevron--one {
  animation: chevron-one-float 6s ease-in-out infinite;
  fill: var(--ink);
  filter: drop-shadow(3px 5px 0 rgba(0, 255, 0, 0.28));
}

.orb-hero__chevron--two {
  animation: chevron-two-float 6s ease-in-out -3s infinite;
  fill: var(--ink);
  filter: drop-shadow(-3px -4px 0 rgba(0, 255, 0, 0.34));
}

@keyframes chevron-one-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(3px, -5px, 16px) rotate(2deg); }
}

@keyframes chevron-two-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-3px, 5px, 16px) rotate(-2deg); }
}

@media (max-width: 1000px) {
  .orb-hero {
    min-height: 650px;
  }

  .orb-hero__stage {
    width: min(100%, 760px);
  }

  .orb-hero__object {
    height: min(66vw, 480px);
    width: min(66vw, 480px);
  }
}

@media (max-width: 720px) {
  .orb-hero {
    min-height: 510px;
    overflow: hidden;
  }

  .orb-hero__stage {
    height: 100%;
    min-height: 450px;
    width: 100%;
  }

  .orb-hero__object {
    /* Leave room for the floating corners and their perspective movement. */
    height: auto;
    aspect-ratio: 1;
    min-height: 0;
    min-width: 0;
    top: 50%;
    width: 82%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb-hero__chevron {
    animation: none;
  }
}