Coin Flip Toggle

<!-- Coin Flip Toggle — click flips a coin between a sun and moon face -->
<button class="nuda-tt2-coinflip" type="button" aria-pressed="true" aria-label="Toggle theme by flipping a coin">
  <span class="nuda-tt2-coinflip__coin" aria-hidden="true">
    <span class="nuda-tt2-coinflip__face nuda-tt2-coinflip__face--sun">☀</span>
    <span class="nuda-tt2-coinflip__face nuda-tt2-coinflip__face--moon">☾</span>
  </span>
</button>

/* Coin Flip Toggle — toggle aria-pressed to replay the flip animation. */
(function () {
  var btn = document.querySelector('.nuda-tt2-coinflip');
  if (!btn) return;
  btn.addEventListener('click', function () {
    var pressed = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!pressed));
    document.documentElement.classList.toggle('dark', !pressed);
  });
})();

.nuda-tt2-coinflip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-perspective: 240px;
  perspective: 240px;
}

.nuda-tt2-coinflip:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
  border-radius: 50%;
}

.nuda-tt2-coinflip__coin {
  position: relative;
  width: 40px;
  height: 40px;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}

.nuda-tt2-coinflip[aria-pressed="true"] .nuda-tt2-coinflip__coin {
  animation: nuda-tt2-coinflip-spin .7s cubic-bezier(.4,0,.2,1) forwards;
}

.nuda-tt2-coinflip__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}

.nuda-tt2-coinflip__face--sun {
  background: radial-gradient(circle at 35% 35%,#fff8dc,#fbbf24);
  color: #7a4a00;
}

.nuda-tt2-coinflip__face--moon {
  background: radial-gradient(circle at 35% 35%,#1e1e28,#0a0a12);
  color: #e4ff54;
  transform: rotateY(180deg);
}

@keyframes nuda-tt2-coinflip-spin {
  0% {
    transform: rotateY(0);
  }
  60% {
    transform: rotateY(200deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-tt2-coinflip__coin {
    animation: none;
    transition: none;
  }
}