/* ============================================================
   CORE TURING — animación con sprite sheet pixel art
   ============================================================
   El sprite sheet `assets/turing-sheet.png` contiene 6 frames
   horizontales (434×451 c/u, fondo transparente). Cambiamos de
   frame moviendo `background-position`. JS solo modifica --frame.

   Frames:
     0  idle        (intacto)
     1  eyes_half   (parpadeo a medio cerrar)
     2  eyes_closed (ojo cerrado completo)
     3  mouth_half  (boca entreabierta)
     4  mouth_open  (boca abierta)
     5  eyes_mouth  (ambos)
   ============================================================ */

.turing-assistant {
  position: relative;
  width: var(--w);
  height: var(--h);
  user-select: none;
  pointer-events: none;
  --frame: 0;          /* índice del frame visible (0..5) */
  --frames: 6;
  --sheet: url('../assets/turing-sheet.png');
  flex-shrink: 0;
}

.turing-body {
  position: relative;
  width: var(--w);
  height: var(--h);
  animation: turing-breath 3.4s ease-in-out infinite;
  will-change: transform;
}

.turing-sprite {
  position: absolute;
  inset: 0;
  background-image: var(--sheet);
  background-repeat: no-repeat;
  background-size: calc(var(--w) * var(--frames)) var(--h);
  background-position: calc(var(--frame) * var(--w) * -1) 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: background-position 0s;
}

/* ── Decoraciones (overlays) ─────────────────────────────────── */
.turing-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #6ce5d6;
  top: calc(var(--h) * 0.06);
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
}
.turing-dot--1 { left: calc(var(--w) * 0.62); }
.turing-dot--2 { left: calc(var(--w) * 0.70); }
.turing-dot--3 { left: calc(var(--w) * 0.78); }

.turing-glow {
  position: absolute;
  inset: -4px;
  border: 2px solid #f5c451;
  opacity: 0;
  pointer-events: none;
  border-radius: 8px;
}

.turing-bang {
  position: absolute;
  top: -2px;
  right: 4px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 14px;
  color: #f5c451;
  background: #000;
  padding: 0 4px;
  border: 2px solid #f5c451;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  border-radius: 3px;
}

/* ── Estados (decoraciones; los frames los maneja JS) ────────── */
.turing-assistant[data-state="thinking"] .turing-dot--1 { animation: turing-dotFloat 1.4s ease-in-out infinite; }
.turing-assistant[data-state="thinking"] .turing-dot--2 { animation: turing-dotFloat 1.4s ease-in-out infinite 0.25s; }
.turing-assistant[data-state="thinking"] .turing-dot--3 { animation: turing-dotFloat 1.4s ease-in-out infinite 0.5s; }

.turing-assistant[data-state="alert"] .turing-glow { animation: turing-glowPulse 0.9s ease-in-out infinite; }
.turing-assistant[data-state="alert"] .turing-bang { animation: turing-bangBob 0.9s ease-in-out infinite; }

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes turing-breath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
@keyframes turing-dotFloat {
  0%   { transform: translateY(6px);  opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(-10px); opacity: 0; }
}
@keyframes turing-glowPulse {
  0%, 100% { opacity: 0;   transform: scale(1);    }
  50%      { opacity: 0.9; transform: scale(1.04); }
}
@keyframes turing-bangBob {
  0%, 100% { transform: translateY(-4px); opacity: 1; }
  50%      { transform: translateY(-7px); opacity: 1; }
}

/* ── Variantes: solo cabeza / espejado ───────────────────────── */
/* `turing-head` recorta el sprite para mostrar solo la cabeza
   (porción central-superior del frame). El contenedor exterior
   queda con dimensiones de cabeza; el cuerpo interno mantiene
   tamaño completo y se desplaza con margen negativo.

   Ratios calibrados sobre frame 434×451:
     ancho cabeza  ≈ 40% del frame  (ratio 0.40)
     alto cabeza   ≈ 42% del frame  (ratio 0.42)
     offset X       ≈ 30% del frame
     offset Y       ≈ 5%  del frame                              */
.turing-assistant.turing-head {
  position: relative;
  overflow: hidden;
  width:  calc(var(--w) * 0.40);
  height: calc(var(--h) * 0.42);
}
.turing-assistant.turing-head .turing-body {
  position: absolute;
  left: calc(var(--w) * -0.30);
  top:  calc(var(--h) * -0.05);
  /* sin breath: el clip es justo y se vería el corte */
  animation: none;
}
.turing-assistant.turing-mirror .turing-sprite { transform: scaleX(-1); }

/* Decoraciones overlay específicas para `.turing-head`.
   Como el head clippea el body desplazado, los .turing-dot/glow/bang
   genéricos quedan fuera del rectángulo visible. Estas variantes
   (th-bubble / th-bang / borde ::before) se posicionan dentro del clip
   para que los estados thinking/alert sean legibles en la cabeza. */

/* Globo "Analizando" (thinking) — esquina superior derecha del clip */
.turing-head .th-bubble {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(108, 229, 214, 0.4);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.turing-head .th-d {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6ce5d6;
  opacity: 0.35;
}
.turing-assistant.turing-head[data-state="thinking"] .th-bubble { opacity: 1; }
.turing-assistant.turing-head[data-state="thinking"] .th-d1 { animation: turing-head-dot 1.1s ease-in-out infinite; }
.turing-assistant.turing-head[data-state="thinking"] .th-d2 { animation: turing-head-dot 1.1s ease-in-out infinite 0.18s; }
.turing-assistant.turing-head[data-state="thinking"] .th-d3 { animation: turing-head-dot 1.1s ease-in-out infinite 0.36s; }

/* Banderín "!" (alert) — esquina superior izquierda del clip */
.turing-head .th-bang {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  font-family: "Courier New", monospace;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: #ef4444;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #fca5a5;
  opacity: 0;
  pointer-events: none;
}
.turing-assistant.turing-head[data-state="alert"] .th-bang { animation: turing-head-bang 0.7s ease-in-out infinite; }

/* Borde rojo pulsante alrededor del clip cuando hay alerta */
.turing-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid #ef4444;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.turing-assistant.turing-head[data-state="alert"]::before {
  animation: turing-head-border 0.7s ease-in-out infinite;
}

@keyframes turing-head-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}
@keyframes turing-head-bang {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.12); }
}
@keyframes turing-head-border {
  0%, 100% { opacity: 0;   }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .turing-body { animation: none; }
  .turing-assistant[data-state="thinking"] .turing-dot--1,
  .turing-assistant[data-state="thinking"] .turing-dot--2,
  .turing-assistant[data-state="thinking"] .turing-dot--3,
  .turing-assistant[data-state="alert"] .turing-glow,
  .turing-assistant[data-state="alert"] .turing-bang { animation: none; }
}