/* Wordmark · Catalina Vásquez
   Tu letra, tres dibujos a 10 cuadros por segundo (line boil), extraída del GIF del sitio en vivo.
   El sprite es una máscara: el trazo toma currentColor, así funciona en Paper e Ink sin dos archivos.
   Con prefers-reduced-motion queda fijo en el primer cuadro. */

.wordmark {
  display: inline-block;
  color: inherit;                       /* tinta en Paper, papel en Ink */
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 300% 100%;  mask-size: 300% 100%;
  -webkit-mask-position: 0 0;    mask-position: 0 0;
  animation: wordmark-boil 300ms steps(1, end) infinite;
}
.wordmark--line    { aspect-ratio: 983 / 160;
                     -webkit-mask-image: url("wordmark-line-sprite.webp"); mask-image: url("wordmark-line-sprite.webp"); }
.wordmark--stacked { aspect-ratio: 1000 / 663;
                     -webkit-mask-image: url("wordmark-stacked-sprite.webp"); mask-image: url("wordmark-stacked-sprite.webp"); }

/* tamaños de referencia: el alto manda en la línea, el ancho en la apilada */
.wordmark--line    { height: 2.25rem; }     /* nav */
.wordmark--stacked { width: min(22rem, 70vw); }   /* home, about, pie */

@keyframes wordmark-boil {
  0%      { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  33.33%  { -webkit-mask-position: 50% 0;  mask-position: 50% 0; }
  66.66%  { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) { .wordmark { animation: none; } }

/* Marcado:
   <a href="/" class="wordmark wordmark--line" role="img" aria-label="Catalina Vásquez"></a>
   Sin JS, sin fuente, sin segundo archivo por tema. */