/* ============================================================
   TECPORT — Íconos de módulos (icons.js / TPIcons).
   Quietos por defecto. Se mueven UNA vez, breve, al pasar el mouse o enfocar con teclado el
   contenedor `.tpi-hover` (la tarjeta del hub, una celda del selector). Con «reducir movimiento»
   del sistema no se mueve nada.
   ============================================================ */

/* El humo de la fábrica se dibuja por encima de la caja del ícono. */
.tpi { overflow: visible; display: block; flex: none; }
.tpi-ui { display: block; flex: none; }
.tpi * { transform-box: fill-box; transform-origin: 50% 50%; }

/* Lo que en reposo no se ve. */
.tpi .tpi-smoke { opacity: 0; fill: currentColor; stroke: none; }

/* ── Movimientos del ícono entero ── */
:is(.tpi-hover:hover, .tpi-hover:focus-visible) .tpi[data-anim="lift"]  { animation: tpi-lift .6s var(--ease, ease) both; }
:is(.tpi-hover:hover, .tpi-hover:focus-visible) .tpi[data-anim="spin"]  { animation: tpi-spin .8s var(--ease, ease) both; }
:is(.tpi-hover:hover, .tpi-hover:focus-visible) .tpi[data-anim="pulse"] { animation: tpi-pulse .8s ease-in-out both; }
:is(.tpi-hover:hover, .tpi-hover:focus-visible) .tpi[data-anim="twist"] { animation: tpi-twist .65s var(--ease, ease) both; }
:is(.tpi-hover:hover, .tpi-hover:focus-visible) .tpi[data-anim="drive"] { animation: tpi-drive .7s ease-in-out both; }

@keyframes tpi-lift  { 0%, 100% { transform: none; } 45% { transform: translateY(-2px); } }
@keyframes tpi-spin  { from { transform: rotate(0); } to { transform: rotate(90deg); } }
@keyframes tpi-pulse { 0%, 100% { transform: none; } 25% { transform: scale(1.1); } 50% { transform: scale(.98); } 75% { transform: scale(1.05); } }
@keyframes tpi-twist { 0%, 100% { transform: none; } 40% { transform: rotate(-18deg); } 70% { transform: rotate(6deg); } }
@keyframes tpi-drive { 0%, 100% { transform: none; } 40% { transform: translateX(2.5px); } 70% { transform: translateX(-.5px); } }

/* ── Movimientos por piezas ── */
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-fork { animation: tpi-fork .9s ease-in-out both; }
@keyframes tpi-fork { 0%, 100% { transform: none; } 45%, 60% { transform: translateY(-6px); } }

/* La pluma del reach stacker gira sobre su pivote trasero (esquina inferior izquierda del grupo). */
.tpi--reach-stacker .tpi-boom { transform-origin: 0% 100%; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-boom { animation: tpi-boom 1s ease-in-out both; }
@keyframes tpi-boom { 0%, 100% { transform: none; } 45%, 60% { transform: rotate(-9deg); } }

.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-smoke { animation: tpi-smoke 1.2s ease-out both; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-smoke--2 { animation-delay: .25s; }
@keyframes tpi-smoke {
  0%   { opacity: 0; transform: translateY(2px) scale(.6); }
  35%  { opacity: .75; }
  100% { opacity: 0; transform: translateY(-2.5px) scale(1.15); }
}

.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-draw { stroke-dasharray: 1; animation: tpi-draw .55s ease-out both; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-draw--2 { animation-delay: .12s; }
@keyframes tpi-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.tpi .tpi-bar { transform-origin: 50% 100%; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-bar { animation: tpi-bar .6s var(--ease, ease) both; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-bar--2 { animation-delay: .08s; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-bar--3 { animation-delay: .16s; }
@keyframes tpi-bar { from { transform: scaleY(.35); } to { transform: none; } }

.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-star { animation: tpi-star .8s ease-in-out both; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-twinkle { animation: tpi-twinkle .8s ease-in-out both; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-twinkle--2 { animation-delay: .2s; }
@keyframes tpi-star { 0%, 100% { transform: none; } 40% { transform: scale(.86) rotate(12deg); } 70% { transform: scale(1.06); } }
@keyframes tpi-twinkle { 0%, 100% { opacity: 1; transform: none; } 40% { opacity: .25; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.2); } }

.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-hat { animation: tpi-hat .7s ease-in-out both; }
@keyframes tpi-hat { 0%, 100% { transform: none; } 35% { transform: translateY(-2px) rotate(-5deg); } 65% { transform: translateY(0) rotate(2deg); } }

.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-peer { animation: tpi-peer .6s ease-in-out both; }
@keyframes tpi-peer { 0%, 100% { transform: none; } 45% { transform: translateX(1.5px); } }

.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-eyes { animation: tpi-blink .5s ease-in-out .1s both; }
@keyframes tpi-blink { 0%, 100% { transform: none; } 50% { transform: scaleY(.1); } }

/* La aguja del horómetro gira sobre su base (12,14 en el dibujo). */
.tpi .tpi-needle { transform-box: view-box; transform-origin: 12px 14px; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-needle { animation: tpi-needle .8s var(--ease, ease) both; }
@keyframes tpi-needle { 0% { transform: rotate(-80deg); } 70% { transform: rotate(8deg); } 100% { transform: none; } }

/* La etiqueta se balancea colgada de su ojal (7.5,7.5). */
.tpi .tpi-swing { transform-box: view-box; transform-origin: 7.5px 7.5px; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-swing { animation: tpi-swing .8s ease-in-out both; }
@keyframes tpi-swing { 0%, 100% { transform: none; } 30% { transform: rotate(-12deg); } 65% { transform: rotate(6deg); } }

.tpi .tpi-ring { transform-box: view-box; transform-origin: 12px 3px; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-ring { animation: tpi-swing .7s ease-in-out both; }

.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-hop { animation: tpi-hop .6s ease-in-out both; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-hop--2 { animation-delay: .12s; }
@keyframes tpi-hop { 0%, 100% { transform: none; } 45% { transform: translateY(-2px); } }

.tpi .tpi-flick { transform-origin: 50% 100%; }
.tpi-hover:is(:hover, :focus-visible) .tpi .tpi-flick { animation: tpi-flick .8s ease-in-out both; }
@keyframes tpi-flick { 0%, 100% { transform: none; } 30% { transform: scale(.94, 1.08); } 60% { transform: scale(1.04, .95); } }

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