/* TúPOS — Icono Animado v3 (import: claude.ai/design, proyecto TúPOS, archivo "TúPOS - Icono Animado v3.html") */

.tupos-anim-icon {
  --g-green: #5FD98A;
  --g-teal: #4CC2C2;
  --g-blue: #2355F5;
  --paper-2: #d8dde3;
  --ink: #22272f;
  --lines: #aab2bc;
  --glow-max: 0.7;

  display: block;
  width: var(--tupos-anim-size, 120px);
  aspect-ratio: 1;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transform: skewX(-9deg) scale(1.07);
  transform-origin: 50% 50%;
  transition: transform .5s cubic-bezier(.25, .9, .3, 1.1);
}
.tupos-anim-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* 0.0–0.8 idle: glow respirando */
.tupos-anim-glow {
  opacity: calc(var(--glow-max, .7) * .66);
  animation: tupos-anim-breathe 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes tupos-anim-breathe {
  0%, 100% { opacity: calc(var(--glow-max, .7) * .5); }
  50% { opacity: var(--glow-max, .7); }
}

/* 0.8–1.0 pulse */
.ta-pulse .tupos-anim-glow {
  animation: none;
  opacity: var(--glow-max, .7);
  transition: opacity .2s cubic-bezier(.3, .7, .4, 1);
}

/* 1.0–1.2 highlight: flash en pantalla */
.tupos-anim-flash { opacity: 0; }
.ta-highlight .tupos-anim-flash {
  animation: tupos-anim-flash .22s cubic-bezier(.3, .7, .4, 1) both;
}
@keyframes tupos-anim-flash {
  0% { opacity: 0; }
  40% { opacity: .6; }
  100% { opacity: 0; }
}
.ta-highlight .tupos-anim-glow { opacity: var(--glow-max, .7); animation: none; }

/* 1.2–1.3 tiny vibration */
.ta-vibrate .tupos-anim-chassis {
  animation: tupos-anim-vibrate .1s linear both;
}
@keyframes tupos-anim-vibrate {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.2px, .6px); }
  50% { transform: translate(1.2px, -.6px); }
  75% { transform: translate(-.8px, -.4px); }
}

@media (prefers-reduced-motion: reduce) {
  .tupos-anim-glow { animation: none; }
  .ta-vibrate .tupos-anim-chassis { animation: none; }
}