/* === Style général pour la section d'accueil === */

/* Contexte général pour le fond */
#welcome {
    position: relative;
    z-index: 1;
}

/* Overlay clair sur l'image de fond */
#welcome::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    z-index: 5;
    pointer-events: none;
}

/* Assure que le contenu texte passe au-dessus de l’overlay */
#welcome .wpb-content-wrapper {
    position: relative;
    z-index: 10;
}

/* === Animations sur le texte "I'm Axen Lawrence" === */

/* Animation de l'effet fade-in sur le texte */
#welcome .intro-text .top-text {
    color: #fff !important;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.85), /* ombre principale */
        0 0 10px rgba(0, 0, 0, 0.4) !important; /* glow doux */
    font-weight: 700;
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0; /* pour déclenchement */
}

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

/* === Animation Fade et Typing pour le texte animé (Type.js) === */

#typed {
    animation: fadeInText 1s ease-out forwards, typeAnimation 2s steps(15) 1s forwards;
}

/* Animation de fade sur les mots */
@keyframes fadeInText {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Animation de Type.js pour "taper" le texte */
@keyframes typeAnimation {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* Animation de texte qui arrive du bas vers le haut */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Typage avec un léger retard avant l'animation fade === */

#typed {
    animation: fadeInUp 1.5s ease-out forwards, typing 2s steps(10) 1s forwards;
}

/* Animation de texte qui arrive du bas vers le haut */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Typage et fade spécifique pour chaque mot === */
#typed {
    opacity: 0;
    animation: fadeInUp 1.5s ease-out forwards, typing 2s steps(10) 1s forwards;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* === Ajout de style spécifique pour les autres parties === */

#welcome .intro-text .type-wrap b {
    color: #fff !important;  /* Texte blanc */
    text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.8),   /* Ombre plus marquée */
    0 1px 30px rgba(0, 0, 0, 1.0);  /* Ombre très prononcée */
    font-weight: 600;  /* Poids du texte */
    font-family: 'Arial', sans-serif;  /* Police */
    letter-spacing: 1px;  /* Espacement des lettres */
    animation: fadeInUp 1.5s ease-out 0.5s forwards;  /* Animation douce */
    opacity: 0;  /* Commence invisible */
}

#welcome .intro-text .type-wrap {
    opacity: 0;
    animation: fadeInUp 1.5s ease-out forwards;  /* Animation sur la section */
}

/* === Réponse mobile : ajout d'un léger effet fade === */
@media (max-width: 768px) {
    #welcome .intro-text,
    #welcome .intro-text .top-text,
    #welcome .intro-text .type-wrap,
    #welcome .intro-text #typed {
        text-shadow:
          0 1px 2px rgba(0, 0, 0, 0.4),
          0 0 10px rgba(0, 0, 0, 0.6) !important;
    }
}