/* RoPrint — keyframes globales para animaciones reutilizables.
   Todas las duraciones usan tokens y respetan prefers-reduced-motion. */

/* Shimmer para skeleton loaders */
@keyframes rp-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pulse para badges live (calculadora, indicadores activos) */
@keyframes rp-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.15); opacity: 0.6; }
}

/* Pulse glow para el dot del badge "calculadora" */
@keyframes rp-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--rp-brand-lime) 60%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rp-brand-lime) 0%,  transparent); }
}

/* Fade in/out */
@keyframes rp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rp-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Slide entrances suaves (usar en hero/login) */
@keyframes rp-slide-in-left {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes rp-slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes rp-slide-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scale-in para dialogs */
@keyframes rp-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* Brushstroke flotante para el hero del login (rotación sutil ±2°) */
@keyframes rp-brush-drift {
    0%, 100% { transform: rotate(-1deg) translate(0, 0); }
    50%      { transform: rotate(1deg) translate(2px, -2px); }
}

/* Utilidades aplicables sin custom CSS por componente */
.rp-anim-fade-in       { animation: rp-fade-in       var(--rp-motion-base) var(--rp-easing-decelerate) both; }
.rp-anim-slide-in-up   { animation: rp-slide-in-up   var(--rp-motion-base) var(--rp-easing-decelerate) both; }
.rp-anim-slide-in-left { animation: rp-slide-in-left var(--rp-motion-slow) var(--rp-easing-spring)     both; }
.rp-anim-slide-in-right{ animation: rp-slide-in-right var(--rp-motion-slow) var(--rp-easing-spring)    both; }
.rp-anim-scale-in      { animation: rp-scale-in      var(--rp-motion-base) var(--rp-easing-decelerate) both; }