/* Rings background — shared across pages */

.rings-wrap {
  position: fixed;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  width: 200vw;
  aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
  .rings-wrap { width: 100vw; }
}

/* Right-edge variant: center sits at right-center of viewport on desktop.
   Mobile stays bottom-center (no override). */
@media (min-width: 768px) {
  .rings-wrap--side {
    top: 50%;
    left: 100%;
    width: 100vw;
  }
}

svg.rings-svg { width: 100%; height: 100%; display: block; }

.rings-rotor { transform-origin: 50% 50%; transform-box: fill-box; }

@keyframes rings-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .rings-rotor { animation: rings-spin 120s linear infinite; }
}

/* Wrapper used for triggered transitions (spin-in on index.html) */
.rings-quick {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  opacity: 0.35;
  transition: transform var(--spin-dur, 800ms) var(--easing, cubic-bezier(.22, .61, .36, 1));
}

body.spin-in .rings-quick { transform: rotate(-180deg); }
body.instant .rings-quick { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .rings-quick { transition: none !important; }
  .rings-rotor { animation: none !important; }
  body.spin-in .rings-quick { transform: rotate(-180deg); }
}