/* ════════════════════════════════════════════════════════════════
    MI TURNO · animations/keyframes.css
   ════════════════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes spFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.fade-up {
  animation: fadeUp 0.4s ease forwards;
  transform: translateZ(0);
  will-change: transform, opacity;
}
.sp-in {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  transform: translateZ(0);
  will-change: transform;
  animation-play-state: running;
}

@keyframes ob-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-in {
    animation-play-state: paused;
  }
}