/* Estilos para el contenedor */
/* Esta clase define el contenedor principal que albergará el título animado */
.welcome-container {
    /* Centra el contenido del contenedor horizontalmente */
    text-align: center;
    /* Establece la perspectiva 3D para efectos de profundidad en las animaciones */
    perspective: 1000px;
}

/* Estilos base del título */
/* Esta clase define los estilos principales del elemento que contendrá el texto animado */
.welcome-title {
    /* Define la fuente con Arial Black como primera opción y sans-serif como respaldo */
    font-family: 'Arial Black', sans-serif;
    /* Establece el tamaño de fuente en 2.5 veces el tamaño base del elemento padre */
    font-size: 25px; 
    /* Hace que la fuente sea más gruesa/negrita */
    font-weight: bold;
    /* Define el color del texto como blanco */
    color: #c3b6b6;
    /* Crea una sombra negra semi-transparente desplazada 3px a la derecha, 3px hacia abajo, con desenfoque de 6px */
    text-shadow: 3px 3px 6px rgba(134, 48, 48, 0.3);
    /* Elimina los márgenes externos del título */
    margin: 0;
    /* Hace que el elemento se comporte como bloque pero en línea, permitiendo centrarlo */
    display: inline-block;
}

/* Estilos para cada letra */
/* Aplica estilos a cada elemento span (letra individual) dentro del título */
.welcome-title span {
    /* Hace que cada letra se comporte como bloque en línea para poder animarla individualmente */
    display: inline-block;
    /* Inicia cada letra como invisible (completamente transparente) */
    opacity: 0;
    /* Define cuatro animaciones que se ejecutarán en secuencia:
       1. bounceIn: dura 0.8s con aceleración suave, mantiene el estado final
       2. colorWave: dura 3s con entrada/salida suave, inicia después de 2s, mantiene el estado final
       3. scaleWave: dura 3s con entrada/salida suave, inicia después de 2s, mantiene el estado final
       4. fadeOut: dura 1s con aceleración suave, inicia después de 5s, mantiene el estado final */
    animation: bounceIn 0.8s ease forwards, 
               colorWave 3s ease-in-out 2s forwards,
               scaleWave 3s ease-in-out 2s forwards,
               fadeOut 1s ease 5s forwards;
}

/* Animación de rebote inicial */
/* Define los fotogramas clave para la animación de entrada con efecto rebote */
@keyframes bounceIn {
    /* Estado inicial (0%): letra invisible, 200px arriba, escalada al 30% */
    0% {
        opacity: 0;
        transform: translateY(-200px) scale(0.3);
    }
    /* A mitad de la animación (50%): letra visible, baja 30px de su posición final, escalada al 110% */
    50% {
        opacity: 1;
        transform: translateY(30px) scale(1.1);
    }
    /* Al 70%: rebota hacia arriba 10px, se reduce al 95% */
    70% {
        transform: translateY(-10px) scale(0.95);
    }
    /* Al 85%: rebota ligeramente hacia abajo 5px, escala al 102% */
    85% {
        transform: translateY(5px) scale(1.02);
    }
    /* Estado final (100%): letra visible, en posición original, tamaño normal */
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animación de onda de color */
/* Define la animación que cambia el color y la sombra del texto */
@keyframes colorWave {
    /* Al inicio (0%) y al final (100%): color blanco con sombra negra suave */
    0%, 100% {
        color: #eeebeb;
        text-shadow: 3px 3px 6px rgb(4, 14, 19);
    }
    /* A la mitad (50%): color dorado con resplandor dorado y rojizo */
    50% {
        color: #ffd700;
        text-shadow: 0 0 20px #ffd700, 0 0 30px #ff6b6b;
    }
}

/* Animación de onda de tamaño */
/* Define la animación que hace que las letras se eleven y crezcan */
@keyframes scaleWave {
    /* Al inicio (0%) y final (100%): posición y tamaño normales */
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    /* A la mitad (50%): letra sube 10px y crece al 120% */
    50% {
        transform: translateY(-10px) scale(1.2);
    }
}

/* Animación de desaparición */
/* Define cómo las letras desaparecen al final */
@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 1;  /* Cambiado de 0 a 1 para mantener visible */
        transform: translateX(0) scale(1);  /* Cambiado para mantener en posición original */
    }
}

/* Delays escalonados para cada letra */
/* Cada letra tiene diferentes tiempos de inicio para cada una de las 4 animaciones */
/* El formato es: animation-delay: bounceIn, colorWave, scaleWave, fadeOut */

/* Letra 1: inicia inmediatamente, luego a los 2s, 2s y 5s */
.welcome-title span:nth-child(1) { animation-delay: 0s, 2s, 2s, 5s; }
/* Letra 2: inicia 0.05s después, creando efecto cascada */
.welcome-title span:nth-child(2) { animation-delay: 0.05s, 2.1s, 2.1s, 5.05s; }
/* Letra 3: inicia 0.1s después */
.welcome-title span:nth-child(3) { animation-delay: 0.1s, 2.2s, 2.2s, 5.1s; }
/* Letra 4: inicia 0.15s después */
.welcome-title span:nth-child(4) { animation-delay: 0.15s, 2.3s, 2.3s, 5.15s; }
/* Letra 5: inicia 0.2s después */
.welcome-title span:nth-child(5) { animation-delay: 0.2s, 2.4s, 2.4s, 5.2s; }
/* Letra 6: inicia 0.25s después */
.welcome-title span:nth-child(6) { animation-delay: 0.25s, 2.5s, 2.5s, 5.25s; }
/* Letra 7: inicia 0.3s después */
.welcome-title span:nth-child(7) { animation-delay: 0.3s, 2.6s, 2.6s, 5.3s; }
/* Letra 8: inicia 0.35s después */
.welcome-title span:nth-child(8) { animation-delay: 0.35s, 2.7s, 2.7s, 5.35s; }
/* Letra 9: inicia 0.4s después */
.welcome-title span:nth-child(9) { animation-delay: 0.4s, 2.8s, 2.8s, 5.4s; }
/* Letra 10: inicia 0.45s después */
.welcome-title span:nth-child(10) { animation-delay: 0.45s, 2.9s, 2.9s, 5.45s; }
/* Letra 11: inicia 0.5s después */
.welcome-title span:nth-child(11) { animation-delay: 0.5s, 3s, 3s, 5.5s; }
/* Letra 12: inicia 0.55s después */
.welcome-title span:nth-child(12) { animation-delay: 0.55s, 3.1s, 3.1s, 5.55s; }
/* Letra 13: inicia 0.6s después */
.welcome-title span:nth-child(13) { animation-delay: 0.6s, 3.2s, 3.2s, 5.6s; }
/* Letra 14: inicia 0.65s después */
.welcome-title span:nth-child(14) { animation-delay: 0.65s, 3.3s, 3.3s, 5.65s; }
/* Letra 15: inicia 0.7s después */
.welcome-title span:nth-child(15) { animation-delay: 0.7s, 3.4s, 3.4s, 5.7s; }
/* Letra 16: inicia 0.75s después */
.welcome-title span:nth-child(16) { animation-delay: 0.75s, 3.5s, 3.5s, 5.75s; }
/* Letra 17: inicia 0.8s después */
.welcome-title span:nth-child(17) { animation-delay: 0.8s, 3.6s, 3.6s, 5.8s; }
/* Letra 18: inicia 0.85s después */
.welcome-title span:nth-child(18) { animation-delay: 0.85s, 3.7s, 3.7s, 5.85s; }
/* Letra 19: inicia 0.9s después */
.welcome-title span:nth-child(19) { animation-delay: 0.9s, 3.8s, 3.8s, 5.9s; }
/* Letra 20: inicia 0.95s después */
.welcome-title span:nth-child(20) { animation-delay: 0.95s, 3.9s, 3.9s, 5.95s; }
/* Letra 21: inicia 1s después */
.welcome-title span:nth-child(21) { animation-delay: 1s, 4s, 4s, 6s; }
/* Letra 22: inicia 1.05s después */
.welcome-title span:nth-child(22) { animation-delay: 1.05s, 4.1s, 4.1s, 6.05s; }
/* Letra 23: inicia 1.1s después */
.welcome-title span:nth-child(23) { animation-delay: 1.1s, 4.2s, 4.2s, 6.1s; }
/* Letra 24: inicia 1.15s después */
.welcome-title span:nth-child(24) { animation-delay: 1.15s, 4.3s, 4.3s, 6.15s; }
/* Letra 25: inicia 1.2s después */
.welcome-title span:nth-child(25) { animation-delay: 1.2s, 4.4s, 4.4s, 6.2s; }
/* Letra 26: inicia 1.25s después */
.welcome-title span:nth-child(26) { animation-delay: 1.25s, 4.5s, 4.5s, 6.25s; }
/* Letra 27: inicia 1.3s después */
.welcome-title span:nth-child(27) { animation-delay: 1.3s, 4.6s, 4.6s, 6.3s; }
/* Letra 28: inicia 1.35s después */
.welcome-title span:nth-child(28) { animation-delay: 1.35s, 4.7s, 4.7s, 6.35s; }
/* Letra 29: inicia 1.4s después */
.welcome-title span:nth-child(29) { animation-delay: 1.4s, 4.8s, 4.8s, 6.4s; }
/* Letra 30: inicia 1.45s después */
.welcome-title span:nth-child(30) { animation-delay: 1.45s, 4.9s, 4.9s, 6.45s; }
/* Letra 31: inicia 1.5s después */
.welcome-title span:nth-child(31) { animation-delay: 1.5s, 5s, 5s, 6.5s; }
/* Letra 32: inicia 1.55s después */
.welcome-title span:nth-child(32) { animation-delay: 1.55s, 5.1s, 5.1s, 6.55s; }
/* Letra 33: inicia 1.6s después */
.welcome-title span:nth-child(33) { animation-delay: 1.6s, 5.2s, 5.2s, 6.6s; }
/* Letra 34: inicia 1.65s después */
.welcome-title span:nth-child(34) { animation-delay: 1.65s, 5.3s, 5.3s, 6.65s; }
/* Letra 35: inicia 1.7s después */
.welcome-title span:nth-child(35) { animation-delay: 1.7s, 5.4s, 5.4s, 6.7s; }
/* Letra 36: inicia 1.75s después */
.welcome-title span:nth-child(36) { animation-delay: 1.75s, 5.5s, 5.5s, 6.75s; }
/* Letra 37: inicia 1.8s después */
.welcome-title span:nth-child(37) { animation-delay: 1.8s, 5.6s, 5.6s, 6.8s; }
/* Letra 38: inicia 1.85s después */
.welcome-title span:nth-child(38) { animation-delay: 1.85s, 5.7s, 5.7s, 6.85s; }
/* Letra 39: inicia 1.9s después */
.welcome-title span:nth-child(39) { animation-delay: 1.9s, 5.8s, 5.8s, 6.9s; }
/* Letra 40: inicia 1.95s después */
.welcome-title span:nth-child(40) { animation-delay: 1.95s, 5.9s, 5.9s, 6.95s; }
/* Letra 41: inicia 2s después */
.welcome-title span:nth-child(41) { animation-delay: 2s, 6s, 6s, 7s; }
/* Letra 42: inicia 2.05s después */
.welcome-title span:nth-child(42) { animation-delay: 2.05s, 6.1s, 6.1s, 7.05s; }
/* Letra 43: inicia 2.1s después */
.welcome-title span:nth-child(43) { animation-delay: 2.1s, 6.2s, 6.2s, 7.1s; }
/* Letra 44: inicia 2.15s después */
.welcome-title span:nth-child(44) { animation-delay: 2.15s, 6.3s, 6.3s, 7.15s; }
/* Letra 45: inicia 2.2s después */
.welcome-title span:nth-child(45) { animation-delay: 2.2s, 6.4s, 6.4s, 7.2s; }
/* Letra 46: inicia 2.25s después */
.welcome-title span:nth-child(46) { animation-delay: 2.25s, 6.5s, 6.5s, 7.25s; }
/* Letra 47: inicia 2.3s después */
.welcome-title span:nth-child(47) { animation-delay: 2.3s, 6.6s, 6.6s, 7.3s; }
/* Letra 48: inicia 2.35s después */
.welcome-title span:nth-child(48) { animation-delay: 2.35s, 6.7s, 6.7s, 7.35s; }
/* Letra 49: inicia 2.4s después */
.welcome-title span:nth-child(49) { animation-delay: 2.4s, 6.8s, 6.8s, 7.4s; }
/* Letra 50: inicia 2.45s después */
.welcome-title span:nth-child(50) { animation-delay: 2.45s, 6.9s, 6.9s, 7.45s; }
/* Letra 51: inicia 2.5s después */
.welcome-title span:nth-child(51) { animation-delay: 2.5s, 7s, 7s, 7.5s; }
/* Letra 52: inicia 2.55s después */
.welcome-title span:nth-child(52) { animation-delay: 2.55s, 7.1s, 7.1s, 7.55s; }
/* Letra 53: inicia 2.6s después */
.welcome-title span:nth-child(53) { animation-delay: 2.6s, 7.2s, 7.2s, 7.6s; }
/* Letra 54: inicia 2.65s después */
.welcome-title span:nth-child(54) { animation-delay: 2.65s, 7.3s, 7.3s, 7.65s; }
/* Letra 55: inicia 2.7s después */
.welcome-title span:nth-child(55) { animation-delay: 2.7s, 7.4s, 7.4s, 7.7s; }
/* Letra 56: inicia 2.75s después */
.welcome-title span:nth-child(56) { animation-delay: 2.75s, 7.5s, 7.5s, 7.75s; }
/* Letra 57: inicia 2.8s después */
.welcome-title span:nth-child(57) { animation-delay: 2.8s, 7.6s, 7.6s, 7.8s; }
/* Letra 58: inicia 2.85s después */
.welcome-title span:nth-child(58) { animation-delay: 2.85s, 7.7s, 7.7s, 7.85s; }
/* Letra 59: inicia 2.9s después */
.welcome-title span:nth-child(59) { animation-delay: 2.9s, 7.8s, 7.8s, 7.9s; }
/* Letra 60: inicia 2.95s después */
.welcome-title span:nth-child(60) { animation-delay: 2.95s, 7.9s, 7.9s, 7.95s; }
/* Letra 61: inicia 3s después */
.welcome-title span:nth-child(61) { animation-delay: 3s, 8s, 8s, 8s; }
/* Letra 62: inicia 3.05s después */
.welcome-title span:nth-child(62) { animation-delay: 3.05s, 8.1s, 8.1s, 8.05s; }
/* Letra 63: inicia 3.1s después */
.welcome-title span:nth-child(63) { animation-delay: 3.1s, 8.2s, 8.2s, 8.1s; }
/* Letra 64: inicia 3.15s después */
.welcome-title span:nth-child(64) { animation-delay: 3.15s, 8.3s, 8.3s, 8.15s; }
/* Letra 65: inicia 3.2s después */
.welcome-title span:nth-child(65) { animation-delay: 3.2s, 8.4s, 8.4s, 8.2s; }
/* Letra 66: inicia 3.25s después */
.welcome-title span:nth-child(66) { animation-delay: 3.25s, 8.5s, 8.5s, 8.25s; }
/* Letra 67: inicia 3.3s después */
.welcome-title span:nth-child(67) { animation-delay: 3.3s, 8.6s, 8.6s, 8.3s; }
/* Letra 68: inicia 3.35s después */
.welcome-title span:nth-child(68) { animation-delay: 3.35s, 8.7s, 8.7s, 8.35s; }
/* Letra 69: inicia 3.4s después */
.welcome-title span:nth-child(69) { animation-delay: 3.4s, 8.8s, 8.8s, 8.4s; }
/* Letra 70: inicia 3.45s después - última letra soportada */
.welcome-title span:nth-child(70) { animation-delay: 3.45s, 8.9s, 8.9s, 8.45s; }

/* Responsive para móviles */
/* Media query que se activa cuando el ancho de pantalla es menor o igual a 768px */
@media (max-width: 768px) {
    /* En dispositivos móviles, reduce el tamaño de fuente del título */
    .welcome-title {
        /* Reduce el tamaño de fuente a 1.5 veces el tamaño base (antes era 2.5em) */
        font-size: 1.5em;
    }
}