/* Avatar — microescena de la tarjeta Federación Navarra de Taekwondo ("LICENCIA TRAMITADA").
   Tercera aparición del avatar (Sobre mí, Canfranc 45K). Ver docs/AVATAR-SOBRE-MI.md → "Taekwondo".
   Lámina: sprites/fermin-taekwondo-sello-v1.webp, 192 x 96 px, 2 celdas de 96 x 96 px
   (docs/_build_avatar_taekwondo_sello.py): 0 reposo | -96px mano sobre el sello.
   La marca del sello es HTML/CSS; los textos van en `content` para no sumarse al texto del enlace.
   Secuencia completa: 2060 ms, en cada entrada a la tarjeta (fermin-avatar-taekwondo.js). */

.portfolio-card.has-fermin-sello {
  position: relative;
}

/* Lleva el atributo hidden en el HTML (oculta aunque falle este CSS).
   Se alinea a la derecha de la tarjeta para no pisar la etiqueta "Proyectos". */
.fermin-sello {
  display: none;
  position: absolute;
  right: 35px;
  bottom: calc(100% + 1px);    /* las patas y los pies (fila 88) apoyan sobre el borde de la rejilla */
  width: 212px;
  height: 89px;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fermin-sello {
    display: block;
  }
}

.fermin-sello.is-on {
  visibility: visible;
}

.fermin-sello-sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 96px;
  opacity: 0;
  background: url('/avatar/sprites/fermin-taekwondo-sello-v1.webp') 0 0 / 192px 96px no-repeat;
  image-rendering: pixelated;
}

/* Marca del sello: tinta --live, doble filete y leve giro, como un sello de caucho. */
.fermin-sello-marca {
  position: absolute;
  left: 100px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 9px 5px;
  border: 2px solid var(--live);
  outline: 1px solid var(--live);
  outline-offset: 2px;
  color: var(--live);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: rotate(-6deg);
}

.fermin-sello-marca::before {
  content: "Licencia";
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.24em;
}

.fermin-sello-marca::after {
  content: "Tramitada";
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.fermin-sello.is-on .fermin-sello-sprite {
  animation:
    fermin-sello-fade 2060ms linear 1 both,
    fermin-sello-frames 2060ms steps(1, end) 1 both;
}

.fermin-sello.is-on .fermin-sello-marca {
  animation: fermin-sello-marca 2060ms linear 1 both;
}

/* Tiempos (ms): 0-160 aparece · 420 mano al sello · 560-650 golpe: la marca cae sobre el papel ·
   760 suelta el sello · marca visible hasta 1700 · 1700-1900 se desvanece · 1900-2060 desaparece. */
@keyframes fermin-sello-fade {
  0%     { opacity: 0; }
  7.77%  { opacity: 1; }
  92.23% { opacity: 1; }
  100%   { opacity: 0; }
}

@keyframes fermin-sello-frames {
  0%     { background-position: 0 0; }
  20.39% { background-position: -96px 0; }
  36.89% { background-position: 0 0; }
  100%   { background-position: 0 0; }
}

@keyframes fermin-sello-marca {
  0%, 27.18% { opacity: 0; transform: rotate(-6deg) scale(1.35); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  31.55%     { opacity: 1; transform: rotate(-6deg) scale(1); }
  82.52%     { opacity: 1; transform: rotate(-6deg) scale(1); }
  92.23%, 100% { opacity: 0; transform: rotate(-6deg) scale(1); }
}