/* ══════════════════════════════════════════════════════════════════
   v16 · CÓMO SE MUEVEN LOS VECTORES
   Dos tiempos por capítulo:
     · llegada — el dibujo se arma solo, una vez, escalonado
     · reposo  — un latido lento y casi imperceptible
   Todo cuelga de .pane.on: al salir de la tarjeta la animación se
   quita, y al volver arranca de cero. Antes quedaba pausada a mitad
   de ciclo y volvías a una postura random.
   ══════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:no-preference){
  .pane.on .art-bg{animation:aFade 1.4s var(--ease) .25s both}
  @keyframes aFade{from{opacity:0}to{opacity:1}}

  /* ── llegada: una sola vez ── */
  .pane.on .art .a-draw{stroke-dasharray:1;animation:aDraw 1.15s var(--ease) var(--d,0s) both}
  @keyframes aDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  .pane.on .art .a-in{transform-box:fill-box;transform-origin:center;
    animation:aIn .6s var(--ease) var(--d,0s) both}
  @keyframes aIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
  @keyframes aRise{from{opacity:0;transform:translateY(var(--dy,14px))}to{opacity:1;transform:none}}

  /* ── reposo: en bucle, lento ── */
  .pane.on .art .a-pulse{animation:aPulse 4.4s ease-in-out var(--d,0s) infinite}
  @keyframes aPulse{0%,100%{opacity:.2}50%{opacity:1}}

  .pane.on .art .a-grow{animation:aGrow 5s ease-in-out var(--d,0s) infinite}
  @keyframes aGrow{0%,100%{r:var(--r0)}50%{r:var(--r1)}}
  @keyframes aWide{0%,100%{rx:var(--x0)}50%{rx:var(--x1)}}

  .pane.on .art .a-float{animation:aFloat 5.2s ease-in-out var(--d,0s) infinite}
  @keyframes aFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  @keyframes aDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--dx,10px))}}
  @keyframes aSweep{0%,100%{transform:rotate(0)}50%{transform:rotate(var(--rot,100deg))}}
}