/* Shared loading spinner — a real silver-dollar coin flip (front/back
   photos in /img/coin-front.png, /img/coin-back.png), self-mounted by
   spinner.js (no markup to duplicate per page, just link this file +
   that script). z-index 60, above this site's other fixed-position
   layers (sidebar drawer 50, modal overlay 40) so it's always visible
   while a fetch is in flight, on any page that uses it. */
#site-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  width: 48px;
  height: 48px;
  perspective: 300px;
  pointer-events: none;
}

#site-spinner[hidden] {
  display: none;
}

.coin-spinner-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: coin-flip 1.1s linear infinite;
}

.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  backface-visibility: hidden;
}

.coin-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coin-face.back {
  transform: rotateY(180deg);
}

@keyframes coin-flip {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}