/* Typing animation container */
.subtitle-container {
    min-height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

.typing-text {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 600;
    border-right: 3px solid white;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    width: 0;
}

.typing-text.typing-1 {
    animation: typing1 1.1s steps(11) 0.5s forwards,
               blink 0.75s step-end infinite,
               fadeOut 0.4s 1.9s forwards;
}

.typing-text.typing-2 {
    animation: typing2 1.1s steps(12) 2.4s forwards,
               blink 0.75s step-end 2.4s infinite,
               fadeOut 0.4s 3.8s forwards;
}

.typing-text.typing-3 {
    animation: typing3 1s steps(10) 4.3s forwards,
               blink 0.75s step-end 4.3s infinite,
               fadeOut 0.4s 5.6s forwards;
}

.final-titles {
    display: flex;
    gap: 1rem;
    opacity: 0;
    animation: fadeInDown 0.8s 6.6s forwards;
    font-size: 1.5rem;
    font-weight: 600;
    flex-wrap: wrap;
    justify-content: center;
}

.final-title {
    transform: translateY(-20px);
    opacity: 0;
}

.final-title:nth-child(1) {
    animation: slideDown 0.6s 6.6s forwards;
}

.final-title:nth-child(2) {
    animation: slideDown 0.6s 6.8s forwards;
}

.final-title:nth-child(3) {
    animation: slideDown 0.6s 7.1s forwards;
}

/*.final-title:not(:last-child)::after {
    content: " • ";
    margin-left: 1rem;
    opacity: 0.7;
}*/

@keyframes typing1 {
    from { width: 0; opacity: 1; }
    to { width: 10ch; opacity: 1; }
}

@keyframes typing2 {
    from { width: 0; opacity: 1; }
    to { width: 11ch; opacity: 1; }
}

@keyframes typing3 {
    from { width: 0; opacity: 1; }
    to { width: 9ch; opacity: 1; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

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

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

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

/* ======= FRENCH ====== */

/* French version - longer character counts */
.typing-text.fr.typing-1 {
    animation: typing1-fr 1.5s steps(19) 0.5s forwards,
               blink 0.75s step-end infinite,
               fadeOut 0.4s 2.3s forwards;
}

.typing-text.fr.typing-2 {
    animation: typing2-fr 1.1s steps(12) 2.8s forwards,
               blink 0.75s step-end 2.8s infinite,
               fadeOut 0.4s 4.2s forwards;
}

.typing-text.fr.typing-3 {
    animation: typing3-fr 1.1s steps(11) 4.7s forwards,
               blink 0.75s step-end 4.7s infinite,
               fadeOut 0.4s 6.1s forwards;
}

/* French keyframes */
@keyframes typing1-fr {
    from { width: 0; opacity: 1; }
    to { width: 16ch; opacity: 1; }  /* "Analyste de données" = 19 chars */
}

@keyframes typing2-fr {
    from { width: 0; opacity: 1; }
    to { width: 11ch; opacity: 1; }  /* "Web Designer" = 12 chars */
}

@keyframes typing3-fr {
    from { width: 0; opacity: 1; }
    to { width: 9ch; opacity: 1; }  /* "Aventurier" = 11 chars */
}

/* Adjust final titles timing for French */
.final-title.fr:nth-child(1) {
    animation: slideDown 0.6s 6.6s forwards;
}

.final-title.fr:nth-child(2) {
    animation: slideDown 0.6s 6.9s forwards;
}

.final-title.fr:nth-child(3) {
    animation: slideDown 0.6s 7.2s forwards;
}