Spinning Globe

<div class="nuda-globe-scene" aria-hidden="true">
  <div class="nuda-globe">
    <div class="nuda-globe__sphere">
      <!-- 8 meridian rings for true 3D wireframe -->
      <div class="nuda-globe__ring nuda-globe__ring--1"></div>
      <div class="nuda-globe__ring nuda-globe__ring--2"></div>
      <div class="nuda-globe__ring nuda-globe__ring--3"></div>
      <div class="nuda-globe__ring nuda-globe__ring--4"></div>
      <div class="nuda-globe__ring nuda-globe__ring--5"></div>
      <div class="nuda-globe__ring nuda-globe__ring--6"></div>
      <div class="nuda-globe__ring nuda-globe__ring--7"></div>
      <div class="nuda-globe__ring nuda-globe__ring--8"></div>
    </div>
    <!-- Axis line -->
    <div class="nuda-globe__axis"></div>
  </div>
</div>

/* Spinning Globe
   A true CSS 3D wireframe globe using preserve-3d and rotated rings.
   No canvas, no WebGL — just CSS transforms and perspective.
   Customize: --globe-color, --globe-size, --globe-speed */

.nuda-globe-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  perspective: 800px;
}

.nuda-globe {
  --globe-color: #e4ff54;
  --globe-size: 180px;
  --globe-speed: 10s;
  width: var(--globe-size);
  height: var(--globe-size);
  position: relative;
  transform-style: preserve-3d;
  animation: nuda-globe-spin var(--globe-speed) linear infinite;
}

.nuda-globe__sphere {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ── Meridian rings (true 3D circles rotated in Y) ── */
.nuda-globe__ring {
  position: absolute;
  inset: 5%;
  border: 1.2px solid rgba(228, 255, 84, 0.18);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.nuda-globe__ring--1 { transform: rotateY(0deg); }
.nuda-globe__ring--2 { transform: rotateY(22.5deg); }
.nuda-globe__ring--3 { transform: rotateY(45deg); }
.nuda-globe__ring--4 { transform: rotateY(67.5deg); }
.nuda-globe__ring--5 { transform: rotateY(90deg); }
.nuda-globe__ring--6 { transform: rotateY(112.5deg); }
.nuda-globe__ring--7 { transform: rotateY(135deg); }
.nuda-globe__ring--8 { transform: rotateY(157.5deg); }

/* ── Axis line ── */
.nuda-globe__axis {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 50%;
  width: 1.2px;
  background: rgba(228, 255, 84, 0.15);
  transform: translateX(-50%);
}

/* ── Equator ring (horizontal, rotated in X) ── */
.nuda-globe::before {
  content: '';
  position: absolute;
  inset: -2%;
  border: 1.2px solid rgba(228, 255, 84, 0.12);
  border-radius: 50%;
  transform: rotateX(90deg);
}

/* ── Tropic line ── */
.nuda-globe::after {
  content: '';
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(228, 255, 84, 0.1);
  border-radius: 50%;
  transform: rotateX(90deg);
}

/* ── Spin animation (tilted axis like Earth) ── */
@keyframes nuda-globe-spin {
  from { transform: rotateX(-20deg) rotateY(0deg); }
  to   { transform: rotateX(-20deg) rotateY(360deg); }
}

/* ── Hover: slow down for inspection ── */
.nuda-globe:hover {
  animation-duration: calc(var(--globe-speed) * 3);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-globe {
    animation: none;
    transform: rotateX(-20deg) rotateY(30deg);
  }
}