/* ============================================
   ANIMATIONS & TRANSITIONS
   Animaciones fluidas estilo iOS
   ============================================ */

/* ===== iOS Easing Functions ===== */
.ease-ios {
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ===== Fade Animations ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn var(--transition-base) ease-in-out;
}

.fade-out {
    animation: fadeOut var(--transition-base) ease-in-out;
}

/* ===== Slide Animations ===== */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-up {
    animation: slideUp var(--transition-slow) cubic-bezier(0.19, 1, 0.22, 1);
}

.slide-down {
    animation: slideDown var(--transition-slow) cubic-bezier(0.19, 1, 0.22, 1);
}

/* ===== Scale Animations ===== */
@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-in {
    animation: scaleIn var(--transition-base) cubic-bezier(0.19, 1, 0.22, 1);
}

/* ===== Pulse Animation ===== */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ===== Ping Animation (para indicadores) ===== */
@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ===== Spin Animation ===== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ===== Bounce Animation ===== */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.bounce {
    animation: bounce 1s infinite;
}

/* ===== Hover Effects ===== */
.hover-lift {
    transition: transform var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ===== Active/Pressed Effect (iOS-like) ===== */
.active-scale {
    transition: transform var(--transition-fast);
}

.active-scale:active {
    transform: scale(0.95);
}

/* ===== Loading Skeleton ===== */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 468px 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}