/*
 * AssamWeb Store - Animations & Keyframes
 * Location: public_html/store/assets/css/animation.css
 * 
 * Defines smooth, hardware-accelerated animations for the premium SaaS aesthetic.
 */

/* ==========================================================================
   Keyframes
   ========================================================================== */

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

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

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

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 107, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0);
    }
}

@keyframes floatSmooth {
    0% {
        transform: translateY(0px) rotateY(-15deg);
    }
    50% {
        transform: translateY(-8px) rotateY(-15deg);
    }
    100% {
        transform: translateY(0px) rotateY(-15deg);
    }
}

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

/* ==========================================================================
   Animation Utility Classes
   ========================================================================== */

.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-up {
    animation: slideUpFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-down {
    animation: slideDownFade 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Specific component animations */

.shadow-cta-glow {
    animation: pulseGlow 2.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

.book-cover-wrapper .book-cover-img {
    /* Merges the 3D rotation from style.css with a subtle floating effect */
    animation: floatSmooth 6s ease-in-out infinite;
}

/* Staggered entrance for lists or grid items (requires JS to add the visible class, or CSS delays) */
.stagger-1 { animation-delay: 100ms; }
.stagger-2 { animation-delay: 200ms; }
.stagger-3 { animation-delay: 300ms; }
.stagger-4 { animation-delay: 400ms; }
.stagger-5 { animation-delay: 500ms; }

/* 
 * Skeleton loading state (shimmer effect) 
 * Can be used if dynamic data takes time to load 
 */
.skeleton-loading {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, #f6f7f8 4%, #edeef1 25%, #f6f7f8 36%);
    background-size: 1000px 100%;
}

/* Smooth reveal for accordion/collapse elements */
.collapsing {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}