/* Avatar — microescena de la tarjeta Canfranc 45K ("EN DIRECTO", v2).
   Segunda aparición aprobada del avatar (la primera es "Sobre mí").
   Ver docs/AVATAR-SOBRE-MI.md → "Canfranc 45K".
   Lámina: sprites/fermin-canfranc-directo-v1.webp, 384 x 96 px, 4 celdas de 96 x 96 px
   (docs/_build_avatar_canfranc_directo.py):
   0 reposo | -96px codo sobre el control | -192px codo + piloto | -288px reposo + piloto.
   Rótulo en dos piezas, HTML/CSS: franja con nombre (nace de la caja) + etiqueta "● En directo".
   Los textos van en `content` (no en el DOM) para que no se sumen al texto del enlace.
   Secuencia completa: 2420 ms, en cada entrada a la tarjeta (fermin-avatar-canfranc.js). */

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

/* Lleva el atributo hidden en el HTML (oculta aunque falle este CSS).
   Sólo se muestra con puntero fino, >= 1200 px y sin movimiento reducido.
   Sin JavaScript nunca recibe .is-on, así que permanece invisible. */
.fermin-directo {
  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: 260px;
  height: 89px;
  visibility: hidden;
  pointer-events: none;
}

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

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

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

/* Franja con nombre: arranca pegada a la caja de control (x 87 de la celda → 88 px)
   y tiene su misma altura (27 px), con el acento teal como junta entre ambas. */
.fermin-directo-nombre,
.fermin-directo-etiqueta {
  position: absolute;
  left: 88px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);   /* el recorte incluye el borde: sin residuo al recogerse */
}

.fermin-directo-nombre {
  bottom: 0;
  height: 27px;
  padding: 0 12px 0 10px;
  border-left: 3px solid var(--teal);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fermin-directo-nombre::before {
  content: "Canfranc 45K";
}

.fermin-directo-etiqueta {
  bottom: 27px;
  gap: 6px;
  height: 16px;
  padding: 0 8px 0 7px;
  background: var(--teal-dark);
  color: var(--paper);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fermin-directo-etiqueta::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live);
}

.fermin-directo-etiqueta::after {
  content: "En directo";
}

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

.fermin-directo.is-on .fermin-directo-nombre {
  animation: fermin-directo-nombre 2420ms linear 1 both;
}

.fermin-directo.is-on .fermin-directo-etiqueta {
  animation: fermin-directo-etiqueta 2420ms linear 1 both;
}

/* Tiempos (ms): 0-160 aparece · 380 mano al control · 520 piloto encendido ·
   620-860 la franja sale de la caja, con el nombre dentro · 800-960 etiqueta ·
   en antena hasta 1960 · 1960-2060 se recoge la etiqueta ·
   2040-2240 la franja vuelve a la caja · 2260 piloto apagado · 2260-2420 desaparece. */
@keyframes fermin-directo-fade {
  0%     { opacity: 0; }
  6.61%  { opacity: 1; }
  93.39% { opacity: 1; }
  100%   { opacity: 0; }
}

@keyframes fermin-directo-frames {
  0%     { background-position: 0 0; }
  15.70% { background-position: -96px 0; }
  21.49% { background-position: -192px 0; }
  28.93% { background-position: -288px 0; }
  93.39% { background-position: 0 0; }
  100%   { background-position: 0 0; }
}

@keyframes fermin-directo-nombre {
  0%, 25.62%     { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.25, 0.8, 0.3, 1); }
  35.54%, 84.30% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  92.56%, 100%   { clip-path: inset(0 100% 0 0); }
}

@keyframes fermin-directo-etiqueta {
  0%, 33.06%     { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.25, 0.8, 0.3, 1); }
  39.67%, 80.99% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  85.12%, 100%   { clip-path: inset(0 100% 0 0); }
}