/* SINGLE SOURCE for the animated starfish backdrop. The markup is injected by
   assets/site-nav.js into <div data-starfish-bg></div>; this is the only place
   its styling lives. Every page that wants the backdrop links this + adds the
   mount — no per-page copies. */
.starfish-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; overflow: hidden; }
.starfish-geo {
  position: absolute; top: 50%; left: 50%;
  width: min(90vw, 90vh); height: min(90vw, 90vh);
  margin-top: calc(-0.5 * min(90vw, 90vh));
  margin-left: calc(-0.5 * min(90vw, 90vh));
  opacity: 0.30;
  animation: starfish-drift 25s ease-in-out infinite;
}
[data-theme="dark"] .starfish-geo { opacity: 0.25; }
@keyframes starfish-drift {
  0%, 100% { transform: rotate(0deg) scale(1) translate(0, 0); }
  25%      { transform: rotate(15deg) scale(1.08) translate(25px, -15px); }
  50%      { transform: rotate(-12deg) scale(0.94) translate(-20px, 20px); }
  75%      { transform: rotate(8deg) scale(1.03) translate(12px, 8px); }
}
@media (prefers-reduced-motion: reduce) { .starfish-geo { animation: none !important; } }