.native-app--trippy-orange {
  width: 100%;
  background: #000;
}

.native-app--trippy-orange .native-package-body {
  width: 100%;
}

.native-app--trippy-orange .trippy-orange-stage {
  --circle-size: clamp(30px, 3.2vw, 42px);
  --orbit-radius: clamp(260px, 34vw, 370px);
  position: relative;
  width: 100%;
  height: clamp(620px, 72vw, 860px);
  min-height: 620px;
  overflow: hidden;
  background: #000;
}

.native-app--trippy-orange .trippy-orange-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 100px;
}

.native-app--trippy-orange .trippy-orange-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--circle-size);
  height: var(--circle-size);
  margin-top: calc(var(--circle-size) / -2);
  margin-left: calc(var(--circle-size) / -2);
  border-radius: 50%;
  animation: trippy-orange-rotate 30s infinite linear;
  will-change: transform;
}

.native-app--trippy-orange:fullscreen,
.native-app--trippy-orange:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #000;
}

.native-app--trippy-orange:fullscreen .trippy-orange-stage,
.native-app--trippy-orange:-webkit-full-screen .trippy-orange-stage {
  --circle-size: clamp(32px, 4vmin, 48px);
  --orbit-radius: min(39vmin, 440px);
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
}

@keyframes trippy-orange-rotate {
  0% {
    transform: rotate(0deg) translate3d(var(--orbit-radius), 0, 20px) rotate(0deg);
  }

  100% {
    transform: rotate(-3000deg) translate3d(0, 0, -480px) rotate(3000deg);
  }
}

@media (max-width: 700px) {
  .native-app--trippy-orange .trippy-orange-stage {
    --circle-size: clamp(22px, 6vw, 30px);
    --orbit-radius: min(41vw, 260px);
    height: clamp(500px, 125vw, 650px);
    min-height: 500px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .native-app--trippy-orange .trippy-orange-circle {
    animation-duration: 90s;
  }
}