/* ojito — personaje del jugador y accesorios sueltos. Dueño: agente AVATAR (js/ojito/engine.js). */

.ojito { display: inline-block; line-height: 0; vertical-align: middle; flex: none; }
.ojito > svg { display: block; width: 100%; height: auto; overflow: visible; }
.ojito-item { display: inline-grid; place-items: center; line-height: 0; vertical-align: middle; flex: none; }
.ojito-item > svg { display: block; width: 100%; height: 100%; }

/* ---- animación (solo con anim: clase .oj-anim en el <svg>) ---- */
.oj-anim .oj-sway {
  transform-box: view-box;
  transform-origin: 100px 204px;
  animation: oj-sway 5.6s ease-in-out infinite;
  animation-delay: var(--oj-d, 0s);
}
.oj-anim .oj-blink {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: oj-blink var(--oj-bp, 5s) linear infinite;
  animation-delay: var(--oj-d, 0s);
}
/* absoluto: levita (todo lo que lleva se mueve con él) y la sombra respira al revés */
.oj-anim.oj-abs .oj-lev {
  transform-box: view-box;
  animation: oj-float 3.2s ease-in-out infinite alternate;
  animation-delay: var(--oj-d, 0s);
}
.oj-anim.oj-abs .oj-shadow {
  transform-box: view-box;
  transform-origin: 100px 208px;
  animation: oj-shadow 3.2s ease-in-out infinite alternate;
  animation-delay: var(--oj-d, 0s);
}
.oj-anim .oj-spark { animation: oj-twinkle 2.4s ease-in-out infinite; }
.oj-anim .oj-spark:nth-of-type(2n) { animation-delay: -0.8s; }
.oj-anim .oj-spark:nth-of-type(3n) { animation-delay: -1.6s; }

@keyframes oj-sway {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-1.5px); }
  50% { transform: rotate(1.6deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-1.5px); }
}
@keyframes oj-blink {
  0%, 92.9% { transform: scaleY(0); opacity: 0; }
  93% { transform: scaleY(0.05); opacity: 1; }
  95.5% { transform: scaleY(1); opacity: 1; }
  98.5% { transform: scaleY(0.05); opacity: 1; }
  98.6%, 100% { transform: scaleY(0); opacity: 0; }
}
@keyframes oj-float {
  from { transform: translateY(2px); }
  to { transform: translateY(-5px); }
}
@keyframes oj-shadow {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.82); opacity: 0.7; }
}
@keyframes oj-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .oj-anim .oj-sway, .oj-anim .oj-blink, .oj-anim .oj-lev, .oj-anim .oj-shadow, .oj-anim .oj-spark { animation: none !important; }
}