/* Animações Premium */

/* Fade in suave para elementos da página */
.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Animações para cards de projetos */
.project-card {
    animation: slideInFromBottom 0.6s ease-out forwards;
}

.project-card:nth-child(1) { animation-delay: 0.1s; opacity: 0; }
.project-card:nth-child(2) { animation-delay: 0.2s; opacity: 0; }
.project-card:nth-child(3) { animation-delay: 0.3s; opacity: 0; }
.project-card:nth-child(4) { animation-delay: 0.4s; opacity: 0; }
.project-card:nth-child(5) { animation-delay: 0.5s; opacity: 0; }
.project-card:nth-child(6) { animation-delay: 0.6s; opacity: 0; }
.project-card:nth-child(7) { animation-delay: 0.7s; opacity: 0; }
.project-card:nth-child(8) { animation-delay: 0.8s; opacity: 0; }
.project-card:nth-child(9) { animation-delay: 0.9s; opacity: 0; }
.project-card:nth-child(10) { animation-delay: 1s; opacity: 0; }
.project-card:nth-child(11) { animation-delay: 1.1s; opacity: 0; }
.project-card:nth-child(12) { animation-delay: 1.2s; opacity: 0; }

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

/* Animações para skills */
.skill-item {
    animation: popIn 0.5s ease-out forwards;
}

.skill-item:nth-child(1) { animation-delay: 0.05s; opacity: 0; }
.skill-item:nth-child(2) { animation-delay: 0.1s; opacity: 0; }
.skill-item:nth-child(3) { animation-delay: 0.15s; opacity: 0; }
.skill-item:nth-child(4) { animation-delay: 0.2s; opacity: 0; }
.skill-item:nth-child(5) { animation-delay: 0.25s; opacity: 0; }
.skill-item:nth-child(6) { animation-delay: 0.3s; opacity: 0; }
.skill-item:nth-child(7) { animation-delay: 0.35s; opacity: 0; }
.skill-item:nth-child(8) { animation-delay: 0.4s; opacity: 0; }
.skill-item:nth-child(9) { animation-delay: 0.45s; opacity: 0; }
.skill-item:nth-child(10) { animation-delay: 0.5s; opacity: 0; }
.skill-item:nth-child(11) { animation-delay: 0.55s; opacity: 0; }
.skill-item:nth-child(12) { animation-delay: 0.6s; opacity: 0; }
.skill-item:nth-child(13) { animation-delay: 0.65s; opacity: 0; }

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Efeito de brilho nos botões */
@keyframes buttonShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Pulse suave para FAB - REMOVIDO */

/* Gradiente animado para títulos */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.section-title {
    background-size: 200% auto;
}

/* Efeito de hover suave para links */
a {
    position: relative;
}

/* Animação de entrada para o modal */
@keyframes modalBackdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal.active {
    animation: modalBackdropFadeIn 0.3s ease-out;
}

/* Floating animation para profile picture */
@keyframes floating {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.profile-picture {
    animation: floating 3s ease-in-out infinite;
}

.profile-picture:hover {
    animation: none;
}

/* Efeito de digitação para texto (opcional) */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Animação de loading suave */
@keyframes shimmerLoading {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Efeito de ripple para botões */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Animação para elementos ao rolar a página */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efeito de parallax suave */
@keyframes parallaxMove {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

/* Glowing effect para hover em cards */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
    }
}