/* ============================================
   CST Design System - Animations
   Animacoes compartilhadas do modulo CST
   ============================================ */

/* === CARD FADE IN === */
/* Animacao de entrada de cards com escala e opacidade */
@keyframes cstCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cst-animate-card {
    animation: cstCardFadeIn 0.4s ease-out forwards;
    opacity: 0;
}

/* === PULSE === */
/* Indicador de status pulsante */
@keyframes cstPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(55, 125, 125, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(55, 125, 125, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(55, 125, 125, 0);
    }
}

.cst-pulse {
    animation: cstPulse 2s infinite;
}

.cst-pulse-success {
    animation: cstPulseSuccess 2s infinite;
}

@keyframes cstPulseSuccess {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

.cst-pulse-danger {
    animation: cstPulseDanger 2s infinite;
}

@keyframes cstPulseDanger {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

/* === SLIDE IN === */
/* Entrada lateral */
@keyframes cstSlideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

.cst-slide-in-right {
    animation: cstSlideInRight 0.3s ease-out forwards;
}

.cst-slide-in-left {
    animation: cstSlideInLeft 0.3s ease-out forwards;
}

.cst-slide-in-up {
    animation: cstSlideInUp 0.3s ease-out forwards;
}

/* === FADE IN === */
/* Aparecimento suave */
@keyframes cstFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.cst-fade-in {
    animation: cstFadeIn 0.3s ease-out forwards;
}

/* === SCALE IN === */
/* Escala com opacidade */
@keyframes cstScaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cst-scale-in {
    animation: cstScaleIn 0.2s ease-out forwards;
}

/* === BOUNCE IN === */
/* Entrada com bounce */
@keyframes cstBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cst-bounce-in {
    animation: cstBounceIn 0.5s ease-out forwards;
}

/* === SHIMMER/SKELETON === */
/* Efeito de carregamento */
@keyframes cstShimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}

.cst-skeleton {
    background: var(--cst-skeleton-gradient);
    background-size: 200px 100%;
    animation: cstShimmer 1.5s infinite;
}

/* === PROGRESS BAR FILL === */
/* Preenchimento de barra de progresso */
@keyframes cstProgressFill {
    from {
        width: 0;
    }
}

.cst-progress-animate {
    animation: cstProgressFill 0.6s ease-out forwards;
}

/* === NUMBER COUNT UP === */
/* Animacao de contagem com entrada */
@keyframes cstCountUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cst-count-up {
    animation: cstCountUp 0.4s ease-out forwards;
}

/* === ICON PULSE === */
/* Pulsacao suave para icones de destaque */
@keyframes cstIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.cst-icon-pulse {
    animation: cstIconPulse 2s ease-in-out infinite;
}

/* === HOVER LIFT === */
/* Elevacao no hover */
.cst-hover-lift {
    transition: transform var(--cst-transition-normal), box-shadow var(--cst-transition-normal);
}

.cst-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--cst-shadow-lg);
}

/* === HOVER SCALE === */
/* Escala sutil no hover */
.cst-hover-scale {
    transition: transform var(--cst-transition-fast);
}

.cst-hover-scale:hover {
    transform: scale(1.02);
}

/* === ROTATION === */
/* Rotacao (para icones de loading, etc) */
@keyframes cstSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cst-spin {
    animation: cstSpin 1s linear infinite;
}

/* === STAGGER DELAY UTILITIES === */
/* Classes para delays escalonados */
.cst-delay-1 { animation-delay: calc(var(--cst-anim-delay-step) * 1); }
.cst-delay-2 { animation-delay: calc(var(--cst-anim-delay-step) * 2); }
.cst-delay-3 { animation-delay: calc(var(--cst-anim-delay-step) * 3); }
.cst-delay-4 { animation-delay: calc(var(--cst-anim-delay-step) * 4); }
.cst-delay-5 { animation-delay: calc(var(--cst-anim-delay-step) * 5); }
.cst-delay-6 { animation-delay: calc(var(--cst-anim-delay-step) * 6); }
.cst-delay-7 { animation-delay: calc(var(--cst-anim-delay-step) * 7); }
.cst-delay-8 { animation-delay: calc(var(--cst-anim-delay-step) * 8); }
.cst-delay-9 { animation-delay: calc(var(--cst-anim-delay-step) * 9); }
.cst-delay-10 { animation-delay: calc(var(--cst-anim-delay-step) * 10); }

/* === MEDAL SHINE === */
/* Brilho para badges de medalha */
@keyframes cstMedalShine {
    0% {
        background-position: -100px;
    }
    100% {
        background-position: 200px;
    }
}

.cst-medal-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--cst-white-alpha-40) 50%,
        transparent 100%
    );
    background-size: 100px 100%;
    background-repeat: no-repeat;
    animation: cstMedalShine 3s infinite;
    border-radius: inherit;
}

/* === REDUCE MOTION === */
/* Respeita preferencias do usuario */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}