/* ============================================================
   COMMERCE X — ANIMAÇÕES E KEYFRAMES
   ============================================================ */

@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(108,92,231,0.3); }
    50% { box-shadow: 0 4px 36px rgba(108,92,231,0.6); }
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}
@keyframes skeletonPulse {
    0% { background: var(--skeleton); }
    50% { background: var(--skeleton-shine); }
    100% { background: var(--skeleton); }
}
@keyframes floatParticle {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-40px) translateX(20px); }
    50% { transform: translateY(-20px) translateX(-15px); }
    75% { transform: translateY(-50px) translateX(-25px); }
}

/* ---------- REVEAL SCROLL ---------- */
.reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- SKELETON PLACEHOLDERS ---------- */
.skeleton-card {
    background: var(--card-bg); border-radius: var(--radius-lg);
    height: 340px; overflow: hidden; border: 1px solid var(--border);
    animation: skeletonPulse 1.6s infinite;
}
.skeleton-gallery { width: 100%; height: 350px; background: var(--skeleton); border-radius: var(--radius-lg); animation: skeletonPulse 1.6s infinite; }
.skeleton-info { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.skeleton-line { height: 18px; background: var(--skeleton); border-radius: 4px; animation: skeletonPulse 1.6s infinite; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-30 { width: 30%; }