/* =========================================================
   Alter Pixel Store — animations.css
   Keyframes, transitions, micro-animations
   ========================================================= */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

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

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

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 133, 0.15); }
    50%      { box-shadow: 0 0 45px 6px rgba(255, 0, 133, 0.35); }
}

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

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

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

/* ── Intersection Observer animated elements ─────────────── */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-animate="fade-up"].ap-animated {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="count"] {
    animation: countUp .6s ease both;
}



/* ── Add to cart button loading state ────────────────────── */
.ap-btn.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    margin-left: .375rem;
}

/* ── Card entrance animation ─────────────────────────────── */
.ap-product-card,
.ap-post-card,
.ap-cat-card,
.ap-why__card,
.ap-pricing-card {
    animation: fadeInUp .5s ease both;
}

/* Stagger delays for grids */
.ap-products-grid .ap-product-card:nth-child(1),
.ap-blog-grid .ap-post-card:nth-child(1),
.ap-categories__grid .ap-cat-card:nth-child(1),
.ap-why__grid .ap-why__card:nth-child(1) { animation-delay: 0ms; }

.ap-products-grid .ap-product-card:nth-child(2),
.ap-blog-grid .ap-post-card:nth-child(2),
.ap-categories__grid .ap-cat-card:nth-child(2),
.ap-why__grid .ap-why__card:nth-child(2) { animation-delay: 60ms; }

.ap-products-grid .ap-product-card:nth-child(3),
.ap-blog-grid .ap-post-card:nth-child(3),
.ap-categories__grid .ap-cat-card:nth-child(3),
.ap-why__grid .ap-why__card:nth-child(3) { animation-delay: 120ms; }

.ap-products-grid .ap-product-card:nth-child(4),
.ap-categories__grid .ap-cat-card:nth-child(4),
.ap-why__grid .ap-why__card:nth-child(4) { animation-delay: 180ms; }

.ap-products-grid .ap-product-card:nth-child(n+5) { animation-delay: 240ms; }

/* ── Pricing card popular pulse ──────────────────────────── */
.ap-pricing-card--popular {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* ── Page transition utility ─────────────────────────────── */
.ap-page-enter {
    animation: fadeIn .3s ease both;
}

/* ── Mobile menu animation ───────────────────────────────── */
.ap-mobile-menu__list li {
    animation: slideInRight .3s ease both;
}
.ap-mobile-menu__list li:nth-child(1) { animation-delay: 50ms; }
.ap-mobile-menu__list li:nth-child(2) { animation-delay: 100ms; }
.ap-mobile-menu__list li:nth-child(3) { animation-delay: 150ms; }
.ap-mobile-menu__list li:nth-child(4) { animation-delay: 200ms; }
.ap-mobile-menu__list li:nth-child(5) { animation-delay: 250ms; }
.ap-mobile-menu__list li:nth-child(6) { animation-delay: 300ms; }

/* ── Reduce motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .ap-hero__canvas { display: none; }
}