/* ==========================================================================
   MUSCLE STATION - ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* Fade In and Slide Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gentle Floating Effect for Ingredients / Badges */
@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(1.5deg);
    }
}

@keyframes floatReverse {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(10px) rotate(-1.5deg);
    }
}

/* Subtle Glowing Pulse */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(200, 131, 39, 0.25);
    }
    50% {
        box-shadow: 0 0 35px rgba(200, 131, 39, 0.55);
    }
}

/* Shimmer Loading / Accent Bar */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Infinite Marquee Loop */
@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Slider Progress Bar Fill */
@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* Spin subtle */
@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Utility Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.7s var(--ease-spring) forwards;
}

.floating-elem-1 {
    animation: floatSlow 6s ease-in-out infinite;
}

.floating-elem-2 {
    animation: floatReverse 7s ease-in-out infinite;
}

.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* Smooth Interactive Hover Utilities */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* Shine overlay on cards */
.shine-hover {
    position: relative;
    overflow: hidden;
}

.shine-hover::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    transform: rotate(25deg);
    transition: all 0.75s ease-out;
    pointer-events: none;
}

.shine-hover:hover::after {
    left: 140%;
}