Barometer Gauge

<!-- Barometer Gauge (ticked dial with a gently drifting needle + reading) -->
<div class="nuda-wa2-barometer">
  <div class="nuda-wa2-barometer__gauge" aria-hidden="true">
    <span class="nuda-wa2-barometer__needle"></span>
    <span class="nuda-wa2-barometer__hub"></span>
  </div>
  <div class="nuda-wa2-barometer__value">
    <strong>1013</strong>
    <span>hPa · Rising</span>
  </div>
</div>

.nuda-wa2-barometer {
  position: relative;
  width: 100%;
  max-width: 180px;
  height: 150px;
  border-radius: 14px;
  background: #111114;
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  box-sizing: border-box;
}

.nuda-wa2-barometer__gauge {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,255,255,.14) 0 2deg,transparent 2deg 30deg),radial-gradient(circle,#161616,#0d0d0f 70%);
  border: 1px solid rgba(255,255,255,.08);
}

.nuda-wa2-barometer__needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 30px;
  margin-left: -1px;
  background: linear-gradient(180deg,#e4ff54,#fafafa);
  transform-origin: 50% 0%;
  transform: rotate(-150deg);
  will-change: transform;
  animation: _nuda-wa2barometerNeedle 8s ease-in-out infinite;
}

.nuda-wa2-barometer__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fafafa;
  transform: translate(-50%,-50%);
}

.nuda-wa2-barometer__value {
  text-align: center;
  color: #fafafa;
  font: 600 12px/1.3 system-ui,sans-serif;
}

.nuda-wa2-barometer__value strong {
  display: block;
  font-size: 20px;
  color: #e4ff54;
}

.nuda-wa2-barometer__value span {
  display: block;
  font-size: 10px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .05em;
}

@keyframes _nuda-wa2barometerNeedle {
  0%,100% {
    transform: rotate(-158deg);
  }
  50% {
    transform: rotate(-142deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-wa2-barometer__needle {
    animation: none;
    transform: rotate(-150deg);
  }
}