/* ───────────────────────────────────────────────────────────────
   COMPUTADORA ECO (PLAN-05; la v3 desde el 2026-10-02): la mascota del futuro chatbot, al
   lado de la terminal. Su identidad (un CRT en 3/4 de 64×56 en pixel art, con la paleta del
   sitio) vive en el repo chatbot-manager; `eco.png` es una tira de 28 cuadros de 66×56 (el
   dibujo con un píxel transparente a cada lado) armada desde allí por `Dev/generar-eco.py`,
   que también comprueba que los --c-* de abajo sigan su orden.

   Cuatro piezas, y cada una mueve una sola cosa (dos animaciones de la misma propiedad en un
   mismo elemento sacan las dos del compositor: Dev/LECCIONES.md):
     .eco          dónde está (index.css lo coloca junto a la terminal) y el puntero;
     .eco__sombra  el reflejo verde del piso, que se encoge cuando salta;
     .eco__salto   los saltos (eco.js, Web Animations con `translate`);
     .eco__cuerpo  la respiración (un píxel arriba y abajo) y el recorte de la celda;
     .eco__tira    la tira entera: el cuadro visible es su `transform`.
   Todo lo que se mueve es `transform`, `translate` u `opacity`: va al compositor y no repinta.

   Nítido en cualquier pantalla: un píxel del dibujo mide --eco-base, redondeado a un número
   entero de píxeles de pantalla (--dpx = 1px / devicePixelRatio, lo pone eco.js), y la tira se
   agranda con `image-rendering: pixelated`.
   ─────────────────────────────────────────────────────────────── */
.eco {
  /* El orden de la tira (Dev/generar-eco.py lo verifica contra estos números). */
  --cuadros: 28;
  --c-apagado: 0;
  --c-apagando-2: 1;
  --c-apagando-1: 2;
  --c-arranque: 3;
  --c-reposo: 4;
  --c-reposo-cursor: 5;
  --c-parpadeo: 6;
  --c-mira-izq: 7;
  --c-mira-der: 8;
  --c-atento: 9;
  --c-hola: 10;
  --c-listo: 11;
  --c-guino: 12;
  --c-risa: 13;
  --c-sorpresa: 14;
  --c-hablando-1: 15;
  --c-hablando-2: 16;
  --c-hablando-3: 17;
  --c-pensando-1: 18;
  --c-pensando-2: 19;
  --c-pensando-3: 20;
  --c-tema-campo: 21;
  --c-tema-iot: 22;
  --c-tema-investigacion: 23;
  --c-tema-ia: 24;
  --c-tema-vision: 25;
  --c-tema-automatizacion: 26;
  --c-tema-contacto: 27;

  --eco-base: 3px;
  --dpx: 1px;
  --eco-px: var(--eco-base);
  --n: var(--c-apagado);
  position: relative;
  width: calc(66 * var(--eco-px));
  height: calc(56 * var(--eco-px));
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

@supports (width: round(nearest, 3px, 1px)) {
  .eco {
    --eco-px: max(var(--dpx), round(nearest, var(--eco-base), var(--dpx)));
  }
}

.eco__salto,
.eco__cuerpo {
  position: absolute;
  inset: 0;
}

.eco__cuerpo {
  overflow: hidden;
}

/* El salto y la sombra, en capa fija. Sin esto, cada salto crea sus capas al empezar y las
   deshace al terminar, y ECO se repinta dos veces por salto (medido el 2026-10-01: 8 repintados
   en 28 s; con esto, 0). Son dos capas del tamaño de ECO. */
.eco__salto {
  will-change: translate;
}

.eco__tira {
  display: block;
  width: calc(100% * var(--cuadros));
  max-width: none;
  height: 100%;
  image-rendering: pixelated;
  transform: translateX(calc(var(--n) * -100% / var(--cuadros)));
  pointer-events: none;
  -webkit-user-drag: none;
}

/* El reflejo del piso: una línea de un píxel del dibujo bajo los pies. En la v3 las suelas
   van de la columna 15 a la 54 del dibujo: 16 a 55 de la celda. */
.eco__sombra {
  position: absolute;
  left: calc(16 * var(--eco-px));
  top: 100%;
  width: calc(40 * var(--eco-px));
  height: var(--eco-px);
  background: rgba(0, 255, 156, 0.22);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* ── Ciclos de cuadros: steps() recorre cuadros seguidos de la tira. ─────────── */
.eco[data-ciclo="cursor"] .eco__tira {
  animation: eco-cursor 1.1s steps(2) infinite;
}

.eco[data-ciclo="habla"] .eco__tira {
  animation: eco-habla 0.42s steps(3) infinite;
}

.eco[data-ciclo="piensa"] .eco__tira {
  animation: eco-piensa 1.26s steps(3) infinite;
}

@keyframes eco-cursor {
  from {
    transform: translateX(calc(var(--c-reposo) * -100% / var(--cuadros)));
  }
  to {
    transform: translateX(calc((var(--c-reposo) + 2) * -100% / var(--cuadros)));
  }
}

@keyframes eco-habla {
  from {
    transform: translateX(calc(var(--c-hablando-1) * -100% / var(--cuadros)));
  }
  to {
    transform: translateX(calc((var(--c-hablando-1) + 3) * -100% / var(--cuadros)));
  }
}

@keyframes eco-piensa {
  from {
    transform: translateX(calc(var(--c-pensando-1) * -100% / var(--cuadros)));
  }
  to {
    transform: translateX(calc((var(--c-pensando-1) + 3) * -100% / var(--cuadros)));
  }
}

/* ── La respiración: un píxel del dibujo arriba, sostenido, y abajo. ─────────── */
.eco--vivo .eco__cuerpo {
  animation: eco-respira 3.4s steps(1, end) infinite;
}

@keyframes eco-respira {
  0%,
  52% {
    translate: 0 0;
  }
  56%,
  96% {
    translate: 0 calc(-1 * var(--eco-px));
  }
}

/* Fuera de la vista (eco.js), nada corre. */
.eco--fuera .eco__tira,
.eco--fuera .eco__cuerpo {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .eco__tira,
  .eco__cuerpo {
    animation: none !important;
  }
}