/* ===================================================================
   art.css — a bespoke motion for each personal project.

   motion.css gives every figure on the site the same generic life: a wave
   through dense point fields, a pulse on endpoint markers. That is the
   right floor and the wrong ceiling. These are Teerth's own projects, and
   a generic wave says nothing about what any of them actually is.

   Every rule below is keyed to one project's article id, so the motion
   describes that specific idea: a link rotating because it is a link, a
   loop closing because the loop is the result, a sphere turning because
   the state lives on its surface. The ids are stable; the markup inside
   them is not, so nothing here depends on a particular element order.

   Two rules hold throughout:
     - Every animation rests at the drawn state, so a paused frame is
       always the correct figure and nothing can finish invisible.
     - The whole file sits inside prefers-reduced-motion: no-preference.
   =================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- monodromy -------------------------------------------------------
     The result is that a frame comes back rotated, so the frames rotate. */
  @keyframes md-carry { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  #p-monodromy svg polygon, #p-monodromy svg path[fill]:not([fill="none"]){
    transform-box: fill-box; transform-origin: center;
    animation: md-carry 3s linear infinite;
  }

  /* --- Pointing at a figure stops it, so it can be read ---------------- */
  .proj:hover .proj__art svg,
  .proj:hover .proj__art svg *,
  .proj:focus-within .proj__art svg,
  .proj:focus-within .proj__art svg *{
    animation-play-state: paused;
  }


}