/* Motion for the sacred-geometry figures. Shared by all three directions;
   each one decides the colour, the size and where it sits.

   The speeds are deliberately slow — a full turn takes between one and three
   minutes. Anything faster reads as a loading spinner, which is the opposite of
   what this figure is for. */

.fl { pointer-events: none; color: currentColor; }
.fl svg { display: block; width: 100%; height: 100%; }
.fl svg [stroke-width] { vector-effect: non-scaling-stroke; }
/* a 1px hairline at 13% on a light ground is invisible; this figure has to
   be seen to be worth drawing */
.fl svg { stroke-width: 1.4; }

.fl-spin    { transform-origin: 50% 50%; animation: fl-turn 74s linear infinite; }
.fl-rev     { animation-duration: 112s; animation-direction: reverse; }
.fl-fast    { animation-duration: 46s; }
.fl-breathe { transform-origin: 50% 50%; animation: fl-open 7s ease-in-out infinite; }

/* A second, much slower counter-turn on the outer field makes the two rings
   drift against each other instead of moving as one rigid wheel. */
.fl-slow .fl-spin { animation-duration: 132s; }

@keyframes fl-turn { to { transform: rotate(360deg); } }
@keyframes fl-open {
  0%, 100% { transform: scale(.94) rotate(0deg);  opacity: .85; }
  50%      { transform: scale(1.06) rotate(22.5deg); opacity: 1; }
}

/* The figure still draws; it simply stops moving. */
@media (prefers-reduced-motion: reduce) {
  .fl-spin, .fl-rev, .fl-breathe { animation: none !important; }
}