/**
 * StoriesWP - Animations
 * Seletores com #storieswp-viewer para consistência com stories-viewer.css
 *
 * NOTA: transition e width das barras de progresso são controlados
 * exclusivamente via JS inline (startProgress, pause, resume).
 * NÃO adicionar regras CSS para .animating/.completed/.reset aqui
 * pois conflitam com !important do stories-viewer.css.
 */

/* === Circle pulse animation (optional, on hover) === */
@keyframes storieswp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
}

/* === Story slide in === */
@keyframes storieswp-slideIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#storieswp-viewer .storieswp-viewer-content > img,
#storieswp-viewer .storieswp-viewer-content > video {
    animation: storieswp-slideIn 0.3s ease-out !important;
}

/* === Viewer open animation === */
@keyframes storieswp-viewerOpen {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#storieswp-viewer.storieswp-viewer-overlay.active .storieswp-viewer-wrapper {
    animation: storieswp-viewerOpen 0.3s ease-out !important;
}

/* === CTA slide up === */
@keyframes storieswp-ctaSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#storieswp-viewer .storieswp-viewer-cta {
    animation: storieswp-ctaSlideUp 0.4s ease-out 0.2s both !important;
}