/* =========================================
   ANIMAÇÕES SUAVES - TRANSFORMS APENAS NOS CARDS
   Transforms em cards individuais NÃO quebram position:fixed
   Apenas transforms em containers pais (body, main) quebram
   ========================================= */

/* Animações mais suaves para entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classes de animação mais suaves */
.animate-slide-in-left,
.animate-slide-in-right,
.animate-slide-in-up {
    animation: fadeInUp 0.4s ease-out forwards !important;
}

.animate-scale-in {
    animation: fadeIn 0.3s ease-out forwards !important;
}

.animate-bounce-in-left,
.animate-bounce-in-right {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.animate-slide-in-scale {
    animation: fadeInUp 0.4s ease-out forwards !important;
}

/* Delays mais rápidos para projetos */
.project-card:nth-child(1) {
    animation-delay: 0.05s !important;
}

.project-card:nth-child(2) {
    animation-delay: 0.1s !important;
}

.project-card:nth-child(3) {
    animation-delay: 0.15s !important;
}

.project-card:nth-child(4) {
    animation-delay: 0.2s !important;
}

.project-card:nth-child(5) {
    animation-delay: 0.25s !important;
}

.project-card:nth-child(6) {
    animation-delay: 0.3s !important;
}

.project-card:nth-child(7) {
    animation-delay: 0.35s !important;
}

.project-card:nth-child(8) {
    animation-delay: 0.4s !important;
}

/* Cards de projeto modern (projects.html) */
.project-card-modern {
    transition: all 0.3s ease !important;
    transform: translateY(15px) !important;
    opacity: 0;
}

.project-card-modern.animate-fade-in,
.project-card-modern.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.project-card-modern:hover {
    transform: translateY(-5px) scale(1.01) !important;
    border-color: #22704a !important;
    box-shadow: 0 10px 25px rgba(26, 77, 46, 0.3) !important;
}

/* States iniciais mais suaves */
.skill-cards>div,
.project-card {
    opacity: 0 !important;
    transform: translateY(15px) !important;
}

/* Experience cards não devem começar invisíveis */
#experience .bg-white,
#experience-personal .bg-white {
    opacity: 1 !important;
    transform: none !important;
}

.education-card {
    opacity: 0 !important;
    transform: translateY(15px) !important;
}

.skill-cards>div.animate-fade-in,
.project-card.animate-fade-in,
.education-card.animate-fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.4s ease-out !important;
}

/* Hover effects mais sutis */
.skill-cards>div:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 20px rgba(26, 77, 46, 0.3) !important;
    transition: all 0.3s ease !important;
}

.project-card:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 10px 20px rgba(26, 77, 46, 0.3) !important;
    transition: all 0.3s ease !important;
}

.project-card:hover img {
    transform: scale(1.05) !important;
    filter: brightness(1.1) contrast(1.05) !important;
}

#experience .bg-white:hover,
#experience-personal .bg-white:hover {
    transform: translateX(8px) scale(1.01) !important;
    box-shadow: 0 5px 15px rgba(26, 77, 46, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Experience Cards - Animação alternada mais suave */
#experience .bg-white,
#experience-personal .bg-white {
    opacity: 1 !important;
    animation: none !important;
}

#experience .bg-white:nth-child(odd),
#experience .bg-white:nth-child(even),
#experience-personal .bg-white:nth-child(odd),
#experience-personal .bg-white:nth-child(even) {
    opacity: 1 !important;
    animation: none !important;
}

/* Animação de página - SEM TRANSFORM (pode ser container) */
.page-transition {
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
}

/* Responsive - ainda mais suave em mobile */
@media (max-width: 768px) {

    .animate-slide-in-left,
    .animate-slide-in-right {
        animation: fadeInUp 0.3s ease-out forwards !important;
    }

    .skill-cards>div:hover {
        transform: translateY(-3px) scale(1.01) !important;
    }

    .project-card:hover,
    .project-card-modern:hover {
        transform: translateY(-3px) scale(1.005) !important;
    }

    #experience .bg-white:hover {
        transform: translateX(5px) !important;
    }
}