/* Componente de Animación de Logos 3D */

/* Estilos del título */
h2 {
    font-size: 28px !important;
    color: #2D5691 !important;
    font-style: normal !important;
    font-family: Poppins-Medium !important;
    text-align: center !important;
    margin-top: 30px !important;
}

/* Animaciones fadeInUp */
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/* Aplicar fadeInUp a título y container */
.clientes-title {
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
}

.clientes-title.fadeInUp {
    -webkit-animation: fadeInUp 1s ease-out 0s forwards;
    animation: fadeInUp 1s ease-out 0s forwards;
}

.logos-animation-container {
    position: relative;
    width: 100%;
    height: 400px; /* Altura por defecto del contenedor */
    background: #2D5691;
    overflow: hidden;
    perspective: 2000px;
    perspective-origin: center center;
    border-radius: 12px; /* Esquinas redondeadas completas */
    padding: 24px;
    margin: 16px 0;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
}

.logos-animation-container.fadeInUp {
    -webkit-animation: fadeInUp 1s ease-out 0.5s forwards;
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

/* Optimización para dispositivos con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .clientes-title.fadeInUp {
        -webkit-animation: fadeInUp 0.6s ease-out 0s forwards;
        animation: fadeInUp 0.6s ease-out 0s forwards;
    }
    
    .logos-animation-container.fadeInUp {
        -webkit-animation: fadeInUp 0.6s ease-out 0.3s forwards;
        animation: fadeInUp 0.6s ease-out 0.3s forwards;
    }
}


.logos-animation-container {
    position: relative;
    width: 100%;
    height: 400px; /* Altura por defecto del contenedor */
    background: #2D5691;
    overflow: hidden;
    perspective: 2000px;
    perspective-origin: center center;
    border-radius: 12px; /* Esquinas redondeadas completas */
    padding: 24px;
    margin: 16px 0;
    box-sizing: border-box;
    transform: translateY(60px);
    opacity: 0;
    transition: all 3s ease-out 0.6s;
    will-change: transform, opacity;
}

.logos-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.logo {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0;
    transform: scale(0.1) translateZ(0);
    pointer-events: none;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    perspective: 1000px;
    box-sizing: border-box;
    /* Posición inicial se establece dinámicamente por JavaScript */
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Animaciones para diferentes direcciones */
@keyframes moveTopLeft {
    0% {
        transform: scale(0.1) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(6) translate3d(-150px, -80px, 200px) rotateX(15deg) rotateY(-15deg);
        opacity: 1;
    }
    100% {
        transform: scale(8) translate3d(-180px, -100px, 400px) rotateX(20deg) rotateY(-20deg);
        opacity: 1;
    }
}

@keyframes moveTopRight {
    0% {
        transform: scale(0.1) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(6) translate3d(150px, -80px, 200px) rotateX(15deg) rotateY(15deg);
        opacity: 1;
    }
    100% {
        transform: scale(8) translate3d(180px, -100px, 400px) rotateX(20deg) rotateY(20deg);
        opacity: 1;
    }
}

@keyframes moveBottomLeft {
    0% {
        transform: scale(0.1) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(6) translate3d(-150px, 80px, 200px) rotateX(-15deg) rotateY(-15deg);
        opacity: 1;
    }
    100% {
        transform: scale(8) translate3d(-180px, 100px, 400px) rotateX(-20deg) rotateY(-20deg);
        opacity: 1;
    }
}

@keyframes moveBottomRight {
    0% {
        transform: scale(0.1) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(6) translate3d(150px, 80px, 200px) rotateX(-15deg) rotateY(15deg);
        opacity: 1;
    }
    100% {
        transform: scale(8) translate3d(180px, 100px, 400px) rotateX(-20deg) rotateY(20deg);
        opacity: 1;
    }
}

@keyframes moveTop {
    0% {
        transform: scale(0.1) translate3d(0, 0, 0) rotateX(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(6) translate3d(0, -80px, 200px) rotateX(20deg);
        opacity: 1;
    }
    100% {
        transform: scale(8) translate3d(0, -100px, 400px) rotateX(25deg);
        opacity: 1;
    }
}

@keyframes moveBottom {
    0% {
        transform: scale(0.1) translate3d(0, 0, 0) rotateX(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(6) translate3d(0, 80px, 200px) rotateX(-20deg);
        opacity: 1;
    }
    100% {
        transform: scale(8) translate3d(0, 100px, 400px) rotateX(-25deg);
        opacity: 1;
    }
}

@keyframes moveLeft {
    0% {
        transform: scale(0.1) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(6) translate3d(-150px, 0, 200px) rotateY(-20deg);
        opacity: 1;
    }
    100% {
        transform: scale(8) translate3d(-180px, 0, 400px) rotateY(-25deg);
        opacity: 1;
    }
}

@keyframes moveRight {
    0% {
        transform: scale(0.1) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(6) translate3d(150px, 0, 200px) rotateY(20deg);
        opacity: 1;
    }
    100% {
        transform: scale(8) translate3d(180px, 0, 400px) rotateY(25deg);
        opacity: 1;
    }
}

/* Clases para aplicar las animaciones */
.logo.direction-1 {
    animation: moveTopLeft 16s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.logo.direction-2 {
    animation: moveTopRight 16s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.logo.direction-3 {
    animation: moveBottomLeft 16s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.logo.direction-4 {
    animation: moveBottomRight 16s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.logo.direction-5 {
    animation: moveTop 16s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.logo.direction-6 {
    animation: moveBottom 16s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.logo.direction-7 {
    animation: moveLeft 16s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.logo.direction-8 {
    animation: moveRight 16s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Optimización para rendimiento */
@media (prefers-reduced-motion: reduce) {
    .logo {
        animation-duration: 20s;
    }
}

/* Variantes de tamaño del contenedor */
.logos-animation-container.small {
    height: 200px;
}

.logos-animation-container.medium {
    height: 400px; /* Por defecto */
}

.logos-animation-container.large {
    height: 600px;
}

.logos-animation-container.xl {
    height: 800px;
}


/* Estilos responsivos */
@media (max-width: 768px) {
    .logo {
        width: 60px;
        height: 60px;
        left: calc(50% - 30px);
        top: calc(50% - 30px);
    }
    
    .logos-animation-container.small {
        height: 150px;
    }
    
    .logos-animation-container.medium {
        height: 300px;
    }
    
    .logos-animation-container.large {
        height: 450px;
    }
    
    .logos-animation-container.xl {
        height: 600px;
    }
}