/* ===== ANIMACIONES REVOLUCIONARIAS - AJEDREZ DE SILICIO ===== */

/* ===== ANIMACIONES DE ENTRADA CYBER ===== */
@keyframes cyberEntrance {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.8) rotateX(-30deg);
        filter: blur(20px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-20px) scale(1.05) rotateX(5deg);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

.form-container {
    animation: cyberEntrance 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ANIMACIÓN DE ENTRADA PARA EL HEADER ===== */
@keyframes headerCyberEntrance {
    from {
        opacity: 0;
        transform: translateY(-50px) rotateZ(-5deg);
        filter: drop-shadow(0 0 0 transparent);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateZ(0deg);
        filter: drop-shadow(0 0 30px rgba(199, 0, 57, 0.5));
    }
}

.form-header {
    animation: headerCyberEntrance 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== SECCIONES ESTÁTICAS ===== */
/* Las secciones permanecen visibles sin animaciones de entrada */

/* ===== ANIMACIÓN DE ENTRADA PARA EL BOTÓN ===== */
@keyframes buttonCyberEntrance {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.5) rotateZ(180deg);
        filter: drop-shadow(0 0 0 transparent);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateZ(0deg);
        filter: drop-shadow(0 0 30px rgba(199, 0, 57, 0.5));
    }
}

.form-actions {
    animation: buttonCyberEntrance 1s cubic-bezier(0.4, 0, 0.2, 1);
    animation-delay: 1.2s;
    animation-fill-mode: both;
}

/* ===== HOVER SUAVE PARA INPUTS ===== */
/* Hover sutil sin movimientos bruscos */
.form-input:hover {
    box-shadow: 0 0 10px rgba(199, 0, 57, 0.2);
    transition: var(--transition-fast);
}

/* ===== PULSO SUTIL PARA ELEMENTOS IMPORTANTES ===== */
@keyframes subtlePulse {
    0%, 100% {
        text-shadow: var(--neon-gold);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
    }
}

.highlight {
    animation: subtlePulse 3s ease-in-out infinite;
}

/* ===== BRILLO SUTIL PARA ENLACES EXTERNOS ===== */
@keyframes linkSubtleShine {
    0%, 100% {
        text-shadow: var(--neon-gold);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
    }
}

.external-link {
    animation: linkSubtleShine 3s ease-in-out infinite;
}

/* ===== ANIMACIÓN DE PARTÍCULAS CYBER AVANZADA ===== */
@keyframes particleCyberFloat {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg) scale(0);
        opacity: 0;
        filter: blur(0);
    }
    10% {
        opacity: 0.8;
        transform: scale(1);
        filter: blur(0);
    }
    25% {
        transform: translateX(50px) rotate(90deg);
        filter: blur(1px);
    }
    50% {
        transform: translateX(-30px) rotate(180deg);
        filter: blur(2px);
    }
    75% {
        transform: translateX(40px) rotate(270deg);
        filter: blur(1px);
    }
    90% {
        opacity: 0.8;
        filter: blur(0);
    }
    100% {
        transform: translateY(-100px) translateX(0) rotate(360deg) scale(0);
        opacity: 0;
        filter: blur(0);
    }
}

.particle {
    animation: particleCyberFloat 20s infinite linear;
}

/* ===== FONDO ESTÁTICO ===== */
/* Fondo sin animaciones para mejor legibilidad */

/* ===== ANIMACIÓN DE VALIDACIÓN CYBER ===== */
@keyframes validationCyberPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.1) rotate(2deg);
        filter: brightness(1.3);
    }
    50% {
        transform: scale(1.05) rotate(-1deg);
        filter: brightness(1.5);
    }
    75% {
        transform: scale(1.08) rotate(1deg);
        filter: brightness(1.3);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.form-input.valid {
    animation: validationCyberPulse 0.6s ease-out;
}

.form-input.invalid {
    animation: validationCyberPulse 0.6s ease-out;
}

/* ===== ANIMACIÓN DE CARGA CYBER PARA EL BOTÓN ===== */
@keyframes buttonCyberLoading {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% {
        transform: scale(0.95) rotate(1deg);
        filter: brightness(0.8);
    }
    50% {
        transform: scale(0.9) rotate(0deg);
        filter: brightness(0.6);
    }
    75% {
        transform: scale(0.95) rotate(-1deg);
        filter: brightness(0.8);
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

.submit-btn:disabled {
    animation: buttonCyberLoading 1.5s ease-in-out infinite;
}

/* ===== ANIMACIÓN DE ÉXITO CYBER PARA EL BOTÓN ===== */
@keyframes buttonCyberSuccess {
    0% {
        transform: scale(1);
        background: linear-gradient(45deg, var(--primary-red), var(--primary-red-light));
        filter: brightness(1);
    }
    25% {
        transform: scale(1.1) rotate(5deg);
        background: linear-gradient(45deg, var(--success-color), #00cc66);
        filter: brightness(1.3);
    }
    50% {
        transform: scale(1.05) rotate(-2deg);
        background: linear-gradient(45deg, var(--success-color), #00ff88);
        filter: brightness(1.5);
    }
    75% {
        transform: scale(1.08) rotate(2deg);
        background: linear-gradient(45deg, var(--success-color), #00cc66);
        filter: brightness(1.3);
    }
    100% {
        transform: scale(1);
        background: linear-gradient(45deg, var(--success-color), #00ff88);
        filter: brightness(1);
    }
}

.submit-btn.success {
    animation: buttonCyberSuccess 0.8s ease-out;
}

/* ===== ANIMACIÓN DE ERROR CYBER PARA EL BOTÓN ===== */
@keyframes buttonCyberError {
    0% {
        transform: translateX(0);
        background: linear-gradient(45deg, var(--primary-red), var(--primary-red-light));
        filter: brightness(1);
    }
    10% {
        transform: translateX(-10px) rotate(-2deg);
        background: linear-gradient(45deg, var(--error-color), #ff5588);
        filter: brightness(1.2);
    }
    20% {
        transform: translateX(10px) rotate(2deg);
        background: linear-gradient(45deg, var(--error-color), #ff3366);
        filter: brightness(1.4);
    }
    30% {
        transform: translateX(-8px) rotate(-1deg);
        background: linear-gradient(45deg, var(--error-color), #ff5588);
        filter: brightness(1.2);
    }
    40% {
        transform: translateX(8px) rotate(1deg);
        background: linear-gradient(45deg, var(--error-color), #ff3366);
        filter: brightness(1.4);
    }
    50% {
        transform: translateX(-5px) rotate(-0.5deg);
        background: linear-gradient(45deg, var(--error-color), #ff5588);
        filter: brightness(1.2);
    }
    60% {
        transform: translateX(5px) rotate(0.5deg);
        background: linear-gradient(45deg, var(--error-color), #ff3366);
        filter: brightness(1.4);
    }
    70% {
        transform: translateX(-3px) rotate(-0.2deg);
        background: linear-gradient(45deg, var(--error-color), #ff5588);
        filter: brightness(1.2);
    }
    80% {
        transform: translateX(3px) rotate(0.2deg);
        background: linear-gradient(45deg, var(--error-color), #ff3366);
        filter: brightness(1.4);
    }
    90% {
        transform: translateX(-1px) rotate(-0.1deg);
        background: linear-gradient(45deg, var(--error-color), #ff5588);
        filter: brightness(1.2);
    }
    100% {
        transform: translateX(0);
        background: linear-gradient(45deg, var(--error-color), #ff3366);
        filter: brightness(1);
    }
}

.submit-btn.error {
    animation: buttonCyberError 1s ease-out;
}

/* ===== ANIMACIÓN DE ENTRADA PARA ESTADOS DEL FORMULARIO ===== */
@keyframes statusCyberFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8) rotateX(-30deg);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

.form-status.show {
    animation: statusCyberFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ANIMACIÓN DE TYPING CYBER PARA EL TÍTULO ===== */
@keyframes titleCyberTyping {
    from {
        width: 0;
        border-right-color: var(--primary-red);
    }
    to {
        width: 100%;
        border-right-color: transparent;
    }
}

@keyframes cursorCyberBlink {
    0%, 50% {
        border-right-color: var(--primary-red);
        text-shadow: var(--neon-red);
    }
    51%, 100% {
        border-right-color: transparent;
        text-shadow: none;
    }
}

.title-text {
    overflow: hidden;
    border-right: 4px solid var(--primary-red);
    white-space: nowrap;
    animation: titleCyberTyping 2.5s steps(25) 0.5s, cursorCyberBlink 1s infinite 3s;
    animation-fill-mode: both;
}

/* ===== ANIMACIÓN DE ENTRADA PARA ICONOS DE SECCIÓN ===== */
@keyframes iconCyberEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(180deg);
        filter: blur(5px);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2) rotate(90deg);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

.section-icon {
    animation: iconCyberEntrance 0.8s cubic-bezier(0.4, 0, 0.2, 1), sectionIconPulse 3s ease-in-out infinite 0.8s;
}

/* ===== ANIMACIÓN DE HOVER CYBER PARA BOTONES ===== */
@keyframes buttonCyberHover {
    0% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
    100% {
        transform: translateY(-5px) scale(1.05);
        filter: brightness(1.2);
    }
}

.submit-btn:hover {
    animation: buttonCyberHover 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===== ANIMACIÓN DE PARTÍCULAS DE FONDO CYBER DINÁMICAS ===== */
@keyframes particleCyberFloatAdvanced {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg) scale(0);
        opacity: 0;
        filter: blur(0);
    }
    10% {
        opacity: 0.8;
        transform: scale(1);
        filter: blur(0);
    }
    20% {
        transform: translateX(30px) rotate(72deg);
        filter: blur(1px);
    }
    40% {
        transform: translateX(-20px) rotate(144deg);
        filter: blur(2px);
    }
    60% {
        transform: translateX(25px) rotate(216deg);
        filter: blur(1px);
    }
    80% {
        transform: translateX(-15px) rotate(288deg);
        filter: blur(2px);
    }
    90% {
        opacity: 0.8;
        filter: blur(0);
    }
    100% {
        transform: translateY(-100px) translateX(0) rotate(360deg) scale(0);
        opacity: 0;
        filter: blur(0);
    }
}

.particle:nth-child(odd) {
    animation: particleCyberFloatAdvanced 25s infinite linear;
}

/* ===== ANIMACIÓN DE ENTRADA PARA EL FORMULARIO COMPLETO ===== */
@keyframes formCyberEntrance {
    0% {
        opacity: 0;
        transform: translateY(150px) scale(0.7) rotateX(-45deg);
        filter: blur(20px);
    }
    30% {
        opacity: 0.5;
        transform: translateY(-30px) scale(1.1) rotateX(10deg);
        filter: blur(10px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(10px) scale(0.95) rotateX(-5deg);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

.admission-form {
    animation: formCyberEntrance 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    animation-fill-mode: both;
}

/* ===== ELEMENTOS DEL FORMULARIO ESTÁTICOS ===== */
/* Los elementos del formulario permanecen visibles sin animaciones de entrada */

/* ===== ANIMACIÓN DE ENTRADA PARA HINTS ===== */
@keyframes hintCyberSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) rotateX(-15deg);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

.input-hint {
    animation: hintCyberSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== HOVER SUAVE PARA SECCIONES ===== */
/* Hover sutil sin movimientos bruscos */
.form-section:hover {
    transform: translateY(-2px);
    transition: var(--transition-fast);
}

/* ===== FOCUS SUAVE PARA INPUTS ===== */
/* Focus sutil sin movimientos bruscos */
.form-input:focus {
    box-shadow: 0 0 15px rgba(199, 0, 57, 0.3);
    transition: var(--transition-fast);
}

/* ===== ANIMACIÓN DE PARTÍCULAS DE ÉXITO CYBER ===== */
@keyframes successParticlesCyber {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
        filter: blur(1px);
    }
    100% {
        transform: scale(1.5) rotate(360deg);
        opacity: 0;
        filter: blur(2px);
    }
}

.success-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.success-particles::before,
.success-particles::after {
    content: '✨';
    position: absolute;
    font-size: 2.5rem;
    animation: successParticlesCyber 1.2s ease-out;
    text-shadow: 0 0 20px var(--success-color);
}

.success-particles::before {
    animation-delay: 0s;
}

.success-particles::after {
    animation-delay: 0.3s;
}

/* ===== ANIMACIÓN DE PULSO CYBER PARA ELEMENTOS CRÍTICOS ===== */
@keyframes criticalCyberPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(199, 0, 57, 0.4);
        border-color: var(--primary-red);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 40px rgba(199, 0, 57, 0.8), 0 0 60px rgba(255, 193, 7, 0.4);
        border-color: var(--primary-red-light);
        filter: brightness(1.3);
    }
}

.form-input[required]:focus {
    animation: criticalCyberPulse 2s ease-in-out infinite;
}

/* ===== ANIMACIÓN DE CARGA CYBER PARA EL SPINNER ===== */
@keyframes spinnerCyberPulse {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.7;
        filter: brightness(1.5);
    }
}

.loading-spinner {
    animation: spinCyber 1s linear infinite, spinnerCyberPulse 2s ease-in-out infinite;
}

/* ===== ANIMACIÓN DE ENTRADA CYBER PARA EL LOGO ===== */
@keyframes logoCyberEntrance {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-360deg);
        filter: blur(10px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.3) rotate(-180deg);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

.logo-silicio {
    animation: logoCyberEntrance 1.5s cubic-bezier(0.4, 0, 0.2, 1), logoFloat 6s ease-in-out infinite 1.5s;
}

/* ===== ANIMACIÓN DE RIPPLE CYBER ===== */
@keyframes rippleCyber {
    0% {
        transform: scale(0);
        opacity: 1;
        filter: blur(0);
    }
    50% {
        transform: scale(1);
        opacity: 0.6;
        filter: blur(1px);
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
        filter: blur(2px);
    }
}

/* ===== ANIMACIÓN DE GLITCH CYBER ===== */
@keyframes glitchCyber {
    0%, 100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    10% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
    20% {
        transform: translate(2px, -2px);
        filter: hue-rotate(180deg);
    }
    30% {
        transform: translate(-2px, -2px);
        filter: hue-rotate(270deg);
    }
    40% {
        transform: translate(2px, 2px);
        filter: hue-rotate(360deg);
    }
    50% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
    60% {
        transform: translate(2px, -2px);
        filter: hue-rotate(180deg);
    }
    70% {
        transform: translate(-2px, -2px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translate(2px, 2px);
        filter: hue-rotate(360deg);
    }
    90% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
}

/* Aplicar glitch a elementos específicos en hover */
.form-section:hover .section-title {
    animation: glitchCyber 0.3s ease-in-out;
}

/* ===== ANIMACIÓN DE MATRIX CYBER ===== */
/* Removida para simplificar el diseño */

/* ===== ANIMACIÓN DE HOLOGRAMA CYBER ===== */
/* Removida para evitar movimientos molestos */

/* ===== ENERGÍA SUTIL PARA EL BOTÓN ===== */
@keyframes buttonSubtleEnergy {
    0%, 100% {
        box-shadow: var(--shadow-cyber);
    }
    50% {
        box-shadow: 0 0 25px rgba(199, 0, 57, 0.4);
    }
}

/* Aplicar energía sutil solo al botón */
.submit-btn:hover {
    animation: buttonSubtleEnergy 2s ease-in-out infinite;
}