/* Micro-animations stylesheet */

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

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

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

@keyframes skeletonShimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: #f6f7f8;
    background-image: linear-gradient(90deg, #f6f7f8 0px, #edeef1 20px, #f6f7f8 40px);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: skeletonShimmer 1.2s ease-in-out infinite;
    border-radius: 4px;
}

.pulse-glow {
    animation: pulseGlow 2s infinite;
}

.follow-heart-anim {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.follow-heart-anim:active {
    transform: scale(1.3);
}