/* ===================================
   GLOBAL FITNESS v3.0 - Animations
   Animaciones sutiles y profesionales
   ================================= */

/* ===================================
   ANIMACIONES DE ENTRADA
   ================================= */

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

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================
   ANIMACIONES DE BOUNCE
   ================================= */

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* ===================================
   ANIMACIONES DE PULSE
   ================================= */

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

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 68, 68, 0);
    }
}

@keyframes pulseRing {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ===================================
   ANIMACIONES DE SHAKE
   ================================= */

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

@keyframes shakeY {
    0%, 100% {
        transform: translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateY(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateY(10px);
    }
}

/* ===================================
   ANIMACIONES DE ROTATE
   ================================= */

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

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-200deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

/* ===================================
   ANIMACIONES DE SHIMMER/SHINE
   ================================= */

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===================================
   ANIMACIONES DE FLOAT
   ================================= */

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

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

/* ===================================
   ANIMACIONES DE SLIDE
   ================================= */

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===================================
   ANIMACIONES DE ZOOM
   ================================= */

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* ===================================
   ANIMACIONES DE FLIP
   ================================= */

@keyframes flipIn {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}

@keyframes flip {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(180deg);
    }
}

/* ===================================
   ANIMACIONES DE TYPING
   ================================= */

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* ===================================
   CLASES DE UTILIDAD
   ================================= */

.animate-fadeIn {
    animation: fadeIn 0.6s ease-in-out;
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fadeInDown {
    animation: fadeInDown 0.6s ease-out;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.6s ease-out;
}

.animate-fadeInRight {
    animation: fadeInRight 0.6s ease-out;
}

.animate-scaleIn {
    animation: scaleIn 0.4s ease-out;
}

.animate-bounce {
    animation: bounce 1s ease-in-out;
}

.animate-bounceIn {
    animation: bounceIn 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-pulseGlow {
    animation: pulseGlow 2s ease-in-out infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-shakeY {
    animation: shakeY 0.5s ease-in-out;
}

.animate-rotate {
    animation: rotate 2s linear infinite;
}

.animate-rotateIn {
    animation: rotateIn 0.6s ease-out;
}

.animate-shimmer {
    animation: shimmer 2s linear infinite;
}

.animate-gradientShift {
    animation: gradientShift 3s ease infinite;
    background-size: 200% 200%;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-floatSlow {
    animation: floatSlow 6s ease-in-out infinite;
}

.animate-slideInLeft {
    animation: slideInLeft 0.6s ease-out;
}

.animate-slideInRight {
    animation: slideInRight 0.6s ease-out;
}

.animate-slideInUp {
    animation: slideInUp 0.6s ease-out;
}

.animate-slideInDown {
    animation: slideInDown 0.6s ease-out;
}

.animate-zoomIn {
    animation: zoomIn 0.4s ease-out;
}

.animate-zoomOut {
    animation: zoomOut 0.4s ease-out;
}

.animate-flipIn {
    animation: flipIn 0.6s ease-out;
}

/* ===================================
   DELAYS
   ================================= */

.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }
.animate-delay-600 { animation-delay: 0.6s; }
.animate-delay-700 { animation-delay: 0.7s; }
.animate-delay-800 { animation-delay: 0.8s; }
.animate-delay-900 { animation-delay: 0.9s; }
.animate-delay-1000 { animation-delay: 1s; }

/* ===================================
   DURACIONES
   ================================= */

.animate-fast { animation-duration: 0.3s; }
.animate-normal { animation-duration: 0.6s; }
.animate-slow { animation-duration: 1s; }
.animate-slower { animation-duration: 2s; }

/* ===================================
   INFINITE
   ================================= */

.animate-infinite { animation-iteration-count: infinite; }

/* ===================================
   HOVER ANIMATIONS
   ================================= */

.hover-lift:hover {
    transform: translateY(-4px);
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.3);
    transition: box-shadow 0.3s ease;
}

.hover-gradient {
    background-size: 200% 200%;
    transition: background-position 0.3s ease;
}

.hover-gradient:hover {
    background-position: right center;
}

/* ===================================
   LOADING ANIMATIONS
   ================================= */

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top-color: #FF4444;
    border-radius: 50%;
    animation: rotate 0.8s linear infinite;
}

.loading-dots {
    display: flex;
    gap: 8px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: #FF4444;
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.loading-pulse {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FF4444;
    animation: pulseGlow 1.5s ease-in-out infinite;
}

/* ===================================
   SKELETON LOADING
   ================================= */

.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 2rem;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}