/* Motion vocabulary for the small inline SVG studies used as hover reveals
   (see "I work with" list). Geometry lives in the SVG markup; timing and
   behavior live here. Adapted from the source library in
   01_Preproduccion/Motion Design — color intentionally left to the
   context that uses each asset (band-motion below sets it), rather than
   hardcoded here, so the same vocabulary can be reused on light or dark
   backgrounds later. */

.motion-asset {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.motion-asset .motion-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.motion-asset .motion-line--soft {
  opacity: 0.18;
  stroke-width: 1.5;
}

.motion-asset .motion-node {
  fill: currentColor;
  stroke: none;
}

.motion-flow {
  stroke-dasharray: 0.18 0.82;
  stroke-dashoffset: 0;
  animation: motion-flow 3.75s linear infinite;
}

.motion-breathe {
  transform-box: fill-box;
  transform-origin: center;
  animation: motion-breathe 2s ease-in-out infinite;
  animation-delay: var(--motion-delay, 0s);
}

.motion-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: motion-pulse 1.5s ease-in-out infinite;
  animation-delay: var(--motion-delay, 0s);
}

.motion-drift {
  transform-box: fill-box;
  transform-origin: center;
  animation: motion-drift 3s ease-in-out infinite;
  animation-delay: var(--motion-delay, 0s);
}

.motion-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: motion-orbit 6s linear infinite;
  animation-delay: var(--motion-delay, 0s);
}

.motion-twinkle {
  animation: motion-twinkle 1.75s ease-in-out infinite;
  animation-delay: var(--motion-delay, 0s);
}

@keyframes motion-flow {
  to { stroke-dashoffset: -1; }
}

@keyframes motion-breathe {
  0%, 100% { opacity: 0.64; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes motion-pulse {
  0%, 100% { opacity: 0.62; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes motion-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(1.5px, -1px, 0) rotate(0.45deg); }
}

@keyframes motion-orbit {
  to { transform: rotate(360deg); }
}

@keyframes motion-twinkle {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-asset *,
  .motion-asset *::before,
  .motion-asset *::after {
    animation-play-state: paused !important;
  }
}