/* Animations pour la section Home */

/* Animation de la badge-card */
.badge-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animation du status-light */
.status-light {
    opacity: 0;
    animation: pulse 2.5s infinite, fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s;
}

/* Animation du nom */
.name {
    opacity: 0;
    transform: translateX(-20px);
    animation: fadeInLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
}

/* Animation du titre */
.title {
    opacity: 0;
    transform: translateX(20px);
    animation: fadeInRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.2s;
}

/* Animation de la description */
.description p {
    opacity: 0;
    transform: translateY(10px);
}

.description p:nth-child(1) {
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.6s;
}

.description p:nth-child(2) {
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.9s;
}

.description p:nth-child(3) {
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 2.2s;
}

/* Animation pour le Header */
header {
    animation: slideInDown 0.8s ease forwards;
}

.logo {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards 0.4s;
}

.logo-text {
    display: inline-block;
    animation: glowPulse 2s infinite;
}

.nav-links {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards 0.6s;
}

.nav-link {
    transform: translateY(-10px);
    animation: fadeInDown 0.5s ease forwards;
    animation-delay: calc(var(--nav-item-index, 0) * 0.1s);
}

.nav-link:nth-child(1) {
    animation-delay: 0.7s;
}

.nav-link:nth-child(2) {
    animation-delay: 0.8s;
}

.nav-link:nth-child(3) {
    animation-delay: 0.9s;
}

.nav-link:nth-child(4) {
    animation-delay: 1s;
}

.nav-link:nth-child(5) {
    animation-delay: 1.1s;
}

.nav-link:nth-child(6) {
    animation-delay: 1.2s;
}

/* Animations pour la section Compétences */
.radar-chart {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.radar-grid {
    transform-origin: center;
    animation: rotateRadar 60s linear infinite;
}

.data-point {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.data-point:nth-child(1) { animation-delay: 0.8s; }
.data-point:nth-child(2) { animation-delay: 1.0s; }
.data-point:nth-child(3) { animation-delay: 1.2s; }
.data-point:nth-child(4) { animation-delay: 1.4s; }

/* Animation pour le radar dans la section home */
.radar-chart {
    opacity: 0;
    transform: scale(0.8);
    animation: radarAppear 1s ease forwards;
}

@keyframes radarAppear {
    0% {
        opacity: 0;
        transform: scale(0.8);
        filter: brightness(0.5) blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0);
    }
}

/* Animation améliorée pour la partie droite du hero */
.hero-visual {
    opacity: 0;
    transform: translateX(50px);
    animation: heroVisualEntrance 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards 2.4s;
}

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

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

@keyframes glowPulse {
    0% {
        text-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(46, 204, 113, 0.8);
    }
    100% {
        text-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotateRadar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroVisualEntrance {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation pour les titres h3 de la section compétences */
.competences h3 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.competences h3.visible {
    opacity: 1;
    transform: translateY(0);
}