/* mU Greens — rotating sprout ring (footer logo only)
   Two copies of the SAME logo image are stacked. The top copy is masked to the
   sprout ring (76%-92% of the radius) and rotates; nothing is redrawn or extracted.
   Paused at 0deg it is pixel-identical to the static logo.
   Brand rule: this is the single permitted exception to "the roundel is used whole".
   Footer only. Never the header. */
.mu-logo-ring {
  --ring-size: 120px;
  --ring-speed: 120s;
  --ring-direction: normal;
  position: relative;
  display: inline-block;
  inline-size: var(--ring-size);
  block-size: var(--ring-size);
  flex: none;
  line-height: 0;
  border-radius: 50%;
}
.mu-logo-ring img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.mu-logo-ring__ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 75.5%, #000 76.5%, #000 92.5%, transparent 93.5%);
          mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 75.5%, #000 76.5%, #000 92.5%, transparent 93.5%);
  transform-origin: 50% 50%;
  animation: mu-logo-ring-spin var(--ring-speed) linear infinite var(--ring-direction);
  will-change: transform;
}
.mu-logo-ring.is-paused .mu-logo-ring__ring { animation-play-state: paused; }
@keyframes mu-logo-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mu-logo-ring__ring { animation: none; }
}
@media print { .mu-logo-ring__ring { display: none; } }