/* ============================================
   ANIMACIÓN PROFESIONAL FLUIDA Y SINCRONIZADA
   ============================================ */

/* Animación para líneas separadas (vision y project cards) */
@keyframes ironBarLines {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    25% {
        opacity: 0.3;
        transform: scale(0.85);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.95);
    }

    75% {
        opacity: 0.9;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animación para borde completo (collaboration card) */
@keyframes ironBarBorder {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    25% {
        opacity: 0.3;
        transform: scale(0.85);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.95);
    }

    75% {
        opacity: 0.9;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Vision card: animación para borde L */
.vision-card::before {
    animation: ironBarBorder 1.5s ease-out forwards;
}

/* Project card: animación para borde superior-derecho */
.project-card::before {
    animation: ironBarBorder 1.5s ease-out 0.3s forwards;
}

/* Collaboration card: animación para borde superior-derecho */
.collaboration-card::before {
    animation: ironBarBorder 1.5s ease-out 0.8s forwards;
}

/* Eliminar sombras que pueden causar efecto de recuadro */
.vision-card::before,
.vision-card::after,
.project-card::before,
.project-card::after,
.collaboration-card::before {
    /* Sin sombras adicionales para mantener forma de línea original */
}

/* Animación para líneas horizontales (bottom lines) */
.vision-card::after,
.project-card::after {
    transform-origin: center bottom;
}

/* Animación para líneas verticales (left/bottom lines) */
.vision-card::before,
.project-card::before {
    transform-origin: left center;
}

/* Collaboration card: borde superior-derecho */
.collaboration-card::before {
    transform-origin: top right;
}

/* Responsive: reducir intensidad en móviles */
@media (max-width: 768px) {

    .vision-card::before,
    .vision-card::after,
    .project-card::before,
    .project-card::after,
    .collaboration-card::before {
        animation-duration: 1s, 0.2s;
        animation-delay: 0s, 1s;
    }

    .vision-card::after {
        animation-delay: 0.1s, 1.1s;
    }

    .project-card::before {
        animation-delay: 0.2s, 1.2s;
    }

    .project-card::after {
        animation-delay: 0.3s, 1.3s;
    }

    .collaboration-card::before {
        animation-delay: 0.4s, 1.4s;
    }
}