/* silkdrop_animations.css — SilkDrop
 *
 * Subset curado de animate.css (https://animate.style · MIT · © Daniel Eden).
 * Solo los keyframes que usa SilkDrop (fadeIn, fadeInUp, zoomIn, headShake),
 * namespaced `sd-anim-*` para no chocar con utilidades y remapeados a la
 * duración/ease del sistema. CSP-safe: ningún JS, solo clases. Respeta
 * prefers-reduced-motion (desactiva todas las animaciones).
 *
 * Uso: agregar `.sd-anim` + una variante a un elemento, p. ej.
 *   <div class="sd-anim sd-anim--zoom-in"> … </div>
 */

:root {
  --sd-anim-duration: 0.45s;
  --sd-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes sdFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sdFadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sdZoomIn {
  from { opacity: 0; transform: scale3d(0.85, 0.85, 0.85); }
  50% { opacity: 1; }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes sdHeadShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); }
}

.sd-anim {
  animation-duration: var(--sd-anim-duration);
  animation-fill-mode: both;
  animation-timing-function: var(--sd-anim-ease);
}

.sd-anim--fade-in { animation-name: sdFadeIn; }
.sd-anim--fade-in-up { animation-name: sdFadeInUp; }
.sd-anim--zoom-in { animation-name: sdZoomIn; }
.sd-anim--shake {
  animation-name: sdHeadShake;
  animation-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .sd-anim,
  .sd-anim--fade-in,
  .sd-anim--fade-in-up,
  .sd-anim--zoom-in,
  .sd-anim--shake {
    animation: none !important;
  }
}