/* Animations - Josep CC Design System */

/* Gradient Animations */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gradient-pulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Scan Line Effect */
@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes scan-horizontal {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100vw); }
}

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

@keyframes bounce-gentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

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

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 107, 151, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 107, 151, 0.6);
    }
}

/* Fade Animations */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@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); 
    }
}

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

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

/* Rotation Animations */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* Glitch Effects */
@keyframes glitch-1 {
    0%, 14%, 15%, 49%, 50%, 99%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    15%, 49% {
        opacity: 1;
        transform: translateX(-2px);
    }
}

@keyframes glitch-2 {
    0%, 19%, 20%, 44%, 45%, 99%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    20%, 44% {
        opacity: 1;
        transform: translateX(2px);
    }
}

@keyframes glitch-3 {
    0%, 24%, 25%, 39%, 40%, 99%, 100% {
        opacity: 0;
        transform: translateY(0);
    }
    25%, 39% {
        opacity: 1;
        transform: translateY(-1px);
    }
}

/* Typing Animation */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--primary); }
}

/* Slide Animations */
@keyframes slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

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

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

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

/* Wiggle Animation */
@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

/* Utility Animation Classes */
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-bounce-gentle { animation: bounce-gentle 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-spin-slow { animation: spin-slow 3s linear infinite; }
.animate-ping { animation: pulse 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-wiggle { animation: wiggle 1s ease-in-out; }

/* Hover Animation Classes */
.hover-lift { transition: transform var(--transition-normal); }
.hover-lift:hover { transform: translateY(-5px); }

.hover-lift-gentle { transition: transform var(--transition-normal); }
.hover-lift-gentle:hover { transform: translateY(-2px); }

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

.hover-scale-sm { transition: transform var(--transition-normal); }
.hover-scale-sm:hover { transform: scale(1.02); }

.hover-rotate { transition: transform var(--transition-normal); }
.hover-rotate:hover { transform: rotate(3deg); }

.hover-glow { transition: box-shadow var(--transition-normal); }
.hover-glow:hover { box-shadow: var(--shadow-hover); }

/* Loading States */
.loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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