/* ==========================================================
  ARX Animation Library
  Prefijo: arx-
  Versión: 0.1
   ========================================================== */

/* ==========================================================
  1. Configuración Base
   ========================================================== */

:root {
    --arx-dur-1: 120ms;
    --arx-dur-2: 240ms;
    --arx-dur-3: 480ms;
    --arx-dur-4: 800ms;
    --arx-dur-5: 3200ms;

    --arx-ease-standard: ease;
    --arx-ease-in: ease-in;
    --arx-ease-out: ease-out;
    --arx-ease-in-out: ease-in-out;
    
    --arx-slide-distance: 20px;
}

.arx-delay-xs-1 { animation-delay: 80ms; }
.arx-delay-xs-2 { animation-delay: 160ms; }
.arx-delay-xs-3 { animation-delay: 240ms; }
.arx-delay-xs-4 { animation-delay: 320ms; }
.arx-delay-xs-5 { animation-delay: 400ms; }
.arx-delay-xs-6 { animation-delay: 480ms; }
.arx-delay-xs-7 { animation-delay: 560ms; }

/* ==========================================================
  2. Clase Base
   ========================================================== */

.arx {
    animation-duration: var(--arx-dur-2);
    animation-fill-mode: both;
    animation-timing-function: var(--arx-ease-standard);
}

/* ==========================================================
  3. Utilidades de Duración
   ========================================================== */

.arx-dur-1 { animation-duration: var(--arx-dur-1); }
.arx-dur-2 { animation-duration: var(--arx-dur-2); }
.arx-dur-3 { animation-duration: var(--arx-dur-3); }
.arx-dur-4 { animation-duration: var(--arx-dur-4); }
.arx-dur-5 { animation-duration: var(--arx-dur-5); }

/* ==========================================================
  4. Delay
   ========================================================== */

.arx-delay-1 { animation-delay: 100ms; }
.arx-delay-2 { animation-delay: 200ms; }
.arx-delay-3 { animation-delay: 400ms; }
.arx-delay-4 { animation-delay: 800ms; }
.arx-delay-5 { animation-delay: 3200ms; }

/* ==========================================================
  5. Easing
   ========================================================== */

.arx-ease-in { animation-timing-function: var(--arx-ease-in); }
.arx-ease-out { animation-timing-function: var(--arx-ease-out); }
.arx-ease-in-out { animation-timing-function: var(--arx-ease-in-out); }

/* ==========================================================
  6. Iteraciones
   ========================================================== */

.arx-once { animation-iteration-count: 1; }
.arx-loop { animation-iteration-count: infinite; }

/* ==========================================================
  7. Accesibilidad
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .arx {
        animation: none !important;
    }
}
/* ==========================================================
  8. Keyframes Básicos
   ========================================================== */

@keyframes arx-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.arx-fade-in {
    animation-name: arx-fade-in;
}

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

.arx-fade-out {
    animation-name: arx-fade-out;
}
/* ==========================================================
  9. SLIDE UP
   ========================================================== */

@keyframes arx-slide-up {
    from {
        transform: translateY(var(--arx-slide-distance));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.arx-slide-up {
    animation-name: arx-slide-up;
}
@keyframes arx-slide-down {
    from {
        transform: translateY(calc(var(--arx-slide-distance) * -1));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.arx-slide-down {
    animation-name: arx-slide-down;
}
@keyframes arx-slide-left {
    from {
        transform: translateX(var(--arx-slide-distance));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.arx-slide-left {
    animation-name: arx-slide-left;
}
@keyframes arx-slide-right {
    from {
        transform: translateX(calc(var(--arx-slide-distance) * -1));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.arx-slide-right {
    animation-name: arx-slide-right;
}
@keyframes arx-scale-in {
    from {
        transform: scale(.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.arx-scale-in {
    animation-name: arx-scale-in;
}
@keyframes arx-scale-out {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(.9);
        opacity: 0;
    }
}

.arx-scale-out {
    animation-name: arx-scale-out;
}
@keyframes arx-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.arx-pulse {
    animation-name: arx-pulse;
}
@keyframes arx-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

.arx-shake {
    animation-name: arx-shake;
}
@keyframes arx-glow {
    0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { box-shadow: 0 0 15px rgba(0,0,0,.2); }
    100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}

.arx-glow {
    animation-name: arx-glow;
}
/* ==========================================================
  9.1 SLIDE (Dinámico)
   ========================================================== */
@keyframes arx-slide-up {
    from {
        transform: translateY(var(--arx-slide-distance));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes arx-slide-down {
    from {
        transform: translateY(calc(var(--arx-slide-distance) * -1));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes arx-slide-left {
    from {
        transform: translateX(var(--arx-slide-distance));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes arx-slide-right {
    from {
        transform: translateX(calc(var(--arx-slide-distance) * -1));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* ==========================================================
  10. BOUNCE (Attention)
   ========================================================== */

@keyframes arx-bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-12px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

.arx-bounce {
    animation-name: arx-bounce;
}
/* ==========================================================
  10.1 BOUNCE IN
   ========================================================== */

@keyframes arx-bounce-in {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }
    60% {
        transform: translateY(-10px);
        opacity: 1;
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

.arx-bounce-in {
    animation-name: arx-bounce-in;
}
/* ==========================================================
    10.2 BOUNCE OUT
   ========================================================== */

@keyframes arx-bounce-out {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    20% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(60px);
        opacity: 0;
    }
}

.arx-bounce-out {
    animation-name: arx-bounce-out;
}
/* =========================
    11 ARX POSITION
========================= */

.arx-wrap {
    position: relative;
    width: 100%;
}

.arx-pos {
    position: absolute;
}

.arx-anchor-center {
    transform: translate(-50%, -50%);
}
/* ==========================================================
  12. SOFT RISE
   ========================================================== */

@keyframes arx-soft-rise {
    from {
        transform: translateY(14px) scale(.98);
        opacity: 0;
        filter: blur(2px);
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

.arx-soft-rise {
    animation-name: arx-soft-rise;
}

@keyframes arx-hover-bounce-up {
    0% {
        transform: translateY(0);
    }
    35% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(3px);
    }
    80% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes arx-coin-spin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* ==========================================================
  13. Reveal on scroll
   ========================================================== */

.arx-reveal {
    opacity: 0;
}

.arx-reveal.is-visible {
    opacity: 1;
}