/* Avatar — microescena de la tarjeta Federación Navarra de Judo ("CINTURÓN NEGRO").
   Cuarta aparición del avatar (Sobre mí, Canfranc 45K, Taekwondo). Ver docs/AVATAR-SOBRE-MI.md → "Judo".
   Lámina: sprites/fermin-judo-cinturon-v1.webp, 768 x 96 px, 8 celdas de 96 x 96 px
   (docs/_build_avatar_judo_cinturon.py): 0 sin cinturón | -96 blanco | -192 amarillo |
   -288 naranja | -384 verde | -480 azul | -576 marrón | -672 negro.
   La banda del cinturón negro es HTML/CSS; su texto va en `content` para no sumarse al texto del enlace.
   Secuencia completa: 2400 ms, en cada entrada a la tarjeta (fermin-avatar-judo.js). */

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

/* Lleva el atributo hidden en el HTML (oculta aunque falle este CSS). */
.fermin-cinturon {
  display: none;
  position: absolute;
  left: -10px;                 /* el personaje (x 42 de la celda) queda alineado con el padding de 32 px */
  bottom: calc(100% + 1px);    /* los pies (fila 88) apoyan sobre el borde superior de la rejilla */
  width: 250px;
  height: 89px;
  visibility: hidden;
  pointer-events: none;
}

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

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

.fermin-cinturon-sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 96px;
  opacity: 0;
  z-index: 1;
  background: url('/avatar/sprites/fermin-judo-cinturon-v1.webp') 0 0 / 768px 96px no-repeat;
  image-rendering: pixelated;
}

/* Banda de cinturón negro centrada en la fila 61 de la celda (la del cinturón del sprite).
   Arranca por detrás del brazo (x 64, debajo del sprite), así que asoma por su costado
   como si fuera la punta del cinturón; lleva pespuntes y el grado bordado. */
.fermin-cinturon-banda {
  position: absolute;
  left: 64px;
  bottom: 20px;
  display: flex;
  align-items: center;
  height: 16px;
  padding: 0 12px 0 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) 0 3px / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) 0 calc(100% - 3px) / 100% 1px no-repeat,
    #1A1A1E;
  color: #D8B45A;              /* bordado dorado, como el nombre en un cinturón real */
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

.fermin-cinturon-banda::after {
  content: "Cinturón negro · 1.º Dan";
}

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

.fermin-cinturon.is-on .fermin-cinturon-banda {
  animation: fermin-cinturon-banda 2400ms linear 1 both;
}

/* Tiempos (ms): 0-160 aparece · 320 cinturón blanco · 460 amarillo · 580 naranja ·
   690 verde · 790 azul · 880 marrón · 960 negro (cada grado dura menos: va cogiendo ritmo) ·
   1020-1240 sale la banda · visible hasta 1960 · 1960-2120 se recoge ·
   2160 se quita el cinturón · 2240-2400 desaparece. */
@keyframes fermin-cinturon-fade {
  0%     { opacity: 0; }
  6.67%  { opacity: 1; }
  93.33% { opacity: 1; }
  100%   { opacity: 0; }
}

@keyframes fermin-cinturon-frames {
  0%     { background-position: 0 0; }
  13.33% { background-position: -96px 0; }
  19.17% { background-position: -192px 0; }
  24.17% { background-position: -288px 0; }
  28.75% { background-position: -384px 0; }
  32.92% { background-position: -480px 0; }
  36.67% { background-position: -576px 0; }
  40%    { background-position: -672px 0; }
  90%    { background-position: 0 0; }
  100%   { background-position: 0 0; }
}

@keyframes fermin-cinturon-banda {
  0%, 42.5%      { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.25, 0.8, 0.3, 1); }
  51.67%, 81.67% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  88.33%, 100%   { clip-path: inset(0 100% 0 0); }
}