/* IPACK.LK Custom Keyframe Animations & Micro-interactions */

/* 1. Keyframes definitions */
@keyframes marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        transform: scale(1);
    }
}

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

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

@keyframes heartbeat {
    0% { transform: scale(1); }
    20% { transform: scale(1.2); }
    40% { transform: scale(1); }
    60% { transform: scale(1.2); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* 2. Utility animation classes */
.hover-lift {
    transition: var(--transition);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

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

.hover-glow {
    transition: var(--transition);
}
.hover-glow:hover {
    box-shadow: 0 8px 30px rgba(0, 122, 255, 0.35);
}

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

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

.animate-heartbeat {
    animation: heartbeat 1.2s ease-in-out;
}

/* Skeleton loader shimmer effect */
.skeleton-loading {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    display: inline-block;
    position: relative;
    animation: shimmer 1.5s linear infinite forwards;
}

.transition-slow {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.transition-medium {
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.transition-fast {
    transition: all 0.15s ease-out;
}